您好,登錄后才能下訂單哦!
對比選擇:
1. CSS依靠CSS選擇器使得網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)樣式完全分離,CSS選擇器能輕松定位并修改指定元素樣式,CSS選擇器包括標(biāo)簽選擇器(以文檔元素作為選擇器),ID選擇器(以文檔元素的唯一標(biāo)識ID作為選擇器),類選擇器(以文檔元素的class作為選擇器),群組選擇器(多個選擇器應(yīng)用同樣的樣式規(guī)則),后代選擇器(元素X的任意后代元素Y),通配選擇器(以文檔的所有元素作為選擇器),偽類選擇器(以元素特定行為作為選擇器),子選擇器(元素X的直接子屬元素Y),兄弟選擇器(元素X的直屬兄弟元素Y),屬性選擇器(以文檔元素特定屬性為選擇器),詳情參考(http://www.w3school.com.cn/css/css_selector_type.asp)
2. jQuery選擇器完全繼承了CSS選擇器的風(fēng)格,CSS選擇器能輕松定位并修改指定元素屬性和行為,而無需擔(dān)心瀏覽器是否支持這一選擇器,jQuery的行為規(guī)則都必須在獲取到元素后才能生效
說明: jQuery不僅可以像原生CSS樣修改元素樣式,而且還可以修改元素行為,需要注意的是jQuery中涉及操作CSS樣式的部分比單純的CSS功能更為強(qiáng)大,并且擁有跨瀏覽器的兼容性.
錯誤處理:
說明: 原生JS如果返回的對象不存在則瀏覽器會報錯,如果加if判斷會增加代碼量,而jQuery中$('selector')返回的永遠(yuǎn)是封裝后的jQuery對象,因此不能直接if判斷,也不需要if判斷,如果非要去判斷的話可通過判斷$('selector').length屬性是否大于0或$('selector')[0]轉(zhuǎn)換為DOM對象(其實(shí)是調(diào)用的$('selector').toArray()轉(zhuǎn)換為DOM對象數(shù)組然后再取指定DOM對象的)判斷對象是否存在
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>前端開發(fā)</title> </head> <body> </body> <script src="js/libs/jquery.min.js"></script> <script type="text/javascript"> // 方式一: 通過判斷其length屬性 if ($("body").length > 0){ alert("存在") } // 方式二: 轉(zhuǎn)換為DOM對象判斷是否存在 if ($('body')[0]){ alert("存在") } </script> </html>
JQ選擇器:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>前端開發(fā)</title> <style type="text/css"> div, span, p { width: 200px; height: 200px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; } div.mini { width: 66px; height: 66px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } </style> </head> <body> <h2>just for test</h2> <div class="one" id="one"> id為one,class為one的div <div class="mini">class為mini的div</div> </div> <div class="one" id="two" title="test"> id為two,class為one,title為test的div <div class="mini" title="other">class為mini,title為other的div</div> <div class="mini" title="test">class為mini,title為test的div</div> </div> <div class="one"> class為one的div <div class="mini">class為mini的div</div> <div class="mini">class為mini的div</div> <div class="mini">class為mini的div</div> <div class="mini"></div> </div> <div class="one"> class為one的div <div class="mini">class為mini的div</div> <div class="mini">class為mini的div</div> <div class="mini">class為mini的div</div> <div class="mini" title="test">class為mini,title為test的div</div> </div> <div class="one">style的display為"none"的div</div> <div class="hide">class為"hide"的div</div> <div> 包含input的type為"hidden"的div <input type="hidden" name="name"> </div> <span id="mover">正在執(zhí)行動畫的span</span> </body> </html>
# 基本選擇器
說明: 基本選擇器包括元素選擇器/ID選擇器/類選擇器/通用選擇器/分組選擇器.
<script src="js/libs/jquery.min.js"></script> <script type="text/javascript"> // 改變id為one的元素背景顏色為#bbffaa $("#one").css("background-color", "#bbffaa") // 改變class為mini的元素的背景顏色為#bbffaa $(".mini").css("background-color", "#bbffaa") // 改變所有div元素的背景顏色為#bbffaa $("div").css("background-color", "#bbffaa") // 改變所有元素的背景顏色為#bbffaa $("*").css("background-color", "#bbffaa") // 改變所有span和id為two的元素的背景顏色為#bbffaa $("span, #two").css("background-color", "#bbffaa") </script>
# 層次選擇器
說明: 層次選擇器包括子選擇器/后代選擇器/兄弟選擇器/后續(xù)選擇器.
<script type="text/javascript"> // 改變body里面所有div元素的背景顏色為#bbffaa $("body div").css("background-color", "#bbffaa") // 改變body內(nèi)第一層同級div元素的背景顏色為#bbffaa $("body>div").css("background-color", "#bbffaa") // 改變class為one的后面第一個同級div的背景顏色為#bbffaa $(".one + div").css("background-color", "#bbffaa") // 改變id為two后面所有div元素的背景顏色為#bbffaa $("#two ~ div").css("background-color", "#bbffaa") </script>
擴(kuò)展: 在層次選擇器中子選擇器和后代選擇器比較常用,而兄弟選擇器和后續(xù)選擇器在jQuery中可以用更簡單的方法代替,兄弟選擇器可通過.next("selector")代替,而后續(xù)選擇器可通過.nextAll("selector")代替,需要注意的是.next("selector")和.nextAll("selector")都是基于同級的,還有一個基于同級但是不論前后的兄弟元素獲取方法是.siblings("selector")
# 過濾選擇器
說明: 過濾選擇器包括基本過濾選擇器/內(nèi)容過濾選擇器/可見性過濾選擇器/屬性過濾選擇器/子元素過濾選擇器/表單屬性過濾選擇器.
<script type="text/javascript"> // 基本過濾選擇器 // 改變第一個div元素的背景色為#bbffaa $("div:first").css("background-color", "#bbffaa") // 改變最后一個div元素的背景色為#bbffaa $("div:last").css("background-color", "#bbffaa") // 改變class不為one的元素的背景色為#bbffaa $("div:not(.one)").css("background-color", "#bbffaa") // 改變索引為偶數(shù)的元素的背景顏色為#bbffaa $("div:even").css("background-color", "#bbffaa") // 改變索引為奇數(shù)的元素的背景顏色為#bbffaa $("div:odd").css("background-color", "#bbffaa") // 改變索引等于某值元素的背景顏色為#bbffaa $("div:eq(0)").css("background-color", "#bbffaa") // 改變索引大于某值的元素的背景顏色為#bbffaa $("div:gt(0)").css("background-color", "#bbffaa") // 改變索引小于某值的元素的背景顏色為#bbffaa $("div:lt(1)").css("background-color", "#bbffaa") // 改變所有的標(biāo)題元素(h2~h7)的背景顏色為#bbffaa $(":header").css("background-color", "#bbffaa") // 改變所有正在執(zhí)行動畫的元素的背景顏色為#bbffaa $(":animated").css("background-color", "#bbffaa") // 內(nèi)容過濾選擇器 // 設(shè)置包含文本內(nèi)容為某值的元素背景色為#bbffaa $("div:contains(為)").css("background-color", "#bbffaa") // 設(shè)置不包含任何子元素或文本內(nèi)容的元素背景色為#bbffaa $("div:empty").css("background-color", "#bbffaa") // 設(shè)置包含指定選擇器的元素的元素背景色為#bbffaa $("div:has(div)").css("background-color", "#bbffaa") // 設(shè)置包含有子元素或文本的元素的背景色為#bbffaa(和empty相反) $("div:parent").css("background-color", "#bbffaa") // 可見過濾選擇器 // 設(shè)置所有不可見元素顯示 $("div:hidden").show(3000) // 設(shè)置所有可見div元素背景色設(shè)置為#bbffaa $("div:visible").css("background-color", "#bbffaa") // 屬性過濾選擇器 // 設(shè)置含有title屬性元素的背景色為#bbffaa $("[title]").css("background-color", "#bbffaa") // 設(shè)置title屬性值等于test的元素背景色為#bbffaa // $("[title=test]").css("background-color", "#bbffaa") // 設(shè)置title屬性值不等于test的元素背景色為#bbffaa $("[title!=test]").css("background-color", "#bbffaa") // 設(shè)置title屬性值以te開頭的元素背景色為#bbffaa $("[title^=te]").css("background-color", "#bbffaa") // 設(shè)置title屬性值以st結(jié)尾的元素背景色為#bbffaa $("[title$=st]").css("background-color", "#bbffaa") // 設(shè)置title屬性值中含有es的元素背景色為#bbffaa $("[title*=es]").css("background-color", "#bbffaa") // 設(shè)置包含id屬性且title屬性值為test的元素的背景色為"#bbffaa" $("[id][title=test]").css("background-color", "#bbffaaa") // 子元素過濾選擇器 // 設(shè)置class為one的div下的第一個子元素背景色為#bbffaa $("div.one :first-child").css("background-color", "#bbffaa") // 設(shè)置class為one的div下的最后一個子元素背景色為#bbffaa $("div.one :last-child").css("background-color", "#bbffaa") // 設(shè)置class為one的div下只有一個子元素的元素背景色為#bbffaa $("div.one :only-child").css("background-color", "#bbffaa") // 設(shè)置每個元素下的第index個子元素或偶數(shù)或奇數(shù)元素的背景色為#bbffaa $("div.one :nth-child(odd)").css("background-color", "#bbffaa") </script>
說明: 在可見性過濾選擇器中,:hidden不僅包括樣式屬性display:none的元素,也包括文本隱藏域<input type="hidden">和visible:hidden之類的元素,在子元素過濾選擇器中,:nth-child將為每一個符合條件的父元素匹配子元素,但需要注意的是索引是從1開始,而:eq的索引從0開始,同理:first和:first-child,:last和:last-child類似
# 表單選擇器
說明: 表單選擇器包括表單對象屬性過濾選擇器和擴(kuò)展表單過濾選擇器.
<script type="text/javascript"> // 表單對象屬性過濾選擇器 // 設(shè)置id為form1的表單下的可用元素的值為你改變了~ $("#form1 input:enabled").val("你改變了~") // 設(shè)置id為form1的表單下的不可用元素的值為你改變了~ $("#form1 input:disabled").val("你改變了~") // 獲取多選框中選中的個數(shù)并顯示在div中 $("div:first").html($("input:checked").length + "個被選中!").css({ "color": "red", "font-weight": "border" }) // 獲取多選下拉列表中被選中的個數(shù)并顯示在div中 $("div:eq(1)").html($("select:first [selected=selected]").length + "個被選中").css({ "color": "red", "font-weight": "border" }) // 獲取單選下拉框中被選中的值并顯示在div中 $("div:last").html($("select:last [selected=selected]").text() + "被選中").css({ "color": "red", "font-weight": "border" }) // 表單選擇器 // :input可匹配<input>/<textarea>/<select>/<button>元素 $(":input").css("border", "solid 1px red") // :text可匹配<input>所有的單行文本框 $(":text").css("border", "solid 1px red") // :password可匹配所有的密碼框 $(":password").css("border", "solid 1px red") // :radio可匹配所有的單選框 $(":radio").css("border", "solid 1px red") // :checkbox可匹配所有的多選框 $(":checkbox").css("border", "solid 1px red") // :submit可匹配所有的提交按鈕 $(":submit").css("border", "solid 1px red") // :p_w_picpath可匹配所有的圖像按鈕 $(":p_w_picpath").css("border", "solid 1px red") // :reset可匹配所有的重置按鈕 $(":reset").css("border", "solid 1px red") // :button可匹配所有的按鈕 $(":button").css("border", "solid 1px red") // :file可匹配所有的文件上傳域 $(":file").css("border", "solid 1px red") // :hidden選取所有不可見元素 $(":hidden").css("border", "solid 1px red") </script>
最佳實(shí)踐:
1. 給網(wǎng)頁中的所有的<p>元素添加點(diǎn)擊事件,點(diǎn)擊后彈出元素內(nèi)的文本內(nèi)容?
<script type="text/javascript"> $("p").click(function(event) { alert($(this).text()) }); </script>
2. 使一個特定的表格隔行換色?
<script type="text/javascript"> $("table tr:odd").css("background-color", "#bbffaa") </script>
3. 對多選框進(jìn)行操作,輸出選中的個數(shù)?
<script type="text/javascript"> $("input[name=newselector]:checkbox").click(function(event){ $("div>span").html( " " + $("input[name=newselector]:checked").length + "個選項(xiàng)被勾選!" ).css("color", "red") }) </script>
4. 如上要求用戶進(jìn)入頁面時,品牌列表默認(rèn)精簡顯示(從第5條開始隱藏后面的品牌,除了最后一條),用戶單機(jī)"顯示所有品牌"顯示全部品牌同時高亮顯示推薦的品牌,且按鈕里的文字也換成"精簡顯示品牌",再次單擊"精簡顯示品牌"恢復(fù)初始狀態(tài)?
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>前端開發(fā)</title> <style type="text/css"> *{ margin:0; padding:0;} body {font-size:12px;text-align:center;} a { color:#04D; text-decoration:none;} a:hover { color:#F50; text-decoration:underline;} .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} .SubCategoryBox ul { list-style:none;} .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} .showmore { clear:both; text-align:center;padding-top:10px;} .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} .promoted a { color:#F50;} </style> </head> <body> <div class="SubCategoryBox"> <ul> <li ><a href="#">佳能</a><i>(30440) </i></li> <li ><a href="#">索尼</a><i>(27220) </i></li> <li ><a href="#">三星</a><i>(20808) </i></li> <li ><a href="#">尼康</a><i>(17821) </i></li> <li ><a href="#">松下</a><i>(12289) </i></li> <li ><a href="#">卡西歐</a><i>(8242) </i></li> <li ><a href="#">富士</a><i>(14894) </i></li> <li ><a href="#">柯達(dá)</a><i>(9520) </i></li> <li ><a href="#">賓得</a><i>(2195) </i></li> <li ><a href="#">理光</a><i>(4114) </i></li> <li ><a href="#">奧林巴斯</a><i>(12205) </i></li> <li ><a href="#">明基</a><i>(1466) </i></li> <li ><a href="#">愛國者</a><i>(3091) </i></li> <li ><a href="#">其它品牌相機(jī)</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="more.html"><span>顯示全部品牌</span></a> </div> </div> </body> <script src="js/libs/jquery.min.js"></script> <script type="text/javascript"> /* 1. 默認(rèn)進(jìn)去頁面,從第5條開始隱藏后面的品牌(最后一條"其它品牌相機(jī)"除外) 2. 當(dāng)用戶點(diǎn)擊"顯示全部品牌"按鈕時 > 顯示隱藏品牌 > "顯示全部品牌"按鈕文本切換成"精簡顯示品牌" > 高亮推薦品牌 3. 當(dāng)用戶點(diǎn)擊"精簡顯示品牌"按鈕時 > 從第5條開始隱藏后面的品牌(最后一條"其它品牌相機(jī)"除外) > "精簡顯示品牌"按鈕文本切換成"顯示全部品牌" > 去掉高亮顯示的推薦品牌 */ $(function(){ var $moreItems = $(".SubCategoryBox>ul>li:gt(5):not(:last)") var $moreBtn = $(".showmore>a") var $highlightItmes = $("ul>li").filter(":contains(佳能),:contains(索尼)") $moreItems.hide() $moreBtn.toggle(function(){ $moreItems.show() $(".showmore>a>span").css("background", "url(img/up.gif) no-repeat 0 0").text("精簡顯示品牌") $highlightItmes.addClass("promoted") }, function(){ $moreItems.hide() $(".showmore>a>span").css("background", "url(img/down.gif) no-repeat 0 0").text("顯示所有品牌") $highlightItmes.removeClass("promoted") }) }) </script> </html>
方法 | 說明 |
.show(speed,callback) | 顯示隱藏的匹配元素,支持設(shè)置顯示速度以及回調(diào)函數(shù) |
.css(name) | 獲取所有匹配元素的樣式 |
.css(name, value) | 設(shè)置所有匹配元素的單個樣式 |
.css(name,function(index,value)) | 設(shè)置所有匹配元素的單個樣式,index為選擇器index的位置,value為當(dāng)前樣式值 |
.css({k: v, k: v}) | 設(shè)置所有匹配元素的多個樣式 |
.filter(selector) | 以單個過濾器過濾對應(yīng)的集合 |
.filter(expr) | 以多個過濾器過濾對應(yīng)的集合,過濾器之間使用,隔開 |
.filter(func) | 以函數(shù)過濾對應(yīng)的集合,函數(shù)接收選擇器index的值 |
.addClass(class) | 為指定元素添加class |
.removeClass(class) | 為指定元素刪除class |
.toggle(func1,func2, func3....) | 用于綁定兩個或多個事件處理函數(shù),以響應(yīng)被選元素的輪流的.click事件 |
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。