jQuery选择器

一、jQuery的安装与介绍

1.jQuery的引入方式

(1) 离线引入
(2) CDN引入
例如:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

注：CDN的全称是Content Delivery Network，即内容分发网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术
将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

(3) npm安装 (npm install jquery)
注：NPM（node package manager),通常称为node包管理器，主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。NPM是基于couchdb一个数据库，详细记录了每个包的信息（作者、版本、依赖、授权信息等）

2.jQuery的介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

• 在jQuery中，通常使用$代替jQuery
• jQuery是个函数

3.JS onload 事件与jQuery文档载入事件（ready）的比较

• JS onload 事件:
• 1.在整个页面、只允许被注册一次
• 2.在所有的DOM元素加载完成后、才会触发
• 3.实现页面的初始化工作

HTML代码

<p id="p1">奇酷</p>	

JS代码

window.onload = function(){
   	let p1 = document.querySelector("#p1")
	console.log(p1.innerHTML)
 }
 
 /**
  * 结果为：
   	奇酷
  */

• jQuery文档载入事件（ready）特点
• 1.在整个页面中 允许被注册多次
• 2.在DOM结构加载完成后触发
• 3.实现页面的初始化工作

HTML代码

<p id="p1">奇酷</p>	

jQuery 代码:

$(document).ready(function(){  //  简写====$(function(){})    回调函数
 	let p1 = document.querySelector("#p1")
 	console.log(p1.innerHTML)
 })
 $(document).ready(function(){  //回调函数
 	console.log(你好)
 })
 /**
  * 结果为：
   	奇酷
   	你好
  */

注： 在 jQuery框架中， 做初始化的 JS 代码， 推荐放到 ready事件中，以保证 绝对能够操作DOM

4.js 对象和 jQuery对象的转换

• 将 jQuery 对象 转成 JS 对象
  (1)通过 索引 访问 jQuery 对象、返回 JS 对象 即（$tag[0]）(2)通过jQuery对象的get方法，获取JS对象即（$tag.get(index)）
• get() 如果不传入任何参数、会获取 选择器选中的所有元素、并返回一个数组对象
• get(index) : 获取选择器 选中的 第 index个元素、index 从0开始

HTML 代码

<div id="main">
			hello 
		</div>

jQuery 代码:

$(function() {
	let $tag = $("#main")
	console.log($tag[0])
	console.log($tag.get(0))
})
/**
 * 结果为
	<div id="main">
				hello 
			</div>
 */

• 将 JS 对象 转成 jQuery 对象

HTML 代码

<div id="main">
			hello 
		</div>

jQuery 代码:

$(function() {
	let tag = document.querySelector("#main") ;
	let text = $(tag).text();
	console.log(text)
})
/**
 * 结果为：
	hello
 */

二、jQuery的选择器

1.基本选择器

选择器	描述	示例
element	直接使用标签名 作为选择器的名字	$(“div”)
#id	根据标签的id属性值进行选择、只能选中一个元素	$("#id")
.class	选择给定样式类名的所有元素	$(".class")
*	匹配所有元素	$("*")
selector1,selector2,selectorN	将每一个选择器匹配到的元素合并后一起返回	$(“selector1,selector2,selectorN”)

2.属性选择器

选择器	描述	示例
[attr]	根据属性名选择元素	$("[attr]")
[attr=val]	根据属性=val 选取元素	$("[attr=‘val’]")
[attr!=val]	对 [attr=val] 取反	$("[attr!=‘val’]")
[attr^=val]	选中 attr 以 val 开头的元素	$("[attr^=‘val’]")
[attr$=val]	选中 attr 以 val 结尾的元素	$("[attr$=‘val’]")
[attr*=val]	选中 attr 的值 中 包含 val 的元素	$("[attr*=‘val’]")
[attr	=val]	选中 attr = val 或者 attr 以 val- 开头的属性
[attr~=val]	选择指定属性用空格分隔的值中包含一个给定值的元素	$("[attr~=‘val’]")
[][]	and 两个属性选择器必须同时满足	$("[][]’]")

3.层级选择器

