一、jQuery 简介

为了简化 JavaScript 的开发，一些 JavsScript 库诞生了。 JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器，jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。

jQuery 是一个兼容多浏览器的、轻量级的 JavaScript 库，其本质就是一个 js 文件。

jQuery，顾名思义，也就是 JavaScript 和查询（Query），其宗旨是write less,do more

jQuery 的使用步骤：

引入 jQuery 的 js 文件
编写文档就绪函数（预加载函数）

二、核心函数的作用

jQuery 的核心函数：**$()或 jQuery()**

核心函数的作用：

1、预加载函数

将匿名函数放在核心函数中，表示一个文档就绪函数（预加载函数）

三种写法：

$(document).ready(function () {})

$().ready(function () {})

// 推荐写法
$(function () {})

文档就绪函数（预加载函数）用来代替 window.onload，它们两个的区别：

文档就绪函数（预加载函数）会在页面中的元素（不包括外部资源，例如图片、音乐、视频）加载完毕之后执行绑定的函数
window.onload 会在页面中的元素（包括外部资源，例如图片、音乐、视频）加载完毕之后执行绑定的函数

2、选择器

将选择器字符串放在核心函数中，表示一个选择器，用来匹配页面中的标签

选择器的格式

$(“选择器”)

jQuery 中选择器不管匹配了几个元素，其返回值都是一个元素数组（jQuery 中独特的数组）

三、选择器

1、基本选择器（css 选择器）

css 选择器	说明
$(“#id”)	通过 id 匹配页面中的元素
$(“.class”)	通过 class 属性匹配页面中的元素
$(“标签名”)	通过标签名匹配页面中的元素
$(“选择器 1,选择器 2,…”)	通过多个选择器匹配页面中的元素，所获取的元素只要符合其中的任何一个选择器即可
$(“*“)	匹配页面所有元素

2、层级选择器

层级选择器	说明
$(“祖先选择器后代选择器”)	匹配给定的祖先元素下所有指定的后代元素
$(“父元素选择器>子元素选择器”)	匹配给定的父元素下所有指定的子元素

3、简单过滤选择器

简单过滤选择器	说明
$(“:first”)	在指定的元素中获取第一个
$(“:last”)	在指定的元素中获取最后一个
$(“:even”)	在指定的元素中获取索引为偶数的元素
$(“:odd”)	在指定的元素中获取索引为奇数的元素
$(“:eq(index)”)	在指定的元素中获取索引等于 index 的元素
$(“:gt(index)”)	在指定的元素中获取索引大于 index 的元素
$(“:lt(index)”)	在指定的元素中获取索引小于 index 的元素

4、表单域过滤选择器

表单域过滤选择器	说明
$(“:input”)	获取所有的表单项（input 标签、textarea、select、button）

5、表单域属性过滤选择器

表单域属性过滤选择器	说明
$(“:checked”)	获取选中的单选框或复选框
$(“:selected”)	获取选中的下拉框中的 option

6、属性选择器

属性选择器	说明
$(“[属性名=’属性值’]”)	获取某个属性等于指定的值的元素

四、jQuery 中的常用方法

1、操作表单项的 value 属性

val()：获取选择器所匹配标签的 value 属性值
val(value)：为选择器所匹配标签的 value 属性赋值

2、操作双标签中的内容

text()：操作双标签中的文本内容，相当于 innerText
html()：操作双标签中的所有内容（包括文本和标签），相当于 innerHTML

3、操作标签的属性

prop()：操作标签的属性，不能操作自定义属性
attr()：操作标签的属性，可以操作自定义属性

4、操作标签的样式

css()：操作标签的样式

5、在页面中动态添加标签

append()：在选择器所匹配的标签内部追加元素
prepend()：在选择器所匹配的标签内部前置元素
after()：在选择器所匹配的标签外部追加元素
before()：在选择器所匹配的标签外部前置元素

6、删除页面中的标签

remove()：删除选择器所匹配的标签
empty()：清空选择器所匹配标签内部所有内容

7、获取唯一父元素

parent()：获取选择器匹配的标签的唯一父元素

五、事件

1、事件流模型

冒泡型事件流：由内向外触发事件
捕获型事件流：由外向内触发事件

大部分的浏览器都是冒泡型事件流

2、jQuery 绑定事件

$(“选择器”).事件方法(function(){});

3、on

$(“选择器”).事件方法(function(){})

此方式只能为页面中原有的标签或者已经加载的标签绑定事件，若标签是之后添加到页面中的，使用此方式就不能成功绑定事件

此时可以使用 on()解决问题

$(“范围”).on(“事件类型”,”绑定事件的元素的选择器”,function(){});

// 为div中所有的button按钮绑定点击事件，哪怕这个按钮是后面添加进去的
$('div').on('click', ':button', function () {
  alert('button')
})

六、注意

1、页面中的隐藏元素

head 以及 head 中所有的内容
表单项隐藏域：<input type=”hidden”>
样式设置为 display:none 的元素
样式设置为 visibility: hidden 的元素

但是通过 jQuery 中的选择器：hidden 不能获取样式设置为 visibility: hidden 的元素

2、jQuery 中大部分的常用方法，若 jQuery 选择器获取的元素有多个，则取值的操作只能获取第一个匹配的元素的值。但是赋值和绑定事件的操作却可以作用于选择器所匹配的所有的元素

若需要对选择器所获取的元素数组中的每一个元素进行操作，可以使用 map 或 each

$(':text').map(function () {
  // $(this)表示元素数组中的每一个元素
  alert($(this).val())
})
$(':text').each(function () {
  // $(this)表示元素数组中的每一个元素
  alert($(this).val())
})