這篇文章主要介紹JavaScript知識(shí)點(diǎn)總結(jié)之 jQuery常用選擇器和過濾選擇器怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專業(yè)從事網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè),高端網(wǎng)站制作設(shè)計(jì),成都微信小程序,網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠服務(wù)，采用html5+CSS3前端渲染技術(shù)，成都響應(yīng)式網(wǎng)站建設(shè)公司，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動(dòng)，隨時(shí)提供解決方案，暢聊想法和感受。

jQuery常用選擇器和過濾選擇器

使用方法
下載Jquery文件庫，保存在站點(diǎn)js文件夾中，使用script標(biāo)簽引入，放在head標(biāo)簽內(nèi)
window.οnlοad=function()可簡(jiǎn)化為$(function)

window.οnlοad=function(){ … 頁面加載事件 }
$(function){ …頁面加載事件 }
下面的是上面的簡(jiǎn)化方式

jQuery的選擇器

1. 基本選擇器

$("#id")  ：id選擇器 
	$("p") ：p選擇器	$(".class") ：類選擇器	$(".class,.class2,#id") ：組合選擇器

2. 層次選擇器

$("#id>.class") ：子元素選擇器$("#id .class") ：后代選擇器$("#id+.class") ：緊鄰下一個(gè)元素選擇器$("#id~.class") ：兄弟元素選擇器

3. 表單選擇器

$(":input")//獲取inpu。textarea，select，button元素$(":text")//所有的單行文本框$(":text")等價(jià)于$("[type=text]")，推薦使用$("input:text")效率更高$(":password") //獲取type=password的input元素$(":radio") //獲取type=radio的input元素$(":checkbox") //獲取type=checkbox的input元素$(":submit") //獲取type=submit的input元素$(":reset") //獲取type=reset的input元素$(":button") //獲取type=button的input元素$(":file") //獲取type=file的input元素$(":image") //獲取type=image的input元素

jQuery的過濾器
過濾器使用 ：開頭

1. 基本過濾選擇器

$("Ii:first") ：第一個(gè)li 	
$("li:last") ：最后一個(gè)li   
$("li:even") ：挑選 下標(biāo)為偶數(shù)的li  
$("li:odd") ：挑選 下標(biāo)為奇數(shù)的li  
$("Ii:eq(4)") ：下標(biāo)等 于4的li(第五個(gè)li元素)$("Ii:gt(2)") ：下標(biāo)大于 2的li  
$("li:lt(2)") ：下標(biāo)小于 2的li$("Ii:not(#runoob)") ：挑選除id="runoob"以外的所有l(wèi)i$("Ii:header") ：所有標(biāo)題元素$("Ii:animated") ：正在執(zhí)行動(dòng)畫效果的元素

2. 內(nèi)容過濾選擇器

$("li:contains(text)") ：含有文本內(nèi)容為text的元素$("li::empty")：獲取不包含后代元素或者文本的空元素$("li::has(selector)")：獲取含有后代元素為selector的元素$("li::parent")：獲取含有后代元素或者文本的非空元素

3. 可見性過濾器

$("li:hidden") ：隱藏li元素$("li:visible") ：顯示li元素

4. 屬性過濾選擇器

$("li[title]") ：獲取所有屬性包括title的li元素$("p[id^='qq']") ：id屬性值以qq開頭的p元素$("p[id*='bb'") ：id屬性值包含bb的p元素$("li[title=text2]") ：li屬性值等于text2的元素$("p[id!='aa'") ：id屬性值不等于aa的p元素$("p[id$='z']") ：id 屬性值以zz結(jié)尾的p$("input[id][name$='man']")：多屬性選過濾，同時(shí)滿足兩個(gè)屬性的條件的元素

5. 表單對(duì)象屬性過濾選擇器

$("input:enabled") ：選取可用的表單元素$("input:disabled") ：選取不可用的表單元素$("input:checked") ：選取被選中是input元素$("input:selected") ：選取被選中的option元素

jQuery操作DOM

生成jquery對(duì)象

var obj=$("#content")

獲取或設(shè)置元素內(nèi)部的HTML代碼

var obj=$("#content")；
obj.html("jQuery對(duì)象")

DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象

<script type="text/javascript">
		var $text=$(document.getElementsByTagName("li"));
		alert($text.eq(0).html());//獲取第一個(gè)li里的值
		alert($text.eq(1).html());//獲取第二個(gè)li里的值</script>

jQuery使用DOM操作元素

