jquery选择器

最新推荐文章于 2024-09-05 16:56:18 发布

晓小新

最新推荐文章于 2024-09-05 16:56:18 发布

阅读量242

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44213625/article/details/107996459

版权

3.1 jQuery简介
（1）众所周知，jQuery是JavaScript的程序库之一，它是JavaScript对象和实用函数的封装。
选择jQuery的原因：
*使用jQuery可以大大减少代码量
*使用jQuery不存在浏览器兼容性问题
(当然现在VUE比他牛逼)
（2）jQuery是由美国人John Resig于2006年创建的开源项目。
jQuery的用途：
1）访问和操作DOM元素
2）控制页面样式
3）对页面事件的处理
4）方便的使用jQuery插件
5）于Ajax技术的完美结合
（3）jQuery的优势
1）轻量级
2）强大的选择器
3）出色的DOM封装
4）可靠的事件处理机制
5）出色的浏览器兼容性
6）隐式迭代
7）丰富的插件支持
3.2 jQuery语法

<script>
$(document).ready(function(){
alert(“我欲奔赴沙场征战jQuery，势必攻克之”)；
})
</script>

代码中$(document).ready()语句中的ready()方法类似于传统JavaScript中的onload()方法，它是jQuery中页面载入事件的方法
两者在功能实现上可以互换，但两者之间又存在一些区别，如下表：

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

3.2.1 语法结构

$(selector).action(); （1）工厂函数$()
**在jQuery中美元符号”$”等价于jQuery，即$()=jQuery()。$()的作用是讲DOM对象转化为jQuery对象，只用将DOM对象转化为jQuery对象后，才能使用jQuery的方法。**

（2）选择器selector
jQuery支持CSS1.0到CSS3.0几乎所有的选择器，如标签选择器、类选择器、ID选择器和后代选择器。
语法格式如下：

$(selector)
ID选择器、标签选择器、类选择器的用法如下所示：
$(“#userName);   //获取DOM中id为userName的元素
$(“div”);  //获取DOM中所有的div元素
$(“.content”);  //获取DOM 中class为content的元素

（3）方法action()
在jQuery中，许多基础的事件，如鼠标事件、键盘事件和表单事件等，都可以通过这些事件处理方法进行绑定，对应的在jQuery中分别写作click()、mouseover()和mouseout()等。
3.2.2 jQuery程序的代码风格
（1）“$”的使用
无论是页面元素的选择器，还是功能函数的前缀，都必须使用该符号，它是jQuery的标志，即$等同于jQuery。
（2）链式操作
在对DOM元素进行多个操作时，为了避免过度使用临时变量或书写不必要的重复代码，在大多数jQuery代码中采用了一种链式变成模式。它可以对一个对象进行多重操作，并将操作结果返回给该对象，以便于将结果应用于该对象的下一次操作。
（3）隐式迭代
在jQuery的代码编写中，除了链式操作外，还有一种方式，即隐式迭代。

（4）添加注释
下面对不同开发阶段注释的处理给出如下建议：
*开发阶段：为代码添加注释，可以增加代码的可读性，便于后期维护
*维护阶段：建议把关键的模块形成开发文档，
*产品正式发布：建议删除注释，减少文件大小，加快下载速度，提高用户体验。

3.3 DOM对象和jQuery对象
3.3.1 DOM对象
每一个HTML页面中，都具有一个DOM，每一个DOM都可以表示成一棵树。
在JavaScript中，可以使用getElementsByTagName()和getElementById()来获取元素节点，通过该方法得到的DOM元素就是DOM对象，DOM对象可以使用JavaScript中的方法。
3.3.2 jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
3.3.3 jQuery对象和DOM对象的相互转换
（1）jQuery对象转换成DOM对象
有两种方法：
①jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
代码如下：

var $txtName=$(“#txtName”);   //jQuery对象
var xtNmae=$txtName[0];  //DOM对象
Alert(txtName.checked)   //检查这个checked是否被选中了

②通过get(index)方法得到相应的DOM对象

var $txtName=$(“#txtName”);   //jQuery对象
var xtNmae=$txtName.get(0);  //DOM对象
Alert(txtName.checked)   //检查这个checked是否被选中了

（2）DOM对象转换成jQuery对象
对于一个DOM对象，只需要用$()函数将DOM对象包装起来，就可以获得jQuery对象，其方式为$(DOM对象)
jQuery代码如下：

var txtName=document.getElementById(“txtName”);  //DOM对象
var $txtName=$(txtName);  //jQuery对象

转换后可以任意使用jQuery中的方法

3.4 jQuery选择器
3.4.1什么是jQuery选择器
jQuery选择器良好的继承了CSS选择器的语法，还继承了其获取页面元素便捷高效的特点。与CSS选择器不同之处在于，jQuery选择器获取元素后，为该元素添加的是行为，能使页面交互变得更加丰富多彩。
此外，jQuery选择器拥有良好的浏览器兼容性。
3.4.2 jQuery选择器的优势
（1）简洁的写法
（2）完善的处理机制
（3）jQuery选择器的类型
具体类型如下：
通过CSS选择器获取元素
*基本选择器
*层次选择器
*属性选择器
通过过滤选择器选择元素
*基本过滤选择器
*可见性过滤选择器

3.5通过CSS选择器获取元素
3.5.1基本选择器
基本选择器的详细说明如下所示：

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

3.5.2 层次选择器
层次选择器的详细说明如下所示：

名称	语法构成	描述	示例
后代选择器	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元素之后的所有sibings元素	$(“h2~dl”)选取`<h2>`元素之后所有的同辈元素`<dl>`

3.5.3属性选择器
属性选择器的详细说明如下所示：

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$("[href]")选取含有href属性的元素
[attribute]=value	选取等于给定属性是某个特定值的元素	$("[href=’#’]")选取href属性值为#的元素
[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(“href !=’#’”)选取href属性值不为#的元素
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$("[href^=‘en’]")选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	`$`("[href`$`=’.jpg’]")选取href属性值以,jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$("[href*=‘text’]") 选取href属性值中含有text的元素

3.6 通过条件过滤选取元素
3.6.1 基本过滤选择器
基本过滤选择器的详细说明如下：

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