jQuery（一）jQuery概述、使用方式、原理、查找元素-灵析社区

jQuery 是一个快速、简洁的 JavaScript 框架，jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供

一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

一、认识jQuery

jQuery 的核心特性是具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的 css 选择器，并且可对 css 选择器进行扩展；拥有便捷的插件扩展

机制和丰富的插件，且 jQuery 兼容各种主流浏览器。

jQuery 依旧执行 DOM 的增、删、改、查、事件绑定操作，可以说 jQuery 是 DOM 的延续；jQuery 对 DOM 操作的每一步都进行了简化，是用函数来解

决一切问题（jQuery就是函数库）。

但是 jQuery只有PC端，没有移动端，而且只对 DOM 操作的每一步进行了简化，没有减少步骤，所以用的会越来越少。

二、jQuery的使用

到官网jQuery进行下载即可，下载版本后引入网页。

1. 将 jQuery 引入网页的方法

（1）将 jquery.js 文件下载到项目本地文件夹，用相对路径引入

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

（2）引入 CDN 网络中的 jquery.js 文件

CDN 网络可在全球范围共享一个文件；任意地区的一个客户端想用 CDN 网络中的文件时，CDN 网络都会从距离这个客户端网络最优的服务器下载资源给客户端。

<script src="官网提供的CDN网址">
 
//eg：微软提供的cdn网址: 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.js">

举例：对比 DOM 与 jQuery 写法；

三、jQuery原理

1. 引入 jquery.js 文件后，会在内存中新增一种类型，包括：

（1）构造函数：创建该类型的子对象；

（2）原型对象：集中保管该类型所有子对象共用的方法。

2. 使用 jQuery 函数库中的函数时，需要先创建 jQuery 类型的子对象

//标准写法
var jq子对象=new jQuery(选择器);
 
//简写
var jq子对象=jQuery(选择器)
var jq子对象=$(选择器)   //$相当于new jQuery  1.查找DOM元素 2.创建jQuery对象

只有 jQuery 子对象才能访问 jQuery 原型对象中的简化版共有方法。原生的 DOM 元素对象无权使用 jQuery 原型对象中的简化版函数。

3. jQuery 中事件处理函数里的 this

.click 会翻译为 .οnclick=function(){ ... }，再执行，所以 .click() 中的 this，其实还是 .onclick 里的 this。与 DOM 中的 this 完全一样，都指向正在点击的当前原生 DOM 元素

对象本身；jquery 中所有事件处理函数中的this都必须用 $() 包裹起来（包装），形成一个 jQuery 子对象，才可以使用 jQuery 函数库中的函数。

四、 jQuery API三大特点

1.自带for循环遍历

只对 jQuery 查找结果对象调用一次简化版函数，就可以自动遍历查找结果中每个 DOM 元素，自动为每个 DOM 元素应用多用的 DOM 操作

2.一个函数两用

和修改相关的函数，都既能用于修改新值，又能用于获取旧值；

调用函数时，没有传新值参数，函数默认执行获取旧值操作，

调用函数时，传了新值参数，函数自动改为执行修改为新值操作。

举例：有多个按钮，记录每个按钮的单击次数；

<body>
  <h1>jQueryAPI特点</h1>
  <button id="btn1">click me(0)</button>
  <button id="btn2">click me(0)</button>
  <button id="btn3">click me(0)</button>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //为三个按钮绑定单击事件，记录单击次数
    //DOM 4步
    //1. 查找触发事件的元素
    var $btn = $("button");
    //2. 绑定事件处理函数
    $btn.click(function () {
      //3. 查找要修改的元素:本例中改当前按钮,所以用this  
      var $this = $(this);
      //4. 修改元素
      var n = parseInt(
        $this.html().slice(9, -1)
      );
      n++;
      $this.html(`click me(${n})`)
    });
  </script>
</body>

五、查找元素

jQuery 主要通过选择器的方式查找元素，除了原始 CSS 选择器之外，还添加了额外 jQuery 专属的选择器。

1. 子元素过滤选择器（css选择器）

:first-child	所有父元素下第一个直接子元素
:last-child	所有父元素下最后一个直接子元素
:nth-child(i)	所有父元素下第i个直接子元素
:only-child	所有父元素下唯一的一个子元素
注意：css中下标从1开始

举例：使用子元素过滤选择器选择指定元素；

