JQuery

1 简介

​ JQuery是一个非常优秀的轻量级JS框架，提供了HTML文档操作、事件处理、动画设计和Ajax交互操作。JQuery的理念是write less do more。

1.1 下载

​ 官网：https://jquery.com/

​ 下载：https://jquery.com/download/

JQuery

1 简介

​ JQuery是一个非常优秀的轻量级JS框架，提供了HTML文档操作、事件处理、动画设计和Ajax交互操作。JQuery的理念是write less do more。

1.1 下载

​ 官网：https://jquery.com/

​ 下载：https://jquery.com/download/

1.2 导入

方式一 ： 离线版

<script src="js/jquery-3.4.1.js"></script>

方式二 ： 在线版（CDN）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2 入门

2.1 JQuery对象

​ JQuery本质上也是JS，是对JS的封装。在使用JQuery的时候要注意JS对象的属性跟方法要用在JS对象上，JQuery的属性跟方法要用在JQuery对象上。

声明JQuery对象的变量我们一般用$开头，是一种公认的命名约定，如：

var $obj ; 

​ JQuery使用的公式：$(selector).action([参数])。selector为选择器，action为JQuery对象的方法。

var $obj = $('#my_div');
//它等效于下面的代码
var obj = document.getElementById("my_div");

2.2 JQuery与JS对象转换

​ JQuery对象全部是数组。

• JQuery对象转JS对象

  var obj = $('#my_div')[0]; // 方式1 ，[0]为索引
  var obj2 = $('#my_div').get(0); // 方式2，(0)为索引
  

• JS对象转JQuery对象

  var obj = document.getElementById("my_div");//js对象
  var $obj = $(obj);
  

2.3 页面载入

​ 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。相当于JS中的onLoad。JQuery是通过ready(fn)实现。

$(document).ready(function(){
  // 在这里写你的代码...
});

我们可以继续简写如下：

$(function() {
  // 在这里写你的代码...
});

3 选择器

3.1 基本选择器【重点】

• ID选择器

  $('#id');
  

• 元素选择器

  $("h1");
  

• 类选择器

  $(".class");
  

• 通配符选贼器

  $("*");
  

  群组选择器

  $("#id,span,div");
  

3.2 层级选择器【重点】

• 后代选择器

  $("div b") // 选择div元素内部的所有b元素 
  

• 子选择器

  $("div>b") // 选择div元素内部的所有b子元素（b是div的直接儿子）
  

• 下一个兄弟选择器

  $("div+b") // 匹配所有紧接在div元素后的b元素
  

• 后面兄弟选择器

  $("div~b") // 匹配所有在div元素后的所有b元素
  

3.3 基本筛选器

• :first

  $('h1:first'); //获取第1个元素。 
  

• :last

  $('li:last'); //获取匹配的最后个元素
  

• :not

  $("h1:not(#my_h1)"); // 获取所有的h1, id为my_h1的h1除外
  

• :even

  $("tr:even"); // 匹配所有索引值为偶数的元素，从 0 开始计数
  

• :odd

  $("tr:odd") ; //匹配所有索引值为奇数的元素，从 0 开始计数
  

• :eq

  $("tr:eq(1)"); // 匹配一个给定索引值的元素,返回的仍然是JQuery对象
  

• :gt

  $("tr:gt(0)"); // 匹配所有大于给定索引值的元素
  

• :lt

  $("tr:lt(2)"); // 匹配所有小于给定索引值的元素
  

3.4 子元素选择器

• :first-child

  $("ul li:first-child");//匹配所给选择器的第一个子元素
  

  类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

• :last-child

  $("li:last-child");//匹配最后一个子元素
  

  :last只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素

• nth-child

  $("ul li:nth-child(3)"); //匹配其父元素下的第3个子元素,下标从1开始
  $("ul li:nth-child(n)"); //匹配其父元素下的第N个子元素(N分别把1、2、3……带入)
  $("ul li:nth-child(2n)"); //匹配其父元素下的第2N个子元素(N分别把1、2、3……带入)
  $("ul li:nth-child(odd)"); //匹配其父元素下的奇数个子元素(相当于2n+1)
  $("ul li:nth-child(even)"); //匹配其父元素下的偶数个子元素(相当于2n)
  

  nth-child索引下标从1开始。

3.5 属性过滤器

• [attribute]

  $("div[id]"); //匹配有id属性的div元素。
  

• [attribute=value]

  $("input[name='seven']");//匹配有name属性且属性值为seven的input元素
  

• [attribute!=value]

  $("input[name!='seven']");//匹配有name属性且属性值不为seven的input元素
  

• [attribute^=value]

  $("input[name^='s']");//匹配给定的属性是以某些值开始的元素
  

• [attribute$=value]

  $("input[name$='s']");//匹配给定的属性是以某些值结尾的元素
  

• [attribute*=value]

  $("input[name*='s']");//匹配给定的属性是以包含某些值的元素
  

• [attr1][attr2]…[attrSelN]

  $("input[id][name$='man']");//匹配有id属性，且name属性值以man结尾的input元素
  

  复合属性选择器，需要同时满足多个条件时使用。

3.6 表单选择器

• :input

  $(":input"); // 匹配所有 input, textarea, select 和 button 元素
  

• :text

  $(":text");//匹配所有的单行文本框
  

• :password

  $(":password");//匹配所有密码框
  

• :radio

  $(":radio");//匹配所有单选按钮
  

• :checkbox

  $(":checkbox");//匹配所有复选框
  

• :submit

  $(":submit");//匹配所有提交按钮
  

• :image

  $(":image");//匹配所有图像域
  

• :reset

  $(":reset");//匹配所有重置按钮
  

• :button

  $(":button");//匹配所有按钮
  

• :file

  $(":file");//匹配所有文件域
  

• :hidden

  $(":hidden");//匹配所有不可见元素，包括display为none 或者 type为hidden的input元素。
  

3.7 表单属性过滤选择器

• :enabled

  $("input:enabled");//匹配所有可用元素,默认都是enabled
  

• :disabled

  $("input:disabled");//匹配所有不可用元素
  

