jQuery文档节点处理，克隆，each循环，动画效果，插件

2023-02-22 15:13:08

文档节点处理

//创建一个标签对象

    $("<p>")

//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

    $("").appendTo(content)       ----->$("p").appendTo("div");

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

    $("").prependTo(content)      ----->$("p").prependTo("#foo");

$(A).append(B)// 把B追加到A

$(A).appendTo(B)// 把A追加到B

$(A).prepend(B)// 把B前置到A

$(A).prependTo(B)// 把A前置到B

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

$(A).after(B)// 把B放到A的后面

$(A).insertAfter(B)// 把A放到B的后面

$(A).before(B)// 把B放到A的前面

$(A).insertBefore(B)// 把A放到B的前面

//替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

replaceWith()

replaceAll()

//删除

    $("").empty()  // 清空元素的子元素

    $("").remove([expr])  // 删除元素

//复制

    $("").clone([Even[,deepEven]])

例子

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <title>Title</title>

    <style>

        #d1{

            background-color: red;

        }

    </style>

</head>

<body>

<ul>

    <li>1</li>

</ul>

<p id="p1">p1</p>

<div id="d1">

    <div>

        <span>1</span><span>2</span>

    </div>

</div>

<script src="../jquery-3.2.1.min.js"></script>

<script>

//    var trEle = document.createElement("tr");

//    $(trEle).text("");

    var liEle = document.createElement("li");

//    $(liEle).text("2");

//    $("ul").append(liEle);

//    $("ul").append("<li>3</li>");

//    $(liEle).appendTo($("ul"));

//    $(liEle).text("0");

//    $("ul").prepend(liEle);

//    $(liEle).prependTo("ul");

    var $li2 = $("<li>");

    $li2.text("2");

    $("ul").append($li2);

    var pEle = document.createElement("p");

//    $(pEle).text("p");

//    $("#p1").after($(pEle));

    $(pEle).text("p0");

//    $("#p1").before(pEle);

    $(pEle).insertBefore($("#p1"));

//    $("#d1").remove();  // remove删除d1

    $("#d1").empty();  // 清除d1的子节点

</script>

</body>

</html>

克隆例子

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>克隆</title>

  <style>

    #b1 {

      background-color: deeppink;

      padding: 5px;

      color: white;

      margin: 5px;

    }

    #b2 {

      background-color: dodgerblue;

      padding: 5px;

      color: white;

      margin: 5px;

    }

  </style>

</head>

<body>

<button id="b1">屠龙宝刀，点击就送</button>

<hr>

<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>

<script>

  // clone方法不加参数true，克隆标签但不克隆标签带的事件

  $("#b1").on("click", function () {

    $(this).clone().insertAfter(this);

  });

  // clone方法加参数true，克隆标签并且克隆标签带的事件

  $("#b2").on("click", function () {

    $(this).clone(true).insertAfter(this);

  });

</script>

</body>

</html>

事件

页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){

// 在这里写你的JS代码...

})

简写：

$(function(){

// 你在这里写你的代码

})

文档加载完绑定事件，并且阻止默认事件发生：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>登录注册示例</title>

  <style>

    .error {

      color: red;

    }

  </style>

</head>

<body>

<form id="myForm">

  <label for="name">姓名</label>

  <input type="text" id="name">

  <span class="error"></span>

  <label for="passwd">密码</label>

  <input type="password" id="passwd">

  <span class="error"></span>

  <input type="submit" id="modal-submit" value="登录">

</form>

<script src="jquery-3.2.1.min.js"></script>

<script src="s7validate.js"></script>

<script>

  function myValidation() {

    // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树

    var $myForm = $("#myForm");

    $myForm.find(":submit").on("click", function () {

      // 定义一个标志位，记录表单填写是否正常

      var flag = true;

      $myForm.find(":text, :password").each(function () {

        var val = $(this).val();

        if (val.length <= 0 ){

          var labelName = $(this).prev("label").text();

          $(this).next("span").text(labelName + "不能为空");

          flag = false;

        }

      });

      // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件

      return flag;

    });

    // input输入框获取焦点后移除之前的错误提示信息

    $myForm.find("input[type!='submit']").on("focus", function () {

      $(this).next(".error").text("");

    })

  }

  // 文档树就绪后执行

  $(document).ready(function () {

    myValidation();

  });

</script>

</body>

</html>

常用事件

click(function(){...})

hover(function(){...})

blur(function(){...})

focus(function(){...})

change(function(){...})

keyup(function(){...})

keydown和keyup事件组合示例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>键盘事件示例</title>

</head>

<body>

