介绍
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")