jQuery详解

介绍

jQuery

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单

jQuery最大的优点就是简化DOM操作

jQuery版本说明

jQuery分为三个大版本：1.x 2.x 3.x

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插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0

min.js文件与js文件

js文件是JavaScript源码文件，min.js是压缩版的js文件，二者在功能上完全一致

$

$就是jQuery的缩写，他就代表了jQuery

引入

网址

https://www.jq22.com/jquery/jquery.html

引入jQuery【下面是各种版本】

<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>

<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>

选择器

基础选择器

元素选择器

选择span标签

$("span").html("jQuery元素选择器")

类选择器

选择class属性为box的元素

$(".box").html("jQuery类选择器")

Id选择器d

选择id为it的元素

$("#it").html("jQuery id选择器")

子代选择器（内一层子代）

选择class为topnav中的直接子元素li，对更深一层的元素不起作用

$(".topnav > li").css("border", "3px double red");

后代选择器（所有子代）

选择class为topnav中的所有子元素li

$(".topnav li").css("border", "3px double red");

属性选择器

name: 选中的属性

value: 属性值

完美匹配 [name="value"]

选择class为jia的input标签

$('input[class="jia"]').val('jiakewei')

包含 [name*="value"]

选择class包含j的input标签

$('input[class*="j"]').val('study!');

空格分割后包含 [name~="value"]

选择class中用空格分隔的值中包含jkw的input标签

$('input[class~="jkw"]').val('study!');

前缀 [name|="value"]

选择alt属性值前缀【或-连接符前面】为jia的a标签

$('a[alt|="jia"]').css('border', '3px solid green');

开头  [name^="value"]

选择name是以jkw开始的input标签

$('input[name^="jkw"]').val('study!');

结尾 [name$="value"]

选择name是以jkw结尾的input标签

$('input[name$="jkw"]').val('study!');

索引选择器

索引index下标计算是从0开始的

准确索引 :eq(index)

匹配第二个li元素

$("li:eq(2)").css("border","2px solid red")

偶数索引 :even

索引index下标计算是从0开始的，所以:even选择器是选择1,3,5.......的li

$("li:even(2)").css("border","2px solid red")

奇数索引 :odd

索引index下标计算是从0开始的，所以:odd选择器是选择2,4,6.......的li

$("li:odd(2)").css("border","2px solid red")

第一个元素 :first

选择第一个匹配的li

$("li:first").css("border","2px solid red")

最后一个元素 :last

选择最后一个匹配的li

$("li:last").css("border","2px solid red")

大于给定索引 :gt(index)

匹配索引值大于4的li元素

$("li:gt(4)").css("border","2px solid red")

小于给定索引 :lt(index) 

匹配索引值小于4的li元素

$("li:lt(4)").css("border","2px solid red")