單個(gè)屬性語法 jQuery對(duì)象.css(name,value)：name為樣式名稱，value為樣式值 同時(shí)設(shè)置多個(gè)屬性語法
jQuery對(duì)象.css{(name:value,name:value,name:value…)}：name為樣式名稱，value為樣式值

jQuery使用DOM操作元素增加類樣式，刪除類樣式，切換不同類樣式

jQuery對(duì)象.addaClass(class)
jQuery對(duì)象.removeaClass(class)
jQuery對(duì)象.toggleClass(class)

jQuery使用DOM操作元素內(nèi)容和值的操作

jQuery對(duì)象.html()：用于獲取第一個(gè)匹配元素的HTML內(nèi)容或文本內(nèi)容
jQuery對(duì)象.html(content)：用于設(shè)置所有匹配元素的HTML內(nèi)容或文本內(nèi)容
jQuery對(duì)象.text()：用于獲取所有匹配元素的文本內(nèi)容
jQuery對(duì)象.text(content)：用于設(shè)置所有匹配元素的文本內(nèi)容
jQuery對(duì)象.val()：用于獲取或設(shè)置元素的值
jQuery對(duì)象.attr(name)：用于獲取元素的屬性值
jQuery對(duì)象.attr(name，value)：用于設(shè)置元素的屬性值
jQuery對(duì)象.attr(name，function（index）)：綁定function函數(shù)，通過該函數(shù)返回值作為元素的屬性值
jQuery對(duì)象.removeAttr(name)：用于刪除元素的屬性值

jQuery使用DOM操作節(jié)點(diǎn)
$(html):創(chuàng)建html的jQuery對(duì)象

eg:$("<a href='http://www.baidu.com'></a>").appendTo(p)

a.append(b):a里添加b

eg:$("ul").append("li"):a里添加b

a.appendTo(b):a添加到b

eg:$li.appendTo("ul"):a添加到b

a.prepend(b)：將b前置插入到a中

eg:	$("ul").prependTo("li")

a.prependTo(b)：將a前置插入到b中

eg:	$li.prependTo("ul")

a.after(b):將b插入到a之后

eg:	$("ul").after($p)

a.insertAfter(b):將a插入到b之后

eg:	$p.insertAfter("ul")

a.before(b):將b插入到a之前

eg:	$("ul").before($p)

a.insertBefore(b):將a插入到b之前

eg:	$p.insertBefore("ul")

a.replaceWith(b)：把a(bǔ)替換為b

eg:	$("li").replaceWith("ol")

a.replaceAll(b)：用b替換a

eg:	$("ol").replaceAll("li")

a.clon(ture)：把a(bǔ)復(fù)制

eg:	$("ol").clon(ture)

a.remove(a)：刪除a

eg:	$("ul li").remove()//刪除ul下的所有l(wèi)i
	$("ul li").remove("li li:last")//刪除ul下的最后一個(gè)li

jQuery對(duì)象.each（callback）：遍歷元素

 <html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type-"text/javascript">
			$(function(){
				$("input[type='button']"). click(function(){
					$("img").each(function(index, element){
						//jQuery對(duì)象
						//$(this).css("border","2px solid red");
						//$(this).attr("title"," 第 "+(index+1)+"副風(fēng)景畫");
						//DOM對(duì)象
						this.style.border="2px solid red";
						this.title="第"+(index+1)+"幅風(fēng)景畫";
					});
				});
			});

		</script></head><body>
	<p>
		<img src=".../img/img1.jpg"/> &nbsp;&nbsp;
		<img src=".../img/img2.jpg'/>
	</p>
	<input type="button" value="添加邊框"/></body></body>	</html>

動(dòng)畫與特效

• show()：顯示

• hide()：隱藏

• toggle()：切換

• fadeIn()：淡入

• fadeOut()：淡出

• fadeToggle()：切換淡出淡入

• fadeTo()：指定淡入淡出透明度值

• slideDown()：滑入

• slideUp()：滑出

• slideToggle()：切換滑入滑出

• animate()：自定義動(dòng)畫

• stop()：停止

移動(dòng)位置代碼如圖：
自定義動(dòng)畫代碼如圖

以上是“JavaScript知識(shí)點(diǎn)總結(jié)之 jQuery常用選擇器和過濾選擇器怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：JavaScript知識(shí)點(diǎn)總結(jié)之jQuery常用選擇器和過濾選擇器怎么用
文章來源：http://jinyejixie.com/article22/jjpicc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、做網(wǎng)站、定制網(wǎng)站、網(wǎng)站收錄、網(wǎng)站營銷、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)