• :checked

  $("input:checked");//匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元					素来说，获取选中推荐使用 :selected
  

• :selected

  $("select option:selected");//匹配所选中的option元素
  

4 文档操作

4.1 JQuery对象的遍历

• each(callback)

  // index表示索引，element表示对应的dom对象
  $("h1").each(function(index,element){
  					 
      if(index == 3){
          return true ;// 返回true表示跳过继续下次循环，返回false表示停止循环
      }
  
      console.log(index+"<-->"+element.innerText);
  });
  

  • 以每一个匹配的元素作为上下文来执行一个函数。
  • 函数的第1个参数表示索引，以0开始。
  • 函数的第2个参数表示对应dom对象。
  • 函数中返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

4.2 内容操作

• html()

  $("h1").html();// html()方法来获取第1个匹配元素的内容，包括html标签。
  $("h1").html("<em> Hello world</em>");// 带参数用来设置所有匹配元素的内容，包括html标签。
  

• text()

  $("h1").text();// 获取所有匹配元素的文本内容，不包括html标签。
  $("h1").text("Hello world!");// 设置所有匹配元素的文本内容
  

• val()

  $("input:text").val();// 获得第一个匹配元素的当前val值。
  $("input:text").val("seven");// 设置所有匹配元素的当前val值。
  

4.3 筛选

• eq(index)

  $("h1").eq(1);// 返回满足条件的第2个对象，索引从0开始
  $("h1").eq(-2);// 返回满足条件的倒数第2个对象
  

  • eq()返回的是JQuery对象。
  • 参数为正数表示从头开始计算。
  • 参数为负数表示从后开始计算。

• first()

  $('li').first();//获取第一个元素
  

• last()

  $('li').last();//获取匹配的最后个元素
  

• hasClass(class)

  $("h1").hasClass("hello");// 判断所有h1的对象中，是否有class属性值为hello的，结果是个boolean
  

• is([expr])

  $("h1").is("#my_h1");// 检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
  

• children([expr])

  $("div").children();//取得所有div的孩子集合
  $("div").children(".hello"); // 取得所有div的class属性值为hello的孩子集合
  

  • 必须是直接子元素，不能隔代。

• find([expr])

  $("div").find(".hello");// 取得所有div的class属性值为hello的后代集合
  

  • 可以隔代。

• parent([expr])

  $("h1").parent();// 获得所有h1标签的父元素。
  $("h1").parent("#my_div");// 获取所有id值为my_div的父元素
  

  • 不能隔代

• parents([expr])

  $("h1").parents();// 获取所有h1标签的祖宗元素，直到html元素
  $("h1").parents("#my_div");// 获取所有h1标签的id属性值为my_div的祖宗元素
  

• siblings([expr])

  $("h1").siblings();//获取h1所有的同辈元素
  $("h1").siblings(".hello");//获取h1所有class属性值为hello的同辈元素
  

4.4 文档处理

• 创建JQuery对象

$("<h1>"); // 创建一个h1标签，相当于 document.createElement("h1");

$("<h1>",{"id":"my_h1","class":"h1_class"});// 创建一个h1标签，并设置id跟class属性

