選擇器是jQuery的根基 一. 認識 1.CSS常用的選擇器 標簽選擇器，後代選擇器，Id選擇器，通配符選擇器，類選擇器，群組選擇器——主流瀏覽器全部支持 偽類選擇器，子選擇器，臨近選擇器等等——不是全部被支持 2.jQuery選擇器 比如有個 <p class="demo">demo</p> C ...
選擇器是jQuery的根基
一. 認識
1.CSS常用的選擇器
標簽選擇器，後代選擇器，Id選擇器，通配符選擇器，類選擇器，群組選擇器——主流瀏覽器全部支持
偽類選擇器，子選擇器，臨近選擇器等等——不是全部被支持
2.jQuery選擇器
比如有個
<p class="demo">demo</p>
CSS寫法是.demo
jq寫法是$('.demo')
二者寫法相似，但是前者添加的是樣式，後者是行為。
二. 優勢
寫法當然簡潔多了，還支持CSS1-CSS3。而且在使用一個可能不存在的元素時，自動幫你判斷，存在的話執行，不存在則不執行。
那麼問題來了：jq函數獲取的永遠是一個對象——所以不要使用如下代碼
| 1 2 3 |
if($('oCr')){
do something
}
|
要麼轉化為DOM對象再來判斷，或者：
| 1 2 3 |
if($('#oCr').length>0){
dosomething
}
|
三.選擇器
做幾個js原生代碼練習。
【例2.1】表單隔行變色
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<table id="tab" border="1" width="400">
<thead>
<tr>
<td>id</td>
<td>姓名</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>dangjingtao</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>djtap</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>TAO</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>TAOt</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>hehe</td>
<td></td>
</tr>
</tbody>
</table>
|
js
| 1 2 3 4 5 6 7 8 9 10 |
window.onload=function(){
var oTab=document.getElementById('tab');
var aRows=oTab.tBodies[0].rows;
for(i=0;i<aRows.length;i++){
if(i%2==0){
aRows[i].style.background='#ccc';
}
}
}
|
jQuery改寫:考慮:even選擇器
| 1 2 3 |
$(document).ready(function(){
$('#tab tbody tr:even').css('background','#ccc');
});
|
【例2.2】給網頁所有P元素加onclick事件
| 1 2 3 4 5 |
<div id="div1">
<p>hehe</p>
<p>hahaha</p>
<p>hohoho</p>
</div>
|
JS
| 1 2 3 4 5 6 7 8 9 10 |
window.onload=function(){
var oDiv=document.getElementById('div1');
var aP=document.getElementsByTagName('p');
for(i=0;i<aP.length;i++){
aP[i].onclick=function(){
alert(this.innerHTML);
}
}
}
|
改寫：說白了就是一個div1內所有P元素，click(function（）{}）
| 1 2 3 4 5 |
$(document).ready(function(){
$('#div1>p').click(function(){
alert(this.innerHTML);
})
})
|
【例.3】對多選框操作，輸出被選中的多選框的個數
| 1 2 3 4 |
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你選中的個數" id="btn1" />
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
var aChk=document.getElementsByName('check');
var count=0;
for(i=0;i<aChk.length;i++){
if(aChk[i].checked){
count++;
}
}
alert('您選中的個數是'+count+'個');
}
}
|
改寫：屬性選擇器
| 1 2 3 4 5 6 7 |
$(document).ready(function(){
var arr=$("input[name='check']:checked");
$('#btn1').click(function(){
alert('您選中的個數是'+arr.length+'個');
})
})
|
程式有點問題，就是不能實時反映當前的情況。
| 1. 基本選擇器 | 釋義 | 用法示例 | 備註 |
| #id .class 還可以是通配符，元素或者群組 |
等效於getElementById('') 等效於getElementsByClass('') |
$("#myDiv"); $('.myClass'); $('*') $('div1,div2') |
也許是最好用的選擇器。 |
| 2. 層次選擇器 | 釋義 | 用法示例 | 備註 |
| ancestor descendant parent>child |
在給定的祖先元素下匹配所有的後代元素 選取直接子元素 |
$("form input") $('form>input') |
|
| one+div | 選取class為one的下一個div同輩元素 | $(.one+div') | jQuery替代方案：
$('.one').next('div')可以替代$('.one+div') |
| one~siblings | 選取特定id元素後面所有特定類別同輩元素 | $(.one~div) |
jQuery替代方案： $(#one).nextAll('div')可以替代$('#two~div')。 |
| 3.過濾選擇器 | 釋義 | 用法示例 | 備註 |
| 3.1 基本過濾選擇器 | 釋義 | 用法示例 | 備註 |
| :first和:last | 獲取指定類型匹配的第一個/最後一個元素 | $('div:first') 找出第一個div $('div:last') 找出最後一個div |
|
| not(selector} | 去除所有與給定選擇器匹配的元素 | 假設兩個選擇框，一個選中一個沒選中：選擇的是沒被點選的那個覆選框。 $('input:not(:checked)') |
|
| :even(偶數） :odd（奇數） |
選取索引值為偶數/奇數的元素，從0開始。 註意索引值第0個即現實中第1個。 |
$('div:even') 選取的是偶數個索引值的div，也就是現實中第1,3,5,7..的div |
索引值都是從0開始的。除了Eq是單個元素，其它都是多個元素 |
| :eq(index) :gt(index) :lt(index) |
提取索引值/索引值之後/索引值之前的元素 | $('input:eq(1)') 索引值第1個也就是現實中第2個input標記。 |
|
| :header | 選擇所有標題元素（h1,h2,h3....h6)，前面不用跟對象 | $(':header') | |
| :animated | 選取當前執行動畫的元素 | $('div:animate') 選取正在執行動畫的div |
|
| :focus | 選取當前獲取焦點的元素， 前面不用跟對象 | $(':focus') | |
| 3.2 內容過濾選擇器 | 釋義 | 用法示例 | 備註 |
| :contains(text) | 選取所有文本內容為text的元素 | $('div:contains('我')) 選取所有內容包含“我"的div元素 |
|
| :empty :parent |
選取不包含子元素或文本的空元素 選取含有子元素或文本的元素（也就是非空元素） |
$('div:empty') 選取所有的空div 選取所有非空的div $('div:parent') |
|
| :has(selector) | 選取含有選擇器所匹配的元素 | $('div:has(p)') 選取所有含有p元素的div |
|
| 3.3可見性過濾選擇器 | 釋義 | 用法示例 | 備註 |
| :hidden :visible |
選取所有不可見的元素 | $('div:hidden') 選取所有可見的div |
如果前面不跟對象，則預設所有不可見的被選取 |
| 選取所有可見的元素 | 選取所有不可見的div $('div:visible') |
||
| 3.4 屬性過濾選擇器 | 釋義 | 用法 | 備註 |
| [attribute] | 選取所有擁有此屬性的d元素 | $('div[id]') 選取含有id的div |
|
| [attribute=value] [attribute!=value] |
選取此屬性為value的元素 | $('div[title=haha]') 選取title為haha的div |
|
| 選取屬性值不為value的元素 | $(div['title!=haha]') 選取title為haha的div |
||
| [attribute^=value] | 選取屬性以value開始的元素 | ||
| [attribute$=value] | 選取屬性以value結束的元素 | ||
| [attribute*=value] | 選取屬性含有value的元素 | ||
| [attribute|=value] | 選取屬性為給定字元串，或以該字元串為首碼（首碼-尾碼）的元素 | ||
| [attribute-=value] | 選取屬性用空格分隔的值中包含value的元素 | ||
| [attribute1][attribute2]..[attributeN] | 多個屬性選擇器的交集 | ||
| 3.5 子元素過濾選擇器 | 釋義 | 用法 | 備註 |
| :nth-dhild(index/even/odd/eqation) | 選取每個父元素下第index個子元素或奇偶數子元素 | index從1算起，是個集合元素 | |
| :first-child | 每個父元素下第一個子元素 | $('ul li:firsrt-child') 選取每個ul的第一個li元素 |
不同於:first，這是個集合元素 |
| :last-child | 每個父元素下最後一個子元素 | ||
| :only-child | 獨生子元素會被匹配，否則無效。 | 都是集合元素 | |
| 3.6 表單對象的屬性過濾選擇器 | 釋義 | 用法 | 備註 |
| :enable :disable |
選取所有可用元素 | $('form1:enable') 選取id為form1的表單內所有可用元素 |
|
| 選取所有不可用元素 | |||
| :checked | (單選框，覆選框）所有被選中的元素 | $('input:checked') | |
| :selected | (下拉列表）所有被選中的元素 | $('select option:selected') | |
| 4. 表單選擇器 | 釋義 | 用法 | 備註 |
| :input | 選取所有，input、textarea，select，button元素 | 前面不用跟對象 | |
| :text | 選取所有單行文本框 | ||
| :password | 選取所有密碼框 | ||
| :radio | 選取所有單選框 | ||
| :checkbox | 選取所有覆選框 | ||
| :submit | 選取所有提交按鈕 | ||
| :image | 選取所有圖像按鈕 | ||
| :reset | 選取所有重置按鈕 | ||
| :button | 選取所有button按鈕 | ||
| :fil | |||
註意事項：
（1）當選擇器含有特殊字元（比如16進位顏色代碼）
\\#666
（2）註意:xxx的空格問題，意義和表現都是不同的。
【久違的案例】某購物網站品牌列表效果
項目需求：點擊顯示更多，彈出隱藏的選項，同時將重要推薦高亮顯示，同時按鈕文字變成：收起。再次單擊收起，變回原來的頁面。可以先寫出JavaScript的工作方式。
先佈局
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="section">
<h2>jQuery選擇器辭典</h2>
<ul>
<li class="main"><a href="javascript:;">基本選擇器</a></li>
<li class="main"><a href="javascript:;">層次選擇器</a></li>
<li class="main"><a href="javascript:;">過濾選擇器</a></li>
<li class="main"><a href="javascript:;">表單選擇器</a></li>
<li class="minor"><a href="javascript:;">基本過濾選擇器</a></li>
<li class="minor"><a href="javascript:;">內容過濾選擇器</a></li>
<li class="minor"><a href="javascript:;">屬性過濾選擇器</a></li>
<li class="minor"><a href="javascript:;">子元素過濾選擇器</a></li>
<li class="minor"><a href="javascript:;">表單對象的過濾屬性選擇器</a></li>
<li><a href="javascript:;">補白</a></li>
</ul>
<div id="showhide">
顯示所有
</div>
</div>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
*{
margin:0;padding:0;
}
ul li{list-style: none;}
a{text-decoration: none;}
  更多相關文章
一周排行
 所有分類
|