<body>
  <h3>子元素过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //查找每个ul中第一个li，让其字体颜色变为红色
    $("ul>li:first-child").css("color", "red");
    //查找每个ul中最后一个li，让其边框变为绿色
    $("ul>li:last-child").css("border", "1px solid green");
 
    //查找每个ul中处于偶数位置的，让其背景变为黄色
    $("ul>li:nth-child(2n)").css("background", "yellow");
    //查找每个ul中第2个li，添加蓝色阴影
    $("ul>li:nth-child(2)").css("box-shadow", "0 0 10px blue");
    //查找作为ul下唯一子元素的li，设置20px内边距
    $("ul>li:only-child").css("padding", "20px");
  </script>
</body>

2. 基本过滤选择器（jQuery专属）

先将所有符合要求的元素集中保存到一个大的集合中从0开始统一编号，按元素在集合中的统一编号来选择指定的元素。

举例：使用基本过滤选择器选择指定元素；

<body>
  <h3>基本过滤选择器.</h3>
  <ul>
    <li>child1-basic0</li>
    <li>child2-basic1</li>
    <li>child3-basic2</li>
  </ul>
  <ul>
    <li>child1-basic3</li>
    <li>child2-basic4</li>
    <li>child3-basic5</li>
  </ul>
  <ul>
    <li>child1-basic6</li>
  </ul>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //查找第一个li，字体变化红色
    $("li:first").css("color", "red");
    //查找最后一个li，边框变为绿色
    $("li:last").css("border", "1px solid green");
    //查找处于(正常人眼)偶数位置的li，背景变为黄色
    $("li:odd").css("background", "yellow");
    //查找第2个li，添加蓝色阴影
    $("li:eq(2)").css("box-shadow", "0 0 10px blue");
  </script>
</body>

3. 内容过滤器（jQuery专属）

根据元素的内容不同来选择元素。

:contains(文本)	选择内容中包含指定文本关键字的元素
:has(其它选择器)	选择子元素中包含符合选择器要求的元素的父元素
:parent	选择内容非空的元素
:empty	选择内容为空的元素

举例：使用内容过滤选择器选择指定元素；

<body>
  <div class="container">
    <h1>内容过滤选择器</h1>
 
    <button>提交订单</button>
    <button>Submit注册信息</button>
    <button>马上提交</button>
    <button>清空重填</button>
 
    <hr />
    <div class="alert"></div>
    <div class="alert">
      <span class="close">×</span>
    </div>
 
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //选择包含"提交"二字的按钮，变为绿色按钮
    $("button:contains(提交)").css("background-color", "green");
    //选中包含.close按钮的.alert元素，让它们变为红色的警告框
    $(".alert:has(.close)").css("background-color", "red");
    //选中不包含.close按钮的.alert元素，让它们变为绿色的警告框
    $(".alert:not(:has(.close))").css("background-color", "green");
    //选择内容为空的.alert元素，添加红色阴影
    $(".alert:empty").css("box-shadow", "0 0 10px red");
    //选择内容不为空的.alert元素，添加绿色阴影
    $(".alert:parent").css("box-shadow", "0 0 10px green");
  </script>

4. 可见性过滤（jQuery专属）

根据元素是否可见来选择元素；

:visible	选择可见的元素
:hidden	选择不可见的元素

举例：使用 :hidden 选择不可见的元素；

<body>
  <div class="container">
    <h1>可见性选择器</h1>
 
    <div id="d1" style="display: none">lorem</div>
    <div id="d2" style="visibility: hidden">lorem</div>
    <div id="d3" style="opacity: 0">lorem</div>
    <input id="d4" type="hidden" name="aa" value="bb" />
 
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    console.log($('div.container>:hidden'))
  </script>
</body>

5. 表单元素过滤选择器（jQuery专属）

根据表单元素的类别不同来选择不同的表单元素。

:input

专门选择4大类表单元素(input, select, textarea, button)

:text	选择type="text"的普通文本框
:password	选择type="password"的密码框
:checkbox	选择type="checkbox"的复选框
:radio	选择type="radio"的单选按钮

举例：点同意时启用元素，不同意则禁用元素；

<body>
	<form>
		用户名:<input disabled></br>
		密码:<input type="password" disabled></br>
		<input type="checkbox">我同意本站的使用条款<br>
		<input type="submit" value="提交注册信息" disabled />
	</form>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		//DOM 4步
		//1. 查找触发事件的元素
		$(":checkbox")
			//2. 绑定事件处理函数
			.click(function () {
				//3. 查找要修改的元素
				var $others = $(":input:not(:checkbox)")
				//4. 修改元素
				//如果当前checkbox是选中的
				if (this.checked == true) {
					// 则启用其他元素
					$others.prop("disabled", false);
				} else {
					// 否则禁用其他元素
					$others.prop("disabled", true);
				}
			})
	</script>
</body>