本文小編為大家詳細(xì)介紹“jquery基本選擇器有哪些”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“jquery基本選擇器有哪些”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),張家港企業(yè)網(wǎng)站建設(shè),張家港品牌網(wǎng)站建設(shè),網(wǎng)站定制,張家港網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,張家港網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿,時(shí)刻以成就客戶成長(zhǎng)自我,堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
有5個(gè)基本選擇器:1、ID選擇器,根據(jù)ID匹配元素,語(yǔ)法“$("#id值")”;2、元素選擇器,根據(jù)元素名匹配元素,語(yǔ)法“$("元素名")”;3、類選擇器,根據(jù)類來(lái)匹配元素,語(yǔ)法“$(".類名")”;4、通配符“*”選擇器,匹配所有元素等。
本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。
基本選擇器是jQuery中使用最多的選擇器,jquery有5個(gè)基本選擇器:
選擇器 | 功能描述 |
---|---|
ID選擇器 #id | 根據(jù)給定的ID匹配一個(gè)元素 |
元素(標(biāo)簽)選擇器 element | 根據(jù)給定的元素名匹配所有元素 |
類選擇器 .class | 根據(jù)給定的類匹配元素 |
通配符 * 選擇器 | 匹配所有元素 |
并集選擇器 selector1,selector2,...,selectorN | 將每一個(gè)選擇器匹配到元素合并后一起返回 |
1、#id 選擇器:
jQuery #id 選擇器通過(guò) HTML 元素的 id 屬性選取指定的元素。
頁(yè)面中元素的 id 應(yīng)該是唯一的,所以您要在頁(yè)面中選取唯一的元素需要通過(guò) #id 選擇器
舉例:使用 #id 選擇器選擇 id="myDiv1"的元素,將其隱藏。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("#myDiv1").hide(); }); }); </script> </head> <body> <button type="button">點(diǎn)擊</button> <p>p元素1</p> <p>p元素2</p> <div id="myDiv1">Hello</div> </body> </html>
2、元素選擇器:
jQuery 元素選擇器基于元素名選取元素。
舉例:使用元素選擇器選擇所有<p>元素,將其隱藏。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <button type="button">點(diǎn)擊</button> <p>p元素1</p> <p>p元素2</p> <div id="myDiv1">Hello</div> </body> </html>
3、.class 選擇器:
jQuery 類選擇器可以通過(guò)指定的 class 查找元素。
舉例:使用類選擇器選擇Class=“myClass1”的元素,將其隱藏。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript" > $(function(){ $("button").click(function(){ $(".myClass1").hide(); }); }); </script> </head> <body> <button type="button">點(diǎn)擊</button> <p>p元素1</p> <p>p元素2</p> <div id="myDiv1">Hello</div> <div Class="myClass1">你好</div> </body> </html>
4、通配符選擇器*
jQuery 通配符選擇器可以用來(lái)選擇所有元素,,也可以選擇某個(gè)元素下的所有元素;
舉例:給所有元素添加樣式,讓字體變紅
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function() { $("button").click(function() { $("*").css("color", "red"); }); }); </script> </head> <body> <button type="button">點(diǎn)擊</button> <p>p元素1</p> <p>p元素2</p> <div id="myDiv1">Hello</div> <div Class="myClass1">你好</div> </body> </html>
5、并集選擇器
當(dāng)幾個(gè)元素樣式屬性一樣時(shí),可以共同調(diào)用一個(gè)聲明,元素之間用逗號(hào)分隔。群組選擇器是將具有相同樣式的元素分組在一起,每個(gè)選擇器之間使用逗號(hào)“,”隔開,這個(gè)逗號(hào)告訴瀏覽器,規(guī)則中包含多個(gè)不同的選擇器,如果不有這個(gè)逗號(hào),那么所表達(dá)的意就完全不同了,省去逗號(hào)就成了我們前面所說(shuō)的后代選擇器,這一點(diǎn)大家在使用中千萬(wàn)要小心加小心。
示例:將p和span元素的字體顏色設(shè)置為紅色
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Test JQuery</title> <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $(function() { $("button").click(function() { $("p,span").css("color", "red"); }); }); </script> </head> <body> <button type="button">點(diǎn)擊</button> <p>p元素</p> <span>span元素2</span> <div id="myDiv1">Hello</div> <div Class="myClass1">你好</div> </body> </html>
讀到這里,這篇“jquery基本選擇器有哪些”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁(yè)題目:jquery基本選擇器有哪些
瀏覽路徑:http://muchs.cn/article28/pgojcp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、虛擬主機(jī)、Google、網(wǎng)站制作、微信小程序
聲明:本網(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)