<table border="1">

  <thead>

  <tr>

    <th>#</th>

    <th>姓名</th>

    <th>操作</th>

  </tr>

  </thead>

  <tbody>

  <tr>

    <td><input type="checkbox"></td>

    <td>Egon</td>

    <td>

      <select>

        <option value="1">上线</option>

        <option value="2">下线</option>

        <option value="3">停职</option>

      </select>

    </td>

  </tr>

  <tr>

    <td><input type="checkbox"></td>

    <td>Alex</td>

    <td>

      <select>

        <option value="1">上线</option>

        <option value="2">下线</option>

        <option value="3">停职</option>

      </select>

    </td>

  </tr>

  <tr>

    <td><input type="checkbox"></td>

    <td>Yuan</td>

    <td>

      <select>

        <option value="1">上线</option>

        <option value="2">下线</option>

        <option value="3">停职</option>

      </select>

    </td>

  </tr>

  <tr>

    <td><input type="checkbox"></td>

    <td>EvaJ</td>

    <td>

      <select>

        <option value="1">上线</option>

        <option value="2">下线</option>

        <option value="3">停职</option>

      </select>

    </td>

  </tr>

  <tr>

    <td><input type="checkbox"></td>

    <td>Gold</td>

    <td>

      <select>

        <option value="1">上线</option>

        <option value="2">下线</option>

        <option value="3">停职</option>

      </select>

    </td>

  </tr>

  </tbody>

</table>

<input type="button" id="b1" value="全选">

<input type="button" id="b2" value="取消">

<input type="button" id="b3" value="反选">

<script src="jquery-3.2.1.min.js"></script>

<script>

  // 全选

  $("#b1").on("click", function () {

    $(":checkbox").prop("checked", true);

  });

  // 取消

  $("#b2").on("click", function () {

    $(":checkbox").prop("checked", false);

  });

  // 反选

  $("#b3").on("click", function () {

    $(":checkbox").each(function () {

      var flag = $(this).prop("checked");

      $(this).prop("checked", !flag);

    })

  });

  // 按住shift键，批量操作

  // 定义全局变量

  var flag = false;

  // 全局事件，监听键盘shift按键是否被按下

  $(window).on("keydown", function (e) {

//    alert(e.keyCode);

    if (e.keyCode === 16){

      flag = true;

    }

  });

  // 全局事件,shift按键抬起时将全局变量置为false

  $(window).on("keyup", function (e) {

    if (e.keyCode === 16){

      flag = false;

    }

  });

  // select绑定change事件

  $("table select").on("change", function () {

    // 是否为批量操作模式

    if (flag) {

      var selectValue = $(this).val();

      // 找到所有被选中的那一行的select，选中指定值

      $("input:checked").parent().parent().find("select").val(selectValue);

    }

  })

</script>

</body>

</html>

事件绑定

方法一：语法:  标签对象.事件(函数)

$("#b1").click(function () {

    alert(123);

});

方法二：.on( events [, selector ],function(){})

$("#b1").on("click",function () {

     alert(456);

});

移除事件

.off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

events：事件

selector: 选择器（可选的）

function: 事件处理函数

阻止后续事件执行

return false; // 常见阻止表单提交等

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {

  // 删除按钮绑定的事件

}$("已经存在的标签").on("事件", "选择器", function(){...})   为已存在标签内的标签绑定事件，新增的标签也能被绑定上事件

each循环

query支持两种循环方式：

格式：$.each(obj,fn)

<body>

<form action="">

    <input type="text">

    <input type="password">

    <input type="submit">

</form>

<script src="../jquery-3.2.1.min.js"></script>

<script>

    var a = [11,22,33,44,55];

    $.each(a,function (i,v) {

        console.log(i,v);  // i是索引，v是值

        if (v === 33){

            return false;  // 后面的都不执行了，相当于break，如果只有return，相当于continue

        }

    });

    $(":submit").on("click",function () {

        if ($(":text").val().length === 0 || $(":password").val().length === 0){

            return false;  // 此时form表单的提交按钮不会执行提交

        }

    })

</script>

</body>

格式：$("").each(fn)

$("tr").each(function(){

    console.log($(this).html())  // this指当前循环的标签

})

each扩展