选择器	描述	示例
ancestor descendant	多个选择器，以 空格 进行分割	$(“ancestor descendant”)
parent > child	多个选择器， 以 > 进行分割	$(“parent > child”)
prev + next	以 + 进行分割、选中 紧邻的 兄弟元素	$(“prev + next”)
prev ~ siblings	以 ~ 进行分割、选中 后面的所有兄弟元素	$(“prev ~ siblings”)
element1,element2,element3	以 逗号 进行分割、 同时选中多个元素	$(“element1,element2,element3”)

4.子选择器

选择器	描述	示例
:first-child	选择所有父级元素下的第一个子元素	$(":first-child")
:first-of-type	选择所有相同的元素名称的第一个兄弟元素。	$(":first-of-type")
:last-child	选择所有父级元素下的最后一个子元素	$(":last-child")
:last-of-type1	选择的所有元素之间具有相同元素名称的最后一个兄弟元素	$(":last-of-type1")
:nth-child(n)	选择的他们所有父元素的第n个子元素	$(":nth-child(n)")
:nth-last-child(n	even	odd
:nth-of-type(index/even/odd/equation)	选择同属于一个父元素之下，并且标签名相同的子元素中的第n个	$(":nth-of-type(index/even/odd/equation)")
:only-child	如果某个元素是其父元素的唯一子元素，那么它就会被选中	$(":only-child")

注：n从1开始

5.其他选择器

(1).基本选择器

选择器	描述	示例
:first	获取选择器 选中的多个元素中的 第一个/最后一个元素	$(":first")
:last	获取选择器 选中的多个元素中的 最后一个元素	$(":last")
:eq(index)	选中指定索引位置的元素	$(":eq(index)")
:lt(index)	选中索引值小于给定index参数的元素	$(":lt(index)")
:gt(index)	选择匹配集合中所有大于给定index（索引值）的元素	$(":gt(index)")
:not(selector)	选择所有元素去除不匹配给定的选择器的元素	$(":not(selector)")
:odd	选择索引值为奇数元素，从 0 开始计数	$(":odd")
:even	选择所引值为偶数的元素，从 0 开始计数	$(":even")
:focus	选择当前获取焦点的元素	$(":focus")
:target	获取URL对应的锚点的元素	$(":target")

注：index从0开始

(2).内容选择器

选择器	描述	示例
:contains(text)	获取 选中的元素中 包含 指定的文本 元素	$(":contains(text)")
:empty	选择所有没有子元素的元素（包括文本节点）	$(":empty")
:has(selector)	查找元素中是否包含 指定选择器的元素	$(":has(selector)")
:parent	选择所有含有子元素或者文本的父级元素	$(":parent")

(3).可见性选择器

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

注：可以处理 display:none； 可以处理 input:hidden；
内容不可见的标签，例如 script, style, title, meta

(4).表单对象属性选择器

选择器	描述	示例
:enabled	获取所有被启用的元素	$(":enabled")
:disabled	选择所有被禁用的元素	$(":disabled")
:checked	匹配所有勾选的元素	$(":checked")
:selected	获取被选中的元素	$(":selected")

(5).混淆选择器

选择器中的特殊字符 # ， . + > ~ \

• 如果 ID , class 属性的值 中包含 特殊字符，需要对特殊字符进行转义 , 例如 \#

HTML 代码

<div class="box1">span class=".box"</div>
<div class="box2">span class=".box"</div>
<div class=".box">span class=".box"</div>

jQuery 代码:

$(function(){
	let $tag = $(".\\.box")
	console.log($tag)
	
})
/**
 * 结果为
 <div class=".box">span class=".box"</div>
 */

• $.escapeSeletor(selector) 对存在特殊字符的内容进行转义 返回转义后的结果

HTML 代码

<div class="notMe">div class="notMe"</div>
<div class=".box myClass">div class=".box myClass"</div>
<div class=".box">span class=".box"</div>

jQuery 代码:

$(function(){
	let $tag = $(".\\.box")
	console.log($tag)
	
})
/**
 * 结果为
 <div class=".box">span class=".box"</div>
 */

x myClass"

span class=".box"

``` jQuery 代码: ```js $(function(){ let $tag = $(".\\.box") console.log($tag)

})
/**

• 结果为

span class=".box"

*/ ``` ### 今日的分享希望对君有所帮助，如有不懂可以联系！！