一、jQuery简介与选择器

---

---

前言

---

1、jQuery简介

j

• jQuery由美国人John Resig于2006年创建

• jQuery是目前最流行的JavaScript程序库，它是对JavaScrip t对象和函数的封装

• 它的设计思想是write less,do more

1.1 jQuery能做什么

1. 访问和操作DOM元素
2. 控制页面样式
3. 对页面事件进行处理
4. 扩展新的jQuery插件
5. 与Ajax技术完美结合

1.2 jQuery的优势

1. 体积小，压缩后只有100KB左右
2. 强大的选择器
3. 出色的DOM封装
4. 可靠的事件处理机制
5. 出色的浏览器兼容性
6. 使用隐式迭代简化编程
7. 丰富的插件支持

1.3 jQuery库文件

jQuery库分开发版和发布版

名称	大小	说 明
jquery-3.版本号.js（开发版）	约286KB	完整无压缩版本，主要用于测试、学习和开发
jquery-3.版本号.min.js（发布版）	约94.8KB	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

1.3.1导入方法

• 在页面中引入jQuery

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

• CDN导入

百度 CDN<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
新浪 CDN: <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
Google CDN:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2、jQuery基本语法

$(document).ready()
	$(document).ready()与window.onload类似，但也有区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){

//执行代码
}) ;

3、jQuery选择器

jQuery 语法

• jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作
• 基础语法是：$(selector).action()

3.1 jQuery基本选择器

• 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素
全局选择器	*	匹配所有元素	$("*" )选取所有元素

3.2 jQuery层次选择器

• 层次选择器通过DOM 元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有descendant（后代）元素	$("#menu span" )选取#menu下的<span>元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取#menu的子元素<span >
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl>
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl>

3.3 jQuery属性选择器

• 属性选择器通过HTML元素的属性来选择元素

语法构成	描述	示例
[attribute^=value]	选取给定属性是以某些特定值开始的元素 $(" [href^=‘en’]" )	选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素 $("[href$=’.jpg’]" )	选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素

3.4 过滤选择器

3.4.1 基本过滤选择器

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的 元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的 元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的 元素（注：小于1，不包括1）
:header	选取所有标题元素，如h1~h6	$(":header" )选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(":focus" )选取当前获取焦点的元素
:animated	选择所有动画	$(":animated" )选取当前所有动画元素
:first	选取第一个元素	$(" li:first" )选取所有 元素中的第一个 元素
:last	选取最后一个元素	$(" li:last" )选取所有 元素中的最后一个 元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(" li:not(.three)" )选取class不是three的元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有 元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有 元素

3.4 可见性过滤选择器

通过元素显示状态来选取元素

语法	描述	示例
:visible	选取所有可见的元素	$(":visible" )选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden" ) 选取所有隐藏的元素

示例

$("p:hidden").show();
$("p:visible").hide();

3.4 jQuery选择器注意事项

3.4.1特殊符号的转义

<div id="id#a">aa</div>	<div id="id[2]">cc</div>

获取这两个元素的选择器

$("#id#a"); 	错误

$("#id[2]"); 	错误

jQuery使用\\对特殊字符的转义

$("#id\\#a");		ok

$("#id\\[2\\]");	ok

3.4.3 选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

示例

var $t_a = $(".test :hidden"); //带空格的jQuery选择器——选取class为“test”的元素内部的隐藏元素

var $t_b = $(".test:hidden");  //不带空格的jQuery选择器——选取隐藏的class为“test”的元素