jQuery

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它通过可在多种浏览器上运行的易于使用的 API，使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单。凭借多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

Reference：尚硅谷jQuery教程

Website：jQuery

1 jQuery介绍

1.1 概述

概述
- jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。
作用
- jQuery最主要的作用是简化js的Dom树的操作

1.2 下载与引入

1.2.1 官方下载

jQuery的官方下载地址：jQuery

1.2.2 版本

1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本
开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。

1.2.3 引入

在需要使用jQuery的html中使用js的引入方式进行引入，如下：

1 2	<script type="text/javascript" src="jquery-x.x.x.js></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>

1.2.4 引入测试

$(function(){ 代码 })
- 是指 $(document).ready(function(){}) 的简写
- 用来在DOM加载完成之后执行一系列预先定义好的函数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>01_jQuery引入</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript">
      $(function () {
        alert("hello world");
      });
    </script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

1.3 jQuery对象与js对象之间的转换

1.3.1 转换关系

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象，而不是js方式获得的DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换。

使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下：

==js的DOM对象转换成jQuery对象==，语法：$(js的DOM对象)

1 2	var jsDomEle = document.getElementById("myDiv"); //js的DOM对象 var $jQueryEle = $(jsDomEle); //js的DOM对象转换成 jquery对象

==jQuery对象转换成js对象==，语法：jquery对象[索引] 或 jquery对象.get(索引)

1
2
3

var $jQueryEle = $("#myDiv"); //jQuery对象
var jsDomEle = $jQueryEle[0]; //jquery对象 转换成 js的DOM对象
var jsDomEle2 = $jQueryEle.get(0)	// jQuery对象转换成js的Dom对象, 使用get(x)

:key: JQuery对象变量名前面的 $`符号，主要作用是便于我们区分该变量是 JsDOM对象与 jQuery对象，并无特殊含义。写`$ 符号代表jQuery,对象是行业书写规范，不加$，代码也没有错误。

1.3.2 示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入jQuery -->
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<!-- 测试jQuery -->
		<script type="text/javascript">
			$(function(){			
				//1.演示使用js的DOM对象方式获取div中的文本数据
				var divEle = document.getElementById("myDiv");//js的DOM对象
				alert(divEle.innerHTML);//js对象的innerHTML属性
				
				//1.演示使用jquery对象方式获取div中的文本数据
				var $divEle = $("#myDiv");//jQuery对象
				alert($divEle.html());//jQuery对象的html方法
				
				//2.演示将js的DOM对象 转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据
				alert($(divEle).html());//转换后正常执行
				
				//3.演示将jquery对象 转换成 js的DOM对象， 再使用转换后js的DOM对象方式获取div中的数据
				alert($divEle[0].innerHTML);
			});
		</script>
	</head>
	<body>
		<div id="myDiv">通过不同方式获得文本内容</div>
	</body>
</html>

2 jQuery选择器

2.1 基本选择器

语法

选择器名称	语法	解释
标签选择器（元素选择器）	`$("标签名称")`	获得所有匹配标签名称的于元素
id选择器	`$("#id的属性值")`	获得与指定id属性值匹配的元素
类选择器	`$(".class的属性值")`	获得与指定的class属性值匹配的元素

<script type="text/javascript">
  //<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
  $("#b1").click(function(){
    $("#one").css("backgroundColor","red");
  });

  //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
  $("#b2").click(function(){
    $("div").css("backgroundColor","red");
  });

  //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
  $("#b3").click(function(){
    $(".mini").css("backgroundColor","red");
  });

  //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
  $("#b4").click(function(){
    $("span,#two").css("backgroundColor","red");
  });
</script>

2.2 层级选择器

获得A元素内部的所有的B元素：$("A B ") ==后代选择器(包含子孙)==
获得A元素下面的所有B子元素：$("A > B") ==只有儿子,没有孙子==
获得A元素同级下一个B元素：$("A + B") ==下一个兄弟==
了解内容
- 获得A元素同级所有后面B元素：$("A ~ B")==后边的所有兄弟==
- 获取A元素的同级B元素: $("A").siblings("B") ==获取所有的兄弟==

//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
$("#b1").click(function () {
  $("body div").css("background-color", "red");
});

//<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
$("#b2").click(() => {
  $("body > div").css("background-color", "red");
});

//<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色"  id="b3"/>
$("#b3").click(() => {
  $("#one + div").css("background-color", "red");
});

//<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色"  id="b4"/>
$("#b4").click(() => {
  $("#two ~ div").css("background-color", "red");
});