/*

        function f(){

        for(var i=0;i<4;i++){

            if (i==2){

                return

            }

            console.log(i)

        }

    }

    f();  // 这个例子大家应该不会有问题吧!!!

//-----------------------------------------------------------------------

    li=[11,22,33,44];

    $.each(li,function(i,v){

        if (v==33){

                return ;   //  ===试一试 return false会怎样?

            }

            console.log(v)

    });

//------------------------------------------

    // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行

    //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,

    //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:

         for(var i in obj){

             ret=func(i,obj[i]) ;

             if(ret==false){

                 return ;

             }

         }

    // 这样就很灵活了:

    // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true

    // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

// ---------------------------------------------------------------------

动画效果

显示隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

$(document).ready(function() {

    $("#hide").click(function () {

        $("p").hide(1000);

    });

    $("#show").click(function () {

        $("p").show(1000);

    });

//用于切换被选元素的 hide() 与 show() 方法。

    $("#toggle").click(function () {

        $("p").toggle();

    });

})

    </script>

    <link type="text/css" rel="stylesheet" href="style.css">

</head>

<body>

    <p>hello</p>

    <button id="hide">隐藏</button>

    <button id="show">显示</button>

    <button id="toggle">切换</button>

</body>

</html>

滑动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

    $(document).ready(function(){

     $("#slideDown").click(function(){

         $("#content").slideDown(1000);

     });

      $("#slideUp").click(function(){

         $("#content").slideUp(1000);

     });

      $("#slideToggle").click(function(){

         $("#content").slideToggle(1000);

     })

  });

    </script>

    <style>

        #content{

            text-align: center;

            background-color: lightblue;

            border:solid 1px red;

            display: none;

            padding: 50px;

        }

    </style>

</head>

<body>

    <div id="slideDown">出现</div>

    <div id="slideUp">隐藏</div>

    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>

</html>

淡入淡出

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

    $(document).ready(function(){

   $("#in").click(function(){

       $("#id1").fadeIn(1000);

   });

    $("#out").click(function(){

       $("#id1").fadeOut(1000);

   });

    $("#toggle").click(function(){

       $("#id1").fadeToggle(1000);

   });

    $("#fadeto").click(function(){

       $("#id1").fadeTo(1000,0.4);

   });

});

    </script>

</head>

<body>

      <button id="in">fadein</button>

      <button id="out">fadeout</button>

      <button id="toggle">fadetoggle</button>

      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>

</html>

回调函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

</head>

<body>

  <button>hide</button>

  <p>helloworld helloworld helloworld</p>

 <script>

   $("button").click(function(){

       $("p").hide(1000,function(){

           alert($(this).html())

       })

   })

    </script>

</body>

</html>

自定义动画示例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>点赞动画示例</title>

  <style>

    div {

      position: relative;

      display: inline-block;

    }

    div>i {

      display: inline-block;

      color: red;

      position: absolute;

      right: -16px;

      top: -5px;

      opacity: 1;

    }

  </style>

</head>

<body>

<div id="d1">点赞</div>

<script src="jquery-3.2.1.min.js"></script>

<script>

  $("#d1").on("click", function () {

    var newI = document.createElement("i");

    newI.innerText = "+1";

    $(this).append(newI);

    $(this).children("i").animate({

      opacity: 0

    }, 1000)

  })

</script>

</body>

</html>

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

.data(key, value):

描述：在匹配的元素上存储任意相关数据

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据

$("div").removeData("k");  //移除元素上存放k对应的数据

扩展方法 (插件机制)

jQuery.extend(object)

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。

在jQuery命名空间上增加两个函数:

<script>

    jQuery.extend({

      min: function(a, b) { return a < b ? a : b; },

      max: function(a, b) { return a > b ? a : b; }

});

    jQuery.min(2,3); // => 2

    jQuery.max(4,5); // => 5

</script>

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

增加两个插件方法：

<body>

<input type="checkbox">

<input type="checkbox">

<input type="checkbox">

<script src="jquery.min.js"></script>

<script>

    jQuery.fn.extend({

      check: function() {

         $(this).attr("checked",true);

      },

      uncheck: function() {

         $(this).attr("checked",false);

      }

    });

    $(":checkbox:gt(0)").check()

</script>

</body>

单独写在文件中的扩展，为了防止引入过个插件时，出现覆盖现象，使用下面的方法写：

(function(jq){

  jq.extend({

    funcName:function(){

    ...

    },

  });

})(jQuery);

登录验证简单例子

html文件

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <title>Title</title>

    <style>

        .error{

            color: red;

        }

    </style>

</head>

<body>

<form action="">

    <div>

        <label for="name">姓名</label>

        <input id="name" type="text" name="username">

        <span class="error"></span>

    </div>

    <div>

        <label for="pwd">姓名</label>

        <input id="pwd" type="password" name="password">

        <span class="error"></span>

    </div>

    <div>

        <input id="submit" type="submit" value="登录">

    </div>

</form>

<script src="../jquery-3.2.1.min.js"></script>

<script src="extend示例.js"></script>

<script>

    $.check();

</script>

</body>

</html>

js插件文件

$.extend({

    check: function () {

        function check() {

            var flag = true;

            $("form input[type!='submit']").each(function () {

                if ($(this).val().length === 0) {

                    // 此input没有填写数据，需要填写错误提示

                    var currentLabel = $(this).prev().text();

                    $(this).next().text(currentLabel + "不能为空");

                    // 将标识位置为false，阻止后续submit自带的提交事件

                    flag = false;

                    // 阻止each循环

                    return flag;

                }

            });

            return flag;

        }

// 清空之前的错误信息

        $("form input[type!='submit']").on("focus", function () {

            $(this).next().text("");

        });

// 给登录按钮绑定事件

        $("#submit").on("click", function () {

            // 清空之前的错误提示

            // $("form .error").text("");

            return check();

        });

    }

});

码农公寓