• append()

  $("p").append("<b>Hello</b>");// 向每个匹配的元素内部追加内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven";
  $("div").append(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven');
  $("#div").append($d2);
  

  • 添加的内容可以是html代码，也可以是dom对象，也可以是JQuery对象。

• appendTo()

  $("<b>Hello</b>").append("p");// 把内容追加到每个匹配的元素。
  

  • appendTo用法同append，只是位置换了下。

• prepend()

  $("p").prepend("<b>Hello</b>");// 向每个匹配的元素内部前置内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven";
  $("div").prepend(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven');
  $("#div").prepend($d2);
  

• prependTo()

  $("<b>Hello</b>").prependTo("p");// 把内容前置到每个匹配的元素。
  

  • prependTo用法同prepend，只是位置换了下。

• after()

  $("p").after("<b>Hello</b>");//在每个匹配的元素之后插入内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven1";
  $("#h").after(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven2');
  $("#h").after($d2);
  

• before()

  $("p").before("<b>Hello</b>");//在每个匹配的元素之前插入内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven1";
  $("#h").before(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven2');
  $("#h").before($d2);
  

• replaceWith

  $("p").replaceWith("<b>seven.</b>");// 把所有的匹配p元素替换成参数的内容。
  

• empty()

  $("div").empty();// 把所有的div标签的内容都清除
  

• remove()

  $("h1").remove();// 把所有满足条件的h1标签删除
  $("h1").remove(".hello");// 把所有满足条件的class属性值为hello的h1元素删除
  

• clone()

  $("h1").clone();// 克隆匹配的DOM元素并且选中这些克隆的副本。
  

5. 属性

• attr

  $("img").attr("src");// 获取匹配的第1个src属性，如果没有这个属性返回undefined
  $('img').attr("src","img/1.png");// 为所有匹配的元素设置一个属性
  $('img').attr( {"src":"img/1.png","id":"my_img"} );// 为所有匹配的元素设置一组属性
  

• removeAttr

  $("img").removeAttr("src"); //删除匹配的所有src属性
  

• prop

  $("img").prop("src");// 获取匹配的第1个src属性，如果没有这个属性返回undefined
  $('img').prop("src","img/1.png");// 为所有匹配的元素设置一个属性
  $('img').prop( {"src":"img/1.png","id":"my_img"} );// 为所有匹配的元素设置一组属性
  

• removeProp

  $("div").removeProp("color");//删除匹配的所有color属性
  

• attr/removeAttr 同prop/removeProp的区别？

  • 在获取radio跟checkbox的时候，attr返回的是checked跟undefined，而prop返回的是false跟true。
  • removeProp在删除某些属性的时候无效，比如src、id、style。
  • 是有true,false两个属性使用prop();（如’checked’,‘selected’,'disabled’等）
  • 其他则使用attr()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h4P7AvHz-1607610111838)(assets/27133706-97b155fb88b8449283c905efec6e7314.png)]

• addClass

  $('img').addClass("img_class");//为每个匹配的元素添加指定的类名。
  

• removeClass

  $('img').removeClass("img_class");//从所有匹配的元素中删除全部或者指定的类。
  

• toggleClass

  $('img').toggleClass("img_class");// 如果存在（不存在）就删除（添加）一个类。
  

6 CSS

• css

  $("p").css("color");//取得第一个段落的color样式属性的值。
  $("p").css("color","red");//将所有段落字体设为红色
  $('h1').css({"color":"blue","font-size":"30px"});// 设置一组CSS样式
  

• position/offset

  <div id="outer" style="width:500px;height:500px;position:relative;left:100px;">    
  
  	<div id="inner" style="position:absolute;left:50px;top:60px;">           
      </div>
  
  </div>
  

  //position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
  // 不包含自身的margin值 
  var vposition = $("#inner").position();
  console.log(vposition.left); //输出：50,不包含自身marign30px
  console.log(vposition.top); //输出：60,不包含自身marign30px
  
  //offset()始终返回相对于浏览器文档的距离。
  var voffset = $("#inner").offset();
  console.log(voffset.left);  //输出：$("#outer").offset().left+50+30,包含自身marign30px 
  console.log(voffset.top); //输出：$("#outer").offset().top+60+30,包含自身marign30px
  

• height()

  $("p").height();// 获取匹配的第1个元素的高度,不包括边框跟补白
  $("p").height(20);// 设置所有匹配元素的高度,不包括边框跟补白
  

• width()

  $("p").width();// 获取匹配的第1个元素的宽度,不包括边框跟补白
  $("p").width(20);// 设置所有匹配元素的宽度,不包括边框跟补白
  

• innerHeght/innerWidth

  $("h1").innerHeight();// 获取匹配的第1个元素的内部宽度,不包括边框 
  $("h1").innerWidth()// 获取匹配的第1个元素的内部宽度,不包括边框 
  

• outerHeight/outerWidth

  $("h1").outerHeight();// 获取匹配的第1个元素的内部宽度,包括边框跟补白
  $("h1").outerWidth()// 获取匹配的第1个元素的内部宽度,包括边框跟补白
  

7 事件

7.1 绑定事件

方式一 click( [ [data] ,fn ] )

​ 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。一个对象可以绑定多个事件。

• **data **: 可传入data供函数fn处理。

• **fn **: 在每一个匹配元素的click事件中绑定的处理函数。

  $("p").click();// 无参数
  
  $("p").click( function () { $(this).hide(); }); // 只有回调函数
  
  $("h1").each(function(i){
  					
      // 既有参数，也有回调函数，参数通过event.data访问
      $(this).click( {x:i} ,function(event){
          console.log(event.data.x);
      });
  })
  

  • 一个对象可以绑定多个事件，触发后依次执行。

方式二 on( eve , [sel] , [data] , fn)

在选择元素上绑定一个或多个事件的事件处理函数。

• **events **:一个或多个用空格分隔的事件类型和可选的命名空间，如"click" 。

• **selector **:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。通过后代过滤而不是自身。

• **data **: 当一个事件被触发时要传递event.data给事件处理函数。用法同上。

• **fn **: 该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

$("h1").on("click mouseover",function(){
    console.log(" h1 ");
});

$("form").on("submit", false)；

但是这种用法当我们对于绑定事件之后追加的满足条件的对象就没有事件绑定了。比如：

<div >				
    <h1 >第1段标题</h1>
    <h1 >第2段标题</h1>
    <h1 >第3段标题</h1>
    <h1 >第4段标题</h1>
</div>

$("div").on("click",  function(){
    console.log(" h1 click ");
});
// 对于后面追加的h1就不能触发上面绑定的事件了
$("div").append("<h1 >第5段标题</h1>"); 

​ 对于后面追加的h1就不能触发上面绑定的事件了，要解决这个问题可以使用第2个参数selector。触发事件的对象为这个selector对应的对象。如下：

$("div").on("click", "h1",  function(){
    console.log(" h1 ");
});
//对于后面追加的h1同样可以触发上面绑定的函数
$("div").append("<h1 ><span>第5段标题</span></h1>"); 

​ 其实是通过on的这种方式取代了以前的live的效果，live在1.7版本的已经删除了。

方式三 one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){
  alert( $(this).text() );
});

7.2 解绑事件

off( eve , [sel] , [fn] )

$("p").off();// 移除p上面所有的事件

$("p").off("click");// 移除p上面所有的click事件

$("body").off("click", "p");//移除所有P上面的click事件。

​ 如果我们绑定事件的selector跟解绑的selector不一样的话，即使他们得到是相同的对象也不能正确解绑

// 通过class值为h的方式绑定click事件
$("div").on("click", ".h",  function(){
    console.log(" h1 ");
});

// 即使h1标签选中的结果有click事件也无法解绑，因为跟绑定的selector不一致。
$("div").off("click", "h1");

// 可以把class值为h的结果上的click事件解绑，因为跟绑定的selector一致。
$("div").off("click", ".h");

8 效果

8.1 基本

• show ( [ speed , [easing] , [fn] ] )

  显示隐藏的匹配元素。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear
  • fn:在动画完成时执行的函数，每个元素执行一次。

  <p style="display: none">Hello</p>
  

  $("p").show();
  
  $("p").show("slow");
  
  $("p").show(4000,function(){
     $(this).text("Animation Done...");
   });
  

• hide ( [ speed , [easing] , [fn] ] )

  隐藏可见的匹配元素。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    <p >Hello</p>
    

    $("p").hide();
    
    $("p").hide("slow");
    
    $("p").hide(4000,function(){
       alert("Animation Done.");
     });
    

• toggle ( [ speed , [easing] , [fn] ] )

  如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").toggle("slow");
    
    $("h1,img").toggle( 4000 , function(){
        console.log("Animation Done.");
    });
    

8.2 淡入淡出

• fadeIn ( [ speed , [easing] , [fn] ] )

  通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeIn("slow");
    
     ("p").fadeIn(3000,function(){
       alert("Animation Done.");
     });
    