//<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为红色"  id="b5"/>
$("#b5").click(() => {
  $("#two").siblings("div").css("background-color", "red");
});

2.3 属性选择器

获得有属性名的元素：$("A[属性名]")
获得属性名等于值元素：$("A[属性名=值]")
复合属性选择器，多个属性同时过滤：$("A[属性名!=值]...[属性名!=值]")
了解
- 获得属性名 不等于 值元素：$("A[属性名!=值]")
- 获得属性名以值开头元素：$("A[属性名^=值]")
- 获得属性名以值结尾元素：$("A[属性名$=值]")
- 获得属性名含有值元素：$("A[属性名*=值]")

//<input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
$("#b1").click(() => {
  $("div[title]").css("background", "red");
});
// <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
$("#b2").click(() => {
  $("div[title=test]").css("background", "red");
});
// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
$("#b3").click(() => {
  $("div[title!=test]").css("background", "red");
});
// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
$("#b4").click(() => {
  $("div[title^=te]").css("background", "red");
});
// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
$("#b5").click(() => {
  $("div[title$=est]").css("background", "red");
});
// <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
$("#b6").click(() => {
  $("div[title*=es]").css("background", "red");
});
// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
$("#b7").click(() => {
  $("div[id][title*=es]").css("background", "red");
});

2.4 基本过滤选择器

$("div:first")

获得选择的元素中的第一个元素： :first
获得选择的元素中的最后一个元素： :last
不包括指定内容的元素例如： :not(selecter)
偶数，从 0 开始计数： :even
奇数，从 0 开始技术： :odd
指定索引(index)元素： :eq(index)
大于指定索引(index)元素： :gt(index)
小于指定索引(index)元素： :lt(index)
获得标题,固定写法（
/
….） :header
了解
- 获得正在执行的动画,固定写法 :animated

// <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
$("#b1").click(() => {
  $("div:first").css("background", "red");
});
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
$("#b2").click(() => {
  $("div:last").css("background", "red");
});
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
$("#b3").click(() => {
  $("div:not(.one)").css("background", "red");
});
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
$("#b4").click(() => {
  $("div:even").css("background", "red");
});
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
$("#b5").click(() => {
  $("div:odd").css("background", "red");
});
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
$("#b6").click(() => {
  $("div:gt(3)").css("background", "red");
});
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
$("#b7").click(() => {
  $("div:eq(3)").css("background", "red");
});
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
$("#b8").click(() => {
  $("div:lt(3)").css("background", "red");
});
// <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
$("#b9").click(() => {
  $(":header").css("background", "red");
});
// <input type="button" value=" 改变当前正在执行动画的所有元素的背景色为 红色"  id="b10"/>
function moverDiv(){
  $("#mover").fadeToggle(2000, 'swing');
};
for (let i = 0; i < 10; i++) {
  moverDiv();
}
$("#b10").click(() => {
  $(":animated").css("background", "red");
});

2.5 表单属性选择器

$(":text:enabled")

$("input[type='text']:enabled").

获得可用元素： :enabled
获得不可用元素： :disabled
获得单选/复选框选中的元素（单选radio ，多选checkbox）： :checked
获得下拉框选中的元素（下列列表select）： :selected

// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
$("#b1").click(function () {
  $(":text:enabled").val("可用值");
  $("input[type='text']:enabled").val("input标签可用文本输入框的值被改变");
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
$("#b2").click(function () {
  $("text:disabled").val("不可用值");
});

// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数"  id="b3"/>
$("#b3").click(function () {
  console.log($(":checkbox:checked").length);
});

// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容"  id="b4"/>
$("#b4").click(function () {
  alert($("option:selected").text());
});

3 jQuery的DOM操作

3.1 操作内容

操作内容
1. text() 获取或修改文本内容类似于 dom.innerText
  - 修改内容填充为文本类型，不识别html样式
2. html() 获取或修改html内容类似dom.innerHTML
  - 修改内容可以识别html样式

:warning: text() 是获取设置所有

:warning: html() 是获取第一个，==设置所有==

//获取所有span
var $span = $("span");
//获取所有div
var $div = $("div");

// 1.获取纯文本内容
console.log($span.text()); //获取所有span中的文本:span1span2span3
console.log($div.text()); //获取所有div中的文本:div1div2div3
// 2.获取html内容
console.log($span.html()); //只能获取第一个标签体:span1
console.log($div.html()); //只能获取第一个标签体:div1<br/>
// 3.设置纯文本内容
$span.text("<h1>h1标题标签</h1>"); //设置为文本内容
$div.text("<h1>h1标题标签</h1>"); //设置为文本内容
// 4.设置html内容
$span.html("<h1>h1标题标签</h1>"); //设置标签体为标签显示
$div.html("<h1>h1标题标签</h1>"); //设置标签体为标签显示

3.2 操作属性

操作属性
1. val()获取或修改表单控件的value值等于dom.value
2. prop() 获取或修改原生属性值(checked，selected)
3. attr() 获取或修改自定义属性值等于 dom.setAttribute() dom.getAttribute()

<script type="text/javascript">
//获取张三
//1.获取到id是myinput的标签对象
var $myinput = $("#myinput");
//2.使用jQuery对象.val()函数:获取value属性值 ,使用jQuery对象.val(新值):设置value的值
console.log($myinput.val());

//把张三改成李四
$myinput.val("李四");

//获取id为bj的标签对象
var $bj = $("#bj");
/*
 * 	获取属性值: jQuery对象.attr("属性名");
 * 	设置属性值: jQuery对象.attr("属性名","属性值");
 */
//获取北京节点的name属性值
console.log($bj.attr("name")); // beijing

//设置北京节点的name属性的值为dabeijing
$bj.attr("name", "dabeijing");
console.log($bj.attr("name"));

//新增北京节点的discription属性 属性值是didu
console.log($bj.attr("discription")); //undefined
$bj.attr("discription", "didu");
console.log($bj.attr("discription")); // didu

//删除北京节点的name属性并检验name属性是否存在
/*
 * jQuery对象.removeAttr(name):根据属性名,删除属性
 */
$bj.removeAttr("name");
console.log($bj.attr("name")); //undefined

//获得hobby的的选中状态
console.log($("#hobby").attr("checked")); //根据属性名获取属性值: 选择:checked  未选中:undefined(没有checked属性)

/*
 * jQuery对象:prop("checked") 获取单选框|复选框选中的状体: 选择:true  未选中:false
 * jQuery对象:prop("selected") 获取下拉中option选中状态: 选择:true  未选中:false
 */
console.log($("#hobby").prop("checked")); //选择:true  未选中:false
</script>

3.3 操作样式

jQuery操作样式
1. css() 获取或者修改CSS样式用法
  - css(样式名) 获取一个样式等于 dom.style.驼峰样式名
  - css(样式名,样式值) 设置一个样式 dom.style.驼峰样式名=样式值
  - css({样式名:样式值,样式名:样式值}) 批量设置样式 dom.style.cssText = 样式名:样式值;样式名:样式值;

addClass() 添加一个样式
removeClass() 移除一个样式
toggleClass() 切换一个样式

<script>
  // 分别获取p1,p2,p3,p4对象
  var $p1 = $("#p1");
  var $p2 = $("#p2");
  var $p3 = $("#p3");
  var $p4 = $("#p4");

  // 1. css() 获取或设置css样式
  // 给p1设置一个样式
  $p1.css("color", "white");
  $p1.css("font-family", "楷体");

  // 给p2批量设置样式
  $p2.css({
    color: "blue",
    border: "1px solid red",
    "background-color": "yellow",
  });

  // 获取一个样式
  console.log($p2.css("color")); // rgb(0, 0, 255)

  // 2. addClass() 添加一个class样式
  $p3.addClass("mp");

  // 3. removeClass() 移除一个class
  $p3.removeClass("mpp");

  // 4. toggleClass() 切换一个class(没有添加,有删除)
  // 获取id是but的按钮,给按钮添加一个鼠标点击事件
  $("#but").click(function () {
    $p4.toggleClass("mpp");
  });
</script>

4.4 创建和插入对象

API方法	解释
`append(element)`	添加成最后一个子元素，两者之间是父子关系
`prepend(element)`	添加成第一个子元素，两者之间是父子关系
`$("<A id="11>aaaa</A>")`	创建A元素对象,同时可以给对象添加属性和标签体
`before(element)`	添加到当前元素的前面，两者之间是兄弟关系
`after(element)`	添加到当前元素的后面，两者之间是兄弟关系
`insertBefore(element)`	将元素添加到另外一个元素之前，两者是兄弟关系
`insertAfter(element)`	将元素添加到另外一个元素之后，两者是兄弟关系

<script type="text/javascript">
    /**将反恐放置到city的后面*/
    $("#city").append($("#fk"));

    /**将反恐放置到city的最前面*/
    $("#city").prepend($("#fk"));

    //将反恐插入到天津后面
    $("#tj").after($("#fk"));

    //将反恐插入到天津前面
    $("#tj").before($("#fk"));

    //将反恐插入到天津后面
    $("#fk").insertAfter($("#tj"));

    //将反恐插入到天津前面
    $("#fk").insertBefore($("#tj"));
</script>

5.5 删除对象

API方法	解释
remove()	删除指定元素
empty()	清空指定元素的所有子元素

<script type="text/javascript">
    //删除<li id="bj" name="beijing">北京</li>
    $("#bj").remove();

    //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
    $("#city").empty();
</script>

4 jQuery综合案例

4.1 表格隔行换色

<script type="text/javascript">
    // 1. 创建页面加载时事件, 页面加载完毕后执行
$(() => {
        // 1. 获取索引大于1(跳过删除按钮行), 且为奇数的行, 设置背景颜色为粉色
        $("tr:gt(1):even").css("background-color", "pink");
        // 2. 获取索引大于1(跳过删除按钮行), 且为偶数的行, 设置背景颜色为黄色
        $("tr:gt(1):odd").css("background-color", "yellow");
    });
</script>

4.2 复选框全选全不选

<script type="text/javascript">
  // 1. 创建页面加载事件, 页面加载完毕后执行
  $(() => {
    // 1. 获取全选复选框按钮
    var $selectAll = $("#select_all");
    // 2. 添加事件
    $selectAll.click(() => {
      $(".itemSelect").prop("checked", $selectAll.prop("checked"));
    });
  });
</script>

4.3 定时弹广告

页面打开，延迟几秒钟，广告从上向下慢慢滑下显示，停留几秒，再从下向上慢慢滑动隐藏。

file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网站的首页</title>
    <style>
      #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>

    <script>
      $(function(){
        adFn();
      });
      //定时广告的方法
      function adFn(){
        //5秒钟弹出广告
        setTimeout(
          function(){
            $("#ad").slideDown(3000);
            //$("#ad").fadeIn(3000
            setTimeout(
              function(){
                $("#ad").slideUp(3000);
                //$("#ad").fadeOut(3000);
              },
              8000
            );
          },
          5000
        );
      }
    </script>
  </head>
  <body>
    <!-- 整体的DIV -->
    <div>
      <!-- 广告DIV -->
      <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/ad.jpg" />
      </div>

      <!-- 下方正文部分 -->
      <div id="content">
        正文部分
      </div>
    </div>
  </body>
</html>

5 jQuery动画

5.1 显示效果

方法名称	解释
`show([speed],[easing],[fn]])`	显示元素方法
`hide([speed],[easing],[fn]])`	隐藏元素方法
`toggle([speed],[easing],[fn])`	切换元素方法，显示的使之隐藏，隐藏的使之显示

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

<script type="text/javascript">
	function hideFn(){
		$("#showDiv").hide('slow', 'swing');
	}

	function showFn(){
		$("#showDiv").show('fast', 'swing', ()=>{
			console.log("显示完成");
		});
	}

	function toggleFn(){
		$("#showDiv").toggle(3000, 'swing');
	}
</script>

222

5.2 滑动效果

方法名称	解释
`slideDown([speed,[easing],[fn]])`	向下滑动方法
`slideUp([speed,[easing],[fn]])`	向上滑动方法
`slideToggle([speed],[easing],[fn])`	切换元素方法，向下使之向下,向下使之向上

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

<script type="text/javascript">
  function hideFn() {
    $("#showDiv").slideUp("slow", "swing");
  }
  function showFn() {
    $("#showDiv").slideDown("normal", "swing");
  }
  function toggleFn() {
    $("#showDiv").slideToggle(1000, "linear");
  }
</script>

示例效果图

5.3 淡入淡出效果

方法名称	解释
`fadeIn([s],[e],[fn])`	淡入方法
`fadeOut([s],[e],[fn])`	淡出方法
`fadeTo([[s],o,[e],[fn]])`	设置元素的透明度
`fadeToggle([s,[e],[fn]])`	淡入淡出之间切换

参数
- | 参数名称 | 解释 |
  | ———— | —————————————————————————————— |
  | speed | 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) |
  | easing | 用来指定切换效果，默认是”swing”，可用参数”linear” |
  | fn | 在动画完成时执行的函数，每个元素执行一次 |
  | opacity | 一个0至1之间表示透明度的数字 |

<script type="text/javascript">
  function hideFn() {
    $("#showDiv").fadeOut(1000); //1秒钟淡出(隐藏)
  }

  function showFn() {
    $("#showDiv").fadeIn(1000); //1秒钟淡入(显示)
  }

  function toggleFn() {
    $("#showDiv").fadeToggle(1000); //1秒钟淡入淡出之间切换
  }

  function fadeTofn() {
    $("#showDiv").fadeTo(500, 0.5); //2秒钟设置div的透明度为50%
  }
</script>

6 jQuery的遍历

jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体

因此常常需要对jQuery对象进行遍历

6.1 原始方式遍历

1
2
3

for(var i=0;i<元素数组.length;i++){
  	元素数组[i];
}

<script type="text/javascript">
  $(function () {
    var $li = $("#city li");
    for (let l = 0; l < $li.length; l++) {
      console.log($li[l].innerHTML);
    }
  });
</script>

测试结果：

6.2 对象方法遍历

jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象

<script type="text/javascript">
  $(function () {
    var $li = $("#city li");
    $li.each(function (index, element) {
      console.log(index + ":" + element.innerHTML);
    });
  });
</script>

6.3 全局方法遍历

$.each(jquery对象,function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象

<script type="text/javascript">
  $(function () {
    $.each($("#city li"), function (index, element) {
      console.log(index + ":" + element.innerHTML);
    });
  });
</script>

6.4 for-of遍历

:pushpin: jQuery3.0 新特性

for(变量 of jquery对象){...}
- 变量:定义变量依次接受jquery数组中的每一个元素
- jquery对象：要被遍历的jquery对象

<script type="text/javascript">
  $(function () {
    for (const li of $("#city li")) {
      console.log(li.innerHTML);
    }
  });
</script>

7 jQuery的事件

7.1 常用事件

jQuery绑定事件,事件名字没有on

事件名称	事件说明
blur	事件源失去焦点
click	单击事件源
change	内容改变
keydown	接受键盘上的所有键(键盘按下)
keypress	接受键盘上的部分键（ctrl,alt,shift等无效）(键盘按下)
keyup	键盘抬起
mouseover	鼠标悬停(鼠标移入)
mouseout	鼠标离开

7.1 on绑定事件

jQuery元素对象.on(事件名称,function(){...}
- 事件名称是jQuery的事件方法的方法名称，例如：click、mouseover、mouseout、focus、blur等

<script type="text/javascript">
  $(function () {
    $("#btn").on("click", function () {
      alert("使用on绑定点击事件");
    });

    $("#btn").mouseover(function () {
      $(this).css("background-color", "green");
    });

    $("#btn").mouseout(function () {
      $(this).css("background-color", "white");
    });
  });
</script>

file

7.2 off解绑事件

jQuery元素对象.off(事件名称);
- 参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件

<script type="text/javascript">
  $(function () {
    $("#b1").on("click", function () {
      alert("使用on绑定点击事件");
    });
    $("#b1").mouseover(function () {
      $(this).css("background-color", "green");
    });
    $("#b1").mouseout(function () {
      $(this).css("background-color", "white");
    });

    $("#b2").on("click", function () {
      $("#b1").off("click");
    });
    $("#b3").on("click", function () {
      $("#b1").off();
    });
  });
</script>

file

7.3 事件切换

7.3.1 普通写法

<script type="text/javascript">
    $(function(){
        $("#myDiv").mouseover(function(){
            $(this).css("background","green");
        });
        $("#myDiv").mouseout(function(){
            $(this).css("background","red");
        });
    });
</script>

7.3.1 链式写法

script type="text/javascript">
    $(function(){
        $("#myDiv").mouseover(function(){
            $(this).css("background","green");
        }).mouseout(function(){
            $(this).css("background","red");
        });
    });
</script>

7.3.2 切换函数写法

hover([over,]out)
- over代表鼠标移入事件触发的函数
- out代表鼠标移出事件触发的函数

<script type="text/javascript">
    $(function(){
        $("#myDiv").hover(function(){
            $(this).css("background","green");
        },function(){
            $(this).css("background","red");
        });
    });
</script>

8 jQuery的插件

8.1 插件机制

8.1.1 概述

jQuery插件的机制很简单，就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法，扩展jQuery的功能

8.1.2 插件机制语法

语法	解释
jQuery.fn.extend(object)	对jQuery对象进行方法扩展
jQuery.extend(object)	对jQuery全局进行方法扩展

8.1.3 对jQuery对象进行方法扩展

$.fn.extend({
    name: function() {
        ...
    },
    ...
})

<script type="text/javascript">
    //普通方式--点击选中复选框
    function checkFn(){
        $("input[type='checkbox']").prop("checked",true);
    }
    //普通方式--点击取消复选框选中
    function uncheckFn(){
        $("input[type='checkbox']").prop("checked",false);
    }

    //对jQuery的函数进行扩展
    jQuery.fn.extend({
        //定义全选函数
        check:function(){
            $(":checkbox").prop("checked",true);
        },
        //定义全不全函数
        uncheck:function(){
            $(":checkbox").prop("checked",false);
        }
    });

    //插件方式--点击选中复选框
    function checkFn1(){
        //任何一个jQuery对象都可以调用
        $("#btn1-check").check();
    }

    //插件方式--点击选中复选框
    function uncheckFn2(){
        $("#btn-check").uncheck();
    }
</script>

8.1.3 对jQuery全局进行方法扩展

<script type="text/javascript">
    $.extend({
        max: (a, b) => {
        	return a < b ? b : a;
        },
        min: (a, b) => {
        	return a < b ? a : b;
        },
    });
    console.log("$.max(2, 3)", $.max(2, 3));
    console.log("$.min(2, 3))", $.min(2, 3));
</script>

8.2 表单校验插件validator

8.2.1 插件概述

网络上有许多成熟的插件共使用者参考，插件就是将jquery实现的常用操作进行封装，封装后的“小框架“就可以叫做插件，按照插件的语法去操作可以实现很多复杂的功能，而我们需要做的是学会该插件的使用语法即可。

表单校验插件是按照一定的语法编写代码，可以使用简单的代码完成复杂的表单校验工作。

8.2.2 基本语法

1）开发步骤

下载jquery-validation插件
- CDN: <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
将该插件（也就是一个js文件）导入到我们的工程中
在要使用校验插件的html中引入该js文件

编写表单校验的代码（语法）

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

其中，rules是对表单项校验的规则，messages是对应的表单项校验失败后的错误提示信息

注意，当错误提示信息不按照我们预想的位置显示时，我们可以按照如下方式进行设置自定义错误显示标签放在我们需要显示的位置，当此表单项验证不通过时会将此信息自动显示出来，jQuery验证插件会自动帮助我们控制它的显示与隐藏

1	<lable for="html元素name值" class="error" style="display:none">错误信息</lable>

如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了

2）常用的校验规则

校验类型	取值	描述
required	true	false	必填字段
email	true	邮件地址
url	路径
date	true	校验日期的有效性
dateISO	true	校验日期格式（YYYY-MM-dd）
number	数字（负数，小数）
digits	true	整数
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minL,maxL]	长度范围
min	最小值
max	最大值
range	[min,max]	值范围
equalTo:”#id”	jQuery表达式	两个值相同
remote	url路径	ajax校验

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>表单校验</title>

    <!-- 
	      想要使用表单校验插件
		  1.必须引入jQuery的js文件,基于jQuery开发的
		  2.引入表单校验插件js文件
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

    <script>
      //定义一个页面加载事件,让表单先加载完毕,在进行校验
      $().ready(function () {
        // 通过表单的id属性值,选择要校验的表单
        // 使用表单jQuery对象,调用表单校验插件中的函数validate
        $("#signupForm").validate({
          // rules:定义的校验规则
          rules: {
            // 使用input标签的name的属性值,获取到要校验的标签
            // required:校验的规则,必须填写
            firstname: "required",
            lastname: "required",
            username: {
              required: true,
              minlength: 2,
            },
            password: {
              required: true,
              minlength: 5,
            },
            confirm_password: {
              required: true,
              minlength: 5,
              equalTo: "#password",
            },
            email: {
              required: true,
              email: true,
            },
            topic: {
              required: "#newsletter:checked",
              minlength: 2,
            },
            agree: "required",
          },
          // messages:不满足校验规则的错误提示信息
          messages: {
            firstname: "名必须填写",
            lastname: "姓必须填写",
            username: {
              required: "用户名必须填写",
              minlength: "用户名的长度不能少于2个字符",
            },
            password: {
              required: "密码必须填写",
              minlength: "密码长度必须大于5个字符",
            },
            confirm_password: {
              required: "确认密码必须填写",
              minlength: "确认密码必须大于5个字符",
              equalTo: "确认密码输入错误",
            },
            email: "请输入一个正确的邮箱",
            agree: "请阅读并同意相关条款",
          },
        });
      });
    </script>
  </head>
  <body>
    <form class="cmxform" id="signupForm" method="get" action="">
      <fieldset>
        <legend>个人信息</legend>
        <p>
          <label for="firstname">姓</label>
          <input id="firstname" name="firstname" />
        </p>
        <p>
          <label for="lastname">名</label>
          <input id="lastname" name="lastname" />
        </p>
        <p>
          <label for="username">用户名</label>
          <input id="username" name="username" />
        </p>
        <p>
          <label for="password">密码</label>
          <input id="password" name="password" type="password" />
        </p>
        <p>
          <label for="confirm_password">确认密码</label>
          <input
            id="confirm_password"
            name="confirm_password"
            type="password"
          />
        </p>
        <p>
          <label for="email">电子邮箱</label>
          <input id="email" name="email" type="email" />
        </p>
        <p>
          <label for="agree">阅读相关协议</label>
          <input type="checkbox" class="checkbox" id="agree" name="agree" />
        </p>
        <p>
          <input class="submit" type="submit" value="提交" />
        </p>
      </fieldset>
    </form>
  </body>
</html>

8.2.3 表单校验插件自定义校验方法

如果预定义的校验规则尚不能满足需求的话可以进行自定义校验规则：

自定义校验规则步骤如下：

使用$.validator.addMethod("校验规则名称",function(value,element,params){});
在rules中通过校验规则名称使用校验规则
在messages中定义该规则对应的错误提示信息其中
- value是校验组件的value值
- element是校验组件的节点对象
- params是校验规则的参数

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我的jquery表单校验页面</title>

    <style type="text/css">
      p {
        text-align: center;
        font-size: 24px;
      }
      table {
        margin: 0 auto;
        border: 0;
      }
      table tr {
        height: 40px;
        border: 0;
      }
      table tr td {
        padding: 0 14px;
        border: 1px solid #999;
      }
      .error {
        color: red;
      }
    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script type="text/javascript">
      $(function () {
        //自定义校验规则
        /*
         * 参数：
         * 	第一个 规则名称
         * 	第二个 规则的实现逻辑 匿名函数
         */
        $.validator.addMethod("cardlength", function (value, element, param) {
          //校验输入的长度是否满足15或18
          if (
            value.trim().length != param[0] &&
            value.trim().length != param[1]
          ) {
            return false; //代表该校验器不通过  显示该校验规则对应的错误信息
          }
          return true;
        });

        $.validator.addMethod("card15", function (value, element, param) {
          //校验15位的规则是否正确  --- 都是数字
          var regExp15 = /^[0-9]{15}$/;
          if (value.trim().length == 15) {
            //校验格式
            return regExp15.test(value.trim());
          }
          return true; //放行 不归该校验器校验
        });

        $.validator.addMethod("card18", function (value, element, param) {
          if (param) {
            //校验15位的规则是否正确  --- 都是数字
            var regExp18 = /^[0-9]{18}|[0-9]{17}X$/;
            if (value.trim().length == 18) {
              //校验格式
              return regExp18.test(value.trim());
            }
          }
          return true; //放行 不归该校验器校验
        });

        $("#empForm").validate({
          rules: {
            realname: "required",
            username: {
              required: true,
              rangelength: [5, 8],
            },
            psw: {
              required: true,
              minlength: 6,
              maxlength: 12,
            },
            psw2: {
              required: true,
              minlength: 6,
              maxlength: 12,
              equalTo: "#psw",
            },
            gender: {
              required: true,
            },
            age: {
              required: true,
              range: [26, 50],
            },
            edu: {
              required: true,
            },
            birthday: {
              required: true,
              dateISO: true,
              date: true,
            },
            checkbox1: {
              required: true,
            },
            email: {
              email: true,
            },
            card: {
              required: true,
              cardlength: [15, 18],
              card15: true,
              card18: true,
            },
          },
          messages: {
            realname: "真实姓名必须写",
            username: {
              required: "用户名必须写",
              rangelength: "长度在5-8之间",
            },
            psw: {
              required: "密码必须写",
              minlength: "最小是6位",
              maxlength: "最大是12位",
            },
            psw2: {
              required: "密码必须写",
              minlength: "最小是6位",
              maxlength: "最大是12位",
              equalTo: "密码输入不一致",
            },
            age: {
              required: "年龄必须写",
              range: "年龄必须在26-50之间",
            },
            edu: {
              required: "必须选择一个",
            },
            birthday: {
              required: "生日必须填写",
              dateISO: "日期格式不正确",
              date: "日期非法",
            },
            email: {
              email: "邮箱格式不正确",
            },
            card: {
              required: "身份证必须填写",
              cardlength: "身份证长度是15或18位",
              card15: "15位的身份证必须都是数字",
              card18: "18位的身份证必须都是数字或末尾是X",
            },
          },
        });
      });
    </script>
  </head>
  <body>
    <p>员工信息录入</p>
    <form name="empForm" id="empForm" method="post" action="test.html">
      <table border="1">
        <tr>
          <td>真实姓名(不能为空 ,没有其他要求)</td>
          <td><input type="text" id="realname" name="realname" /></td>
        </tr>
        <tr>
          <td>
            登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):
          </td>
          <td><input type="text" id="username" name="username" /></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>性别(必选其一)</td>
          <td>
            <input
              type="radio"
              id="gender_male"
              value="m"
              name="gender"
            />&nbsp;男
            <input
              type="radio"
              id="gender_female"
              value="f"
              name="gender"
            />&nbsp;女
            <label class="error" for="gender" style="display: none"
              >必须选择一个性别
            </label>
          </td>
        </tr>
        <tr>
          <td>年龄(必填26-50):</td>
          <td><input type="text" id="age" name="age" /></td>
        </tr>
        <tr>
          <td>你的学历:</td>
          <td>
            <select name="edu" id="edu">
              <option value="">－请选择你的学历－</option>
              <option value="a">专科</option>
              <option value="b">本科</option>
              <option value="c">研究生</option>
              <option value="e">硕士</option>
              <option value="d">博士</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>出生日期(1982/09/21):</td>
          <td><input type="text" id="birthday" name="birthday" value="" /></td>
        </tr>
        <tr>
          <td>兴趣爱好:</td>
          <td colspan="2">
            <input type="checkbox" name="checkbox1" id="qq1" />&nbsp;乒乓球
            &nbsp;
            <input
              type="checkbox"
              name="checkbox1"
              id="qq2"
              value="1"
            />&nbsp;羽毛球
            <input
              type="checkbox"
              name="checkbox1"
              id="qq3"
              value="2"
            />&nbsp;上网
            <input
              type="checkbox"
              name="checkbox1"
              id="qq4"
              value="3"
            />&nbsp;旅游
            <input
              type="checkbox"
              name="checkbox1"
              id="qq5"
              value="4"
            />&nbsp;购物
            <label class="error" for="checkbox1" style="display: none"
              >必须选一个</label
            >
          </td>
        </tr>
        <tr>
          <td align="left">电子邮箱:</td>
          <td><input type="text" id="email" name="email" /></td>
        </tr>
        <tr>
          <td align="left">身份证(15-18):</td>
          <td><input type="text" id="card" name="card" /></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="submit" name="firstname" id="firstname" value="保存" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

jQuery

1 jQuery介绍

1.1 概述

1.2 下载与引入

1.2.1 官方下载

1.2.2 版本

1.2.3 引入

1.2.4 引入测试

1.3 jQuery对象与js对象之间的转换

1.3.1 转换关系

1.3.2 示例代码

2 jQuery选择器

2.1 基本选择器

2.2 层级选择器

2.3 属性选择器

2.4 基本过滤选择器

/

….） :header

2.5 表单属性选择器

3 jQuery的DOM操作

3.1 操作内容

3.2 操作属性

3.3 操作样式

4.4 创建和插入对象

5.5 删除对象

4 jQuery综合案例

4.1 表格隔行换色

4.2 复选框全选全不选

4.3 定时弹广告

5 jQuery动画

5.1 显示效果

5.2 滑动效果

5.3 淡入淡出效果

6 jQuery的遍历

6.1 原始方式遍历

6.2 对象方法遍历

6.3 全局方法遍历

6.4 for-of遍历

7 jQuery的事件

7.1 常用事件

7.1 on绑定事件

7.2 off解绑事件

7.3 事件切换

7.3.1 普通写法

7.3.1 链式写法

7.3.2 切换函数写法

8 jQuery的插件

8.1 插件机制

8.1.1 概述

8.1.2 插件机制语法

8.1.3 对jQuery对象进行方法扩展

8.1.3 对jQuery全局进行方法扩展

8.2 表单校验插件validator

8.2.1 插件概述

8.2.2 基本语法

1）开发步骤

2）常用的校验规则

8.2.3 表单校验插件自定义校验方法

….） `:header`