• fadeOut ( [ speed , [easing] , [fn] ] )

  通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeOut("slow");
    
    ("p").fadeOut(3000,function(){
       alert("Animation Done.");
     });
    

• fadeTo( [ [speed ] , opacity , [easing] , [fn] ] )

  所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

  • speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • opacity: 一个0至1之间表示透明度的数字。

  • easing: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

  • fn: 在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeTo("slow",0.5);
    
    ("p").fadeTo(3000, 0.5 , function(){
       alert("Animation Done.");
     });
    

• fadeToggle ( [ speed , [easing] , [fn] ] )

  通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeToggle("slow");
    
    ("p").fadeToggle(3000,function(){
       alert("Animation Done.");
     });
    

8.3 自定义

• animate ( params , [ speed , [easing] , [fn] ] )

  用于创建自定义动画的函数。

  • **params ** : 一组包含作为动画属性和终值的样式属性和及其值的集合。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。

  • speed : 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • **easing ** : 用来指定切换效果，默认是swing，可用参数linear

  • fn : 在动画完成时执行的函数，每个元素执行一次。

    h1{
        border: 1px solid red;
    } 
    

    <h1 class="h">第1段标题</h1>
    <h1 class="h">第2段标题</h1>
    

    $("h1").animate({ 
        width: "50%", //width变为原来的50%
        height: "200px", // 高度变为200px
        fontSize: "3em", // 字体大小变为3em
        borderWidth: 10   // 边框宽度变为10，名字要使用驼峰
    }, 2000 );
    

9 插件

​ 插件: 实现了指定功能的代码片段。如果我们使用某个JQuery的插件的话，除了引用JQuery以外还需要引入这个插件。这里我们以表单的校验插件jquery-validation为例。

​ 官网： https://jqueryvalidation.org/

​ 下载： https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.2

9.1 语法

$("form表单的选择器").validate({
    rules:{
        表单项name值:校验规则，
        表单项name值:校验规则... ...
    },
    messages:{
        表单项name值:错误提示信息，
        表单项name值:错误提示信息... ...
    }
});

参数说明：
	rules是对表单项校验的规则
    messages是对应的表单项校验失败后的错误提示信息
注意：
	当错误提示信息没有按照我们预想的位置显示时，我们可以设置自定义错误显示标签放在我们需要显示的位置。如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了
	
	<lable for="html元素name值" class="error" style="display:none">错误信息</lable>

9.2 常用的校验规则

校验器名称	值	描述
required	true	必须填写
number	true	只能输入数字
min	数字	最小值
max	数字	最大值
range	[min,max]	取值范围
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minlength,maxlength]	长度范围
equalTo	"#id"指定元素	跟指定元素的值相等(重复密码)
email	“email”	校验邮箱
date	true	校验日期
dateISO	true	校验日期格式xxxx-xx-xx xxxx/xx/xx

9.3 案例

默认规则跟提示

<form id="empForm"  >
		<table border="1" cellspacing="0"  width="800px" align="center"  >
			
			<tr>
				<td>真实姓名(不能为空)</td>
				<td><input type="text" name="realname" required="required" minlength="2" maxlength="6" />
				</td>
			</tr>
			 <tr>
			 	<td colspan="2" align="center"><input type="submit"  value="保存"></td>
			 </tr>
		</table>
	</form>

<script type="text/javascript">
	
	$(function(){
		
		$("#empForm").validate();
		
	})
</script>

 

这样的校验提示默认使用中文，如果需要国际化则需要把对应国家的message的JS文件引入。

<script src="js/jquery-3.4.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_cn.js"></script>

配置验证规则跟提示

<form   id="empForm"  >
		<table border="1" cellspacing="0"  width="800px" align="center"  >
			<tr>
				<td>真实姓名(不能为空)</td>
				<td><input type="text" name="realname" />
					<label for="realname" class="error" style="display:none;">用户名不能为空</label>
				</td>
			</tr>
			 <tr> 
		      <td>密码(不能为空,长度6-12位数字):</td>
		      <td><input type="password" id="psw"  name="psw" /></td>
		    </tr>
		    <tr> 
		      <td>重复密码密码(不能为空,长度6-12位数字):</td>
		      <td><input type="password" id="psw2" name="psw2" /></td>
		    </tr>
		     <tr>
		     	<td colspan="2" align="center"><input type="submit"  value="保存"></td>
		     </tr>
		</table>

</form>

<script type="text/javascript">
	
	$(function(){
		
		$("#empForm").validate();
		$("#empForm").validate({			
						rules:{
							realname:{
								required:true
								
							},
							psw:{
								required:true,
								number:true ,
								rangelength:[6,12]
							},
							psw2:{
								required:true,
								equalTo:"#psw",
								rangelength:[6,12]
							}						
						},
            			messages:{
							// 用户名的提示采用label的方式显示
			// 				realname:{
			// 					required:"用户名不能为空" 
			// 			    },
							psw:{
								required:"密码不能为空" ,
								number:"密码必须为数字",
								rangelength:"至少输入6个字符,但是不超过12个字符"
							},
							psw2:{
								required:"重复密码不能为空",
								equalTo:"2次密码输入不一致",
								rangelength:"至少输入6个字符,但是不超过12个字符"
							}
						} 
			
		});

自定义校验器

$.validator.addMethod('name',function(value,element,params){},'message');
参数说明：
	name:校验规则名称
    fn:校验规则
    	value：用户输入的值
        element：当前元素对象
        params：校验规则传递的参数
    message:不满足规则提示的信息

• 定义一个身份证号的校验规则

<form   id="empForm"  >
		<table border="1" cellspacing="0"  width="800px" align="center"  >
			
			<tr>
				<td>身份证号：</td>
				<td><input type="text" name="cardId"  />
				</td>
			</tr>
			 <tr>
			 	<td colspan="2" align="center"><input type="submit"  value="保存"></td>
			 </tr>
		</table>

	</form>

<script type="text/javascript">
	
	$(function(){
		
		$.validator.addMethod('checkCardId',function(value,element,params){
            //身份证号的正则
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
			return reg.test(value);
			
		},'输入不符合身份证格式');
		$("#empForm").validate({
			rules:{
				cardId:{
					required:true,
					checkCardId:true
				}
			}
			
			
		});
		
	})
</script>

1.2 导入

方式一 ： 离线版

<script src="js/jquery-3.4.1.js"></script>

方式二 ： 在线版（CDN）

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2 入门

2.1 JQuery对象

​ JQuery本质上也是JS，是对JS的封装。在使用JQuery的时候要注意JS对象的属性跟方法要用在JS对象上，JQuery的属性跟方法要用在JQuery对象上。

声明JQuery对象的变量我们一般用$开头，是一种公认的命名约定，如：

var $obj ; 

​ JQuery使用的公式：$(selector).action([参数])。selector为选择器，action为JQuery对象的方法。

var $obj = $('#my_div');
//它等效于下面的代码
var obj = document.getElementById("my_div");

2.2 JQuery与JS对象转换

​ JQuery对象全部是数组。

• JQuery对象转JS对象

  var obj = $('#my_div')[0]; // 方式1 ，[0]为索引
  var obj2 = $('#my_div').get(0); // 方式2，(0)为索引
  

• JS对象转JQuery对象

  var obj = document.getElementById("my_div");//js对象
  var $obj = $(obj);
  

2.3 页面载入

​ 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。相当于JS中的onLoad。JQuery是通过ready(fn)实现。

$(document).ready(function(){
  // 在这里写你的代码...
});

我们可以继续简写如下：

$(function() {
  // 在这里写你的代码...
});

3 选择器

3.1 基本选择器【重点】

• ID选择器

  $('#id');
  

• 元素选择器

  $("h1");
  

• 类选择器

  $(".class");
  

• 通配符选贼器

  $("*");
  

  群组选择器

  $("#id,span,div");
  

3.2 层级选择器【重点】

• 后代选择器

  $("div b") // 选择div元素内部的所有b元素 
  

• 子选择器

  $("div>b") // 选择div元素内部的所有b子元素（b是div的直接儿子）
  

• 下一个兄弟选择器

  $("div+b") // 匹配所有紧接在div元素后的b元素
  

• 后面兄弟选择器

  $("div~b") // 匹配所有在div元素后的所有b元素
  

3.3 基本筛选器

• :first

  $('h1:first'); //获取第1个元素。 
  

• :last

  $('li:last'); //获取匹配的最后个元素
  

• :not

  $("h1:not(#my_h1)"); // 获取所有的h1, id为my_h1的h1除外
  

• :even

  $("tr:even"); // 匹配所有索引值为偶数的元素，从 0 开始计数
  

• :odd

  $("tr:odd") ; //匹配所有索引值为奇数的元素，从 0 开始计数
  

• :eq

  $("tr:eq(1)"); // 匹配一个给定索引值的元素,返回的仍然是JQuery对象
  

• :gt

  $("tr:gt(0)"); // 匹配所有大于给定索引值的元素
  

• :lt

  $("tr:lt(2)"); // 匹配所有小于给定索引值的元素
  

3.4 子元素选择器

• :first-child

  $("ul li:first-child");//匹配所给选择器的第一个子元素
  

  类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

• :last-child

  $("li:last-child");//匹配最后一个子元素
  

  :last只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素

• nth-child

  $("ul li:nth-child(3)"); //匹配其父元素下的第3个子元素,下标从1开始
  $("ul li:nth-child(n)"); //匹配其父元素下的第N个子元素(N分别把1、2、3……带入)
  $("ul li:nth-child(2n)"); //匹配其父元素下的第2N个子元素(N分别把1、2、3……带入)
  $("ul li:nth-child(odd)"); //匹配其父元素下的奇数个子元素(相当于2n+1)
  $("ul li:nth-child(even)"); //匹配其父元素下的偶数个子元素(相当于2n)
  

  nth-child索引下标从1开始。

3.5 属性过滤器

• [attribute]

  $("div[id]"); //匹配有id属性的div元素。
  

• [attribute=value]

  $("input[name='seven']");//匹配有name属性且属性值为seven的input元素
  

• [attribute!=value]

  $("input[name!='seven']");//匹配有name属性且属性值不为seven的input元素
  

• [attribute^=value]

  $("input[name^='s']");//匹配给定的属性是以某些值开始的元素
  

• [attribute$=value]

  $("input[name$='s']");//匹配给定的属性是以某些值结尾的元素
  

• [attribute*=value]

  $("input[name*='s']");//匹配给定的属性是以包含某些值的元素
  

• [attr1][attr2]…[attrSelN]

  $("input[id][name$='man']");//匹配有id属性，且name属性值以man结尾的input元素
  

  复合属性选择器，需要同时满足多个条件时使用。

3.6 表单选择器

• :input

  $(":input"); // 匹配所有 input, textarea, select 和 button 元素
  

• :text

  $(":text");//匹配所有的单行文本框
  

• :password

  $(":password");//匹配所有密码框
  

• :radio

  $(":radio");//匹配所有单选按钮
  

• :checkbox

  $(":checkbox");//匹配所有复选框
  

• :submit

  $(":submit");//匹配所有提交按钮
  

• :image

  $(":image");//匹配所有图像域
  

• :reset

  $(":reset");//匹配所有重置按钮
  

• :button

  $(":button");//匹配所有按钮
  

• :file

  $(":file");//匹配所有文件域
  

• :hidden

  $(":hidden");//匹配所有不可见元素，包括display为none 或者 type为hidden的input元素。
  

3.7 表单属性过滤选择器

• :enabled

  $("input:enabled");//匹配所有可用元素,默认都是enabled
  

• :disabled

  $("input:disabled");//匹配所有不可用元素
  

• :checked

  $("input:checked");//匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元					素来说，获取选中推荐使用 :selected
  

• :selected

  $("select option:selected");//匹配所选中的option元素
  

4 文档操作

4.1 JQuery对象的遍历

• each(callback)

  // index表示索引，element表示对应的dom对象
  $("h1").each(function(index,element){
  					 
      if(index == 3){
          return true ;// 返回true表示跳过继续下次循环，返回false表示停止循环
      }
  
      console.log(index+"<-->"+element.innerText);
  });
  

  • 以每一个匹配的元素作为上下文来执行一个函数。
  • 函数的第1个参数表示索引，以0开始。
  • 函数的第2个参数表示对应dom对象。
  • 函数中返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。

4.2 内容操作

• html()

  $("h1").html();// html()方法来获取第1个匹配元素的内容，包括html标签。
  $("h1").html("<em> Hello world</em>");// 带参数用来设置所有匹配元素的内容，包括html标签。
  

• text()

  $("h1").text();// 获取所有匹配元素的文本内容，不包括html标签。
  $("h1").text("Hello world!");// 设置所有匹配元素的文本内容
  

• val()

  $("input:text").val();// 获得第一个匹配元素的当前val值。
  $("input:text").val("seven");// 设置所有匹配元素的当前val值。
  

4.3 筛选

• eq(index)

  $("h1").eq(1);// 返回满足条件的第2个对象，索引从0开始
  $("h1").eq(-2);// 返回满足条件的倒数第2个对象
  

  • eq()返回的是JQuery对象。
  • 参数为正数表示从头开始计算。
  • 参数为负数表示从后开始计算。

• first()

  $('li').first();//获取第一个元素
  

• last()

  $('li').last();//获取匹配的最后个元素
  

• hasClass(class)

  $("h1").hasClass("hello");// 判断所有h1的对象中，是否有class属性值为hello的，结果是个boolean
  

• is([expr])

  $("h1").is("#my_h1");// 检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
  

• children([expr])

  $("div").children();//取得所有div的孩子集合
  $("div").children(".hello"); // 取得所有div的class属性值为hello的孩子集合
  

  • 必须是直接子元素，不能隔代。

• find([expr])

  $("div").find(".hello");// 取得所有div的class属性值为hello的后代集合
  

  • 可以隔代。

• parent([expr])

  $("h1").parent();// 获得所有h1标签的父元素。
  $("h1").parent("#my_div");// 获取所有id值为my_div的父元素
  

  • 不能隔代

• parents([expr])

  $("h1").parents();// 获取所有h1标签的祖宗元素，直到html元素
  $("h1").parents("#my_div");// 获取所有h1标签的id属性值为my_div的祖宗元素
  

• siblings([expr])

  $("h1").siblings();//获取h1所有的同辈元素
  $("h1").siblings(".hello");//获取h1所有class属性值为hello的同辈元素
  

4.4 文档处理

• 创建JQuery对象

$("<h1>"); // 创建一个h1标签，相当于 document.createElement("h1");

$("<h1>",{"id":"my_h1","class":"h1_class"});// 创建一个h1标签，并设置id跟class属性

• append()

  $("p").append("<b>Hello</b>");// 向每个匹配的元素内部追加内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven";
  $("div").append(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven');
  $("#div").append($d2);
  

  • 添加的内容可以是html代码，也可以是dom对象，也可以是JQuery对象。

• appendTo()

  $("<b>Hello</b>").append("p");// 把内容追加到每个匹配的元素。
  

  • appendTo用法同append，只是位置换了下。

• prepend()

  $("p").prepend("<b>Hello</b>");// 向每个匹配的元素内部前置内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven";
  $("div").prepend(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven');
  $("#div").prepend($d2);
  

• prependTo()

  $("<b>Hello</b>").prependTo("p");// 把内容前置到每个匹配的元素。
  

  • prependTo用法同prepend，只是位置换了下。

• after()

  $("p").after("<b>Hello</b>");//在每个匹配的元素之后插入内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven1";
  $("#h").after(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven2');
  $("#h").after($d2);
  

• before()

  $("p").before("<b>Hello</b>");//在每个匹配的元素之前插入内容。
  
  // 添加dom对象
  var d1 = document.createElement("h1");
  v.innerText = "seven1";
  $("#h").before(d1);
  
  // 添加jquery对象
  var $d2 = $('<h1>').text('seven2');
  $("#h").before($d2);
  

• replaceWith

  $("p").replaceWith("<b>seven.</b>");// 把所有的匹配p元素替换成参数的内容。
  

• empty()

  $("div").empty();// 把所有的div标签的内容都清除
  

• remove()

  $("h1").remove();// 把所有满足条件的h1标签删除
  $("h1").remove(".hello");// 把所有满足条件的class属性值为hello的h1元素删除
  

• clone()

  $("h1").clone();// 克隆匹配的DOM元素并且选中这些克隆的副本。
  

5. 属性

• attr

  $("img").attr("src");// 获取匹配的第1个src属性，如果没有这个属性返回undefined
  $('img').attr("src","img/1.png");// 为所有匹配的元素设置一个属性
  $('img').attr( {"src":"img/1.png","id":"my_img"} );// 为所有匹配的元素设置一组属性
  

• removeAttr

  $("img").removeAttr("src"); //删除匹配的所有src属性
  

• prop

  $("img").prop("src");// 获取匹配的第1个src属性，如果没有这个属性返回undefined
  $('img').prop("src","img/1.png");// 为所有匹配的元素设置一个属性
  $('img').prop( {"src":"img/1.png","id":"my_img"} );// 为所有匹配的元素设置一组属性
  

• removeProp

  $("div").removeProp("color");//删除匹配的所有color属性
  

• attr/removeAttr 同prop/removeProp的区别？

  • 在获取radio跟checkbox的时候，attr返回的是checked跟undefined，而prop返回的是false跟true。
  • removeProp在删除某些属性的时候无效，比如src、id、style。
  • 是有true,false两个属性使用prop();（如’checked’,‘selected’,'disabled’等）
  • 其他则使用attr()

• addClass

  $('img').addClass("img_class");//为每个匹配的元素添加指定的类名。
  

• removeClass

  $('img').removeClass("img_class");//从所有匹配的元素中删除全部或者指定的类。
  

• toggleClass

  $('img').toggleClass("img_class");// 如果存在（不存在）就删除（添加）一个类。
  

6 CSS

• css

  $("p").css("color");//取得第一个段落的color样式属性的值。
  $("p").css("color","red");//将所有段落字体设为红色
  $('h1').css({"color":"blue","font-size":"30px"});// 设置一组CSS样式
  

• position/offset

  <div id="outer" style="width:500px;height:500px;position:relative;left:100px;">    
  
  	<div id="inner" style="position:absolute;left:50px;top:60px;">           
      </div>
  
  </div>
  

  //position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
  // 不包含自身的margin值 
  var vposition = $("#inner").position();
  console.log(vposition.left); //输出：50,不包含自身marign30px
  console.log(vposition.top); //输出：60,不包含自身marign30px
  
  //offset()始终返回相对于浏览器文档的距离。
  var voffset = $("#inner").offset();
  console.log(voffset.left);  //输出：$("#outer").offset().left+50+30,包含自身marign30px 
  console.log(voffset.top); //输出：$("#outer").offset().top+60+30,包含自身marign30px
  

• height()

  $("p").height();// 获取匹配的第1个元素的高度,不包括边框跟补白
  $("p").height(20);// 设置所有匹配元素的高度,不包括边框跟补白
  

• width()

  $("p").width();// 获取匹配的第1个元素的宽度,不包括边框跟补白
  $("p").width(20);// 设置所有匹配元素的宽度,不包括边框跟补白
  

• innerHeght/innerWidth

  $("h1").innerHeight();// 获取匹配的第1个元素的内部宽度,不包括边框 
  $("h1").innerWidth()// 获取匹配的第1个元素的内部宽度,不包括边框 
  

• outerHeight/outerWidth

  $("h1").outerHeight();// 获取匹配的第1个元素的内部宽度,包括边框跟补白
  $("h1").outerWidth()// 获取匹配的第1个元素的内部宽度,包括边框跟补白
  

7 事件

7.1 绑定事件

方式一 click( [ [data] ,fn ] )

​ 触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。一个对象可以绑定多个事件。

• **data **: 可传入data供函数fn处理。

• **fn **: 在每一个匹配元素的click事件中绑定的处理函数。

  $("p").click();// 无参数
  
  $("p").click( function () { $(this).hide(); }); // 只有回调函数
  
  $("h1").each(function(i){
  					
      // 既有参数，也有回调函数，参数通过event.data访问
      $(this).click( {x:i} ,function(event){
          console.log(event.data.x);
      });
  })
  

  • 一个对象可以绑定多个事件，触发后依次执行。

方式二 on( eve , [sel] , [data] , fn)

在选择元素上绑定一个或多个事件的事件处理函数。

• **events **:一个或多个用空格分隔的事件类型和可选的命名空间，如"click" 。

• **selector **:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。通过后代过滤而不是自身。

• **data **: 当一个事件被触发时要传递event.data给事件处理函数。用法同上。

• **fn **: 该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

$("h1").on("click mouseover",function(){
    console.log(" h1 ");
});

$("form").on("submit", false)；

但是这种用法当我们对于绑定事件之后追加的满足条件的对象就没有事件绑定了。比如：

<div >				
    <h1 >第1段标题</h1>
    <h1 >第2段标题</h1>
    <h1 >第3段标题</h1>
    <h1 >第4段标题</h1>
</div>

$("div").on("click",  function(){
    console.log(" h1 click ");
});
// 对于后面追加的h1就不能触发上面绑定的事件了
$("div").append("<h1 >第5段标题</h1>"); 

​ 对于后面追加的h1就不能触发上面绑定的事件了，要解决这个问题可以使用第2个参数selector。触发事件的对象为这个selector对应的对象。如下：

$("div").on("click", "h1",  function(){
    console.log(" h1 ");
});
//对于后面追加的h1同样可以触发上面绑定的函数
$("div").append("<h1 ><span>第5段标题</span></h1>"); 

​ 其实是通过on的这种方式取代了以前的live的效果，live在1.7版本的已经删除了。

方式三 one(type,[data],fn)

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){
  alert( $(this).text() );
});

7.2 解绑事件

off( eve , [sel] , [fn] )

$("p").off();// 移除p上面所有的事件

$("p").off("click");// 移除p上面所有的click事件

$("body").off("click", "p");//移除所有P上面的click事件。

​ 如果我们绑定事件的selector跟解绑的selector不一样的话，即使他们得到是相同的对象也不能正确解绑

// 通过class值为h的方式绑定click事件
$("div").on("click", ".h",  function(){
    console.log(" h1 ");
});

// 即使h1标签选中的结果有click事件也无法解绑，因为跟绑定的selector不一致。
$("div").off("click", "h1");

// 可以把class值为h的结果上的click事件解绑，因为跟绑定的selector一致。
$("div").off("click", ".h");

8 效果

8.1 基本

• show ( [ speed , [easing] , [fn] ] )

  显示隐藏的匹配元素。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear
  • fn:在动画完成时执行的函数，每个元素执行一次。

  <p style="display: none">Hello</p>
  

  $("p").show();
  
  $("p").show("slow");
  
  $("p").show(4000,function(){
     $(this).text("Animation Done...");
   });
  

• hide ( [ speed , [easing] , [fn] ] )

  隐藏可见的匹配元素。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    <p >Hello</p>
    

    $("p").hide();
    
    $("p").hide("slow");
    
    $("p").hide(4000,function(){
       alert("Animation Done.");
     });
    

• toggle ( [ speed , [easing] , [fn] ] )

  如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").toggle("slow");
    
    $("h1,img").toggle( 4000 , function(){
        console.log("Animation Done.");
    });
    

8.2 淡入淡出

• fadeIn ( [ speed , [easing] , [fn] ] )

  通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeIn("slow");
    
     ("p").fadeIn(3000,function(){
       alert("Animation Done.");
     });
    

• fadeOut ( [ speed , [easing] , [fn] ] )

  通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeOut("slow");
    
    ("p").fadeOut(3000,function(){
       alert("Animation Done.");
     });
    

• fadeTo( [ [speed ] , opacity , [easing] , [fn] ] )

  所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

  • speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • opacity: 一个0至1之间表示透明度的数字。

  • easing: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

  • fn: 在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeTo("slow",0.5);
    
    ("p").fadeTo(3000, 0.5 , function(){
       alert("Animation Done.");
     });
    

• fadeToggle ( [ speed , [easing] , [fn] ] )

  通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear

  • fn:在动画完成时执行的函数，每个元素执行一次。

    $("p").fadeToggle("slow");
    
    ("p").fadeToggle(3000,function(){
       alert("Animation Done.");
     });
    

8.3 自定义

• animate ( params , [ speed , [easing] , [fn] ] )

  用于创建自定义动画的函数。

  • **params ** : 一组包含作为动画属性和终值的样式属性和及其值的集合。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。

  • speed : 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

  • **easing ** : 用来指定切换效果，默认是swing，可用参数linear

  • fn : 在动画完成时执行的函数，每个元素执行一次。

    h1{
        border: 1px solid red;
    } 
    

    <h1 class="h">第1段标题</h1>
    <h1 class="h">第2段标题</h1>
    

    $("h1").animate({ 
        width: "50%", //width变为原来的50%
        height: "200px", // 高度变为200px
        fontSize: "3em", // 字体大小变为3em
        borderWidth: 10   // 边框宽度变为10，名字要使用驼峰
    }, 2000 );
    

9 插件

​ 插件: 实现了指定功能的代码片段。如果我们使用某个JQuery的插件的话，除了引用JQuery以外还需要引入这个插件。这里我们以表单的校验插件jquery-validation为例。

​ 官网： https://jqueryvalidation.org/

​ 下载： https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.2

9.1 语法

$("form表单的选择器").validate({
    rules:{
        表单项name值:校验规则，
        表单项name值:校验规则... ...
    },
    messages:{
        表单项name值:错误提示信息，
        表单项name值:错误提示信息... ...
    }
});

参数说明：
	rules是对表单项校验的规则
    messages是对应的表单项校验失败后的错误提示信息
注意：
	当错误提示信息没有按照我们预想的位置显示时，我们可以设置自定义错误显示标签放在我们需要显示的位置。如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了
	
	<lable for="html元素name值" class="error" style="display:none">错误信息</lable>

9.2 常用的校验规则

校验器名称	值	描述
required	true	必须填写
number	true	只能输入数字
min	数字	最小值
max	数字	最大值
range	[min,max]	取值范围
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minlength,maxlength]	长度范围
equalTo	"#id"指定元素	跟指定元素的值相等(重复密码)
email	“email”	校验邮箱
date	true	校验日期
dateISO	true	校验日期格式xxxx-xx-xx xxxx/xx/xx

9.3 案例

默认规则跟提示

<form id="empForm"  >
		<table border="1" cellspacing="0"  width="800px" align="center"  >
			
			<tr>
				<td>真实姓名(不能为空)</td>
				<td><input type="text" name="realname" required="required" minlength="2" maxlength="6" />
				</td>
			</tr>
			 <tr>
			 	<td colspan="2" align="center"><input type="submit"  value="保存"></td>
			 </tr>
		</table>
	</form>

<script type="text/javascript">
	
	$(function(){
		
		$("#empForm").validate();
		
	})
</script>

 

这样的校验提示默认使用中文，如果需要国际化则需要把对应国家的message的JS文件引入。

<script src="js/jquery-3.4.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_cn.js"></script>

配置验证规则跟提示

<form   id="empForm"  >
		<table border="1" cellspacing="0"  width="800px" align="center"  >
			<tr>
				<td>真实姓名(不能为空)</td>
				<td><input type="text" name="realname" />
					<label for="realname" class="error" style="display:none;">用户名不能为空</label>
				</td>
			</tr>
			 <tr> 
		      <td>密码(不能为空,长度6-12位数字):</td>
		      <td><input type="password" id="psw"  name="psw" /></td>
		    </tr>
		    <tr> 
		      <td>重复密码密码(不能为空,长度6-12位数字):</td>
		      <td><input type="password" id="psw2" name="psw2" /></td>
		    </tr>
		     <tr>
		     	<td colspan="2" align="center"><input type="submit"  value="保存"></td>
		     </tr>
		</table>

</form>

<script type="text/javascript">
	
	$(function(){
		
		$("#empForm").validate();
		$("#empForm").validate({			
						rules:{
							realname:{
								required:true
								
							},
							psw:{
								required:true,
								number:true ,
								rangelength:[6,12]
							},
							psw2:{
								required:true,
								equalTo:"#psw",
								rangelength:[6,12]
							}						
						},
            			messages:{
							// 用户名的提示采用label的方式显示
			// 				realname:{
			// 					required:"用户名不能为空" 
			// 			    },
							psw:{
								required:"密码不能为空" ,
								number:"密码必须为数字",
								rangelength:"至少输入6个字符,但是不超过12个字符"
							},
							psw2:{
								required:"重复密码不能为空",
								equalTo:"2次密码输入不一致",
								rangelength:"至少输入6个字符,但是不超过12个字符"
							}
						} 
			
		});

自定义校验器

$.validator.addMethod('name',function(value,element,params){},'message');
参数说明：
	name:校验规则名称
    fn:校验规则
    	value：用户输入的值
        element：当前元素对象
        params：校验规则传递的参数
    message:不满足规则提示的信息

• 定义一个身份证号的校验规则

<form   id="empForm"  >
		<table border="1" cellspacing="0"  width="800px" align="center"  >
			
			<tr>
				<td>身份证号：</td>
				<td><input type="text" name="cardId"  />
				</td>
			</tr>
			 <tr>
			 	<td colspan="2" align="center"><input type="submit"  value="保存"></td>
			 </tr>
		</table>

	</form>

<script type="text/javascript">
	
	$(function(){
		
		$.validator.addMethod('checkCardId',function(value,element,params){
            //身份证号的正则
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
			return reg.test(value);
			
		},'输入不符合身份证格式');
		$("#empForm").validate({
			rules:{
				cardId:{
					required:true,
					checkCardId:true
				}
			}
			
			
		});
		
	})
</script>