明鏡臺原創(轉載請保留)?
1、Jquery學習筆記(一)---- 前言
2、Jquery學習筆記(二)---- 強大的選擇器
JQuery的選擇器十分強大,本章主要講的是如何靈活應用選擇器。根據手冊,選擇器被分為以下9類。分別是:
1、基本;
2、層級;
3、基本對象屬性;
4、內容;
5、可見性;
6、屬性;
7、子元素;
8、表單;
9、表單對象屬性;
注意:所有的選擇都是返回對象數組;返回值:Array<Element(s)>
一、首先我來介紹的是選擇器的最基本是用方式。基本方式由以下幾種方式集合而成的,有最基礎的,ID("#id")選擇,元素(element)選擇,還有類選擇(.class),所有匹配選擇(*),多選擇('選擇1,選擇2,選擇3');
?????? 示例:
<
div?
id
="notMep"
?class
="myClass"
>
<
p
>
id="notMe"
</
p
>
</
div
>
<
div?
id
="myDiv"
>
id="myDiv"
</
div
>
#id選擇:
<!--
??????Jquery??????------!>
$("#myDiv");
alert($("#myDiv").text());
<!--??????結果??????----
-->
id="myDiv"

元素element選擇器
<!--
??????Jquery??????----
-->
$("p");
alert($("p").text());
<!--
??????結果??????----
-->
id="notMe"

類選擇器
<!--
??????Jquery??????----
-->
$(".myClass");
alert($(".myClass").text());
<!--
??????結果??????----
-->
<
p
>
id="notMe"
</
p
>
(*)選擇器
<!--
??????Jquery??????----
-->
$("*");
alert($("*").size());
<!--
??????結果??????----
-->
3

多選
<!--
??????Jquery??????----
-->
$("p,.myClass");
alert($("*").size());
<!--
??????結果??????----
-->
2
從上面大家看到什么呢?是不是覺得上面的選擇器是否跟CSS的選擇器十分相似呢,其實JQUERY的選擇器就是根據CSS來選擇的,我們可以從第一節中看到,維基的解析,在使用基本選擇發上是按照CSS來的,也比DOM靈活性強。
二、層級;在CSS里我們的層級上一般是使用">"來表示選擇某個元素的子元素,(應該是叫元素吧!其實我都不知道叫啥)在JQUERY里你依然可以延用這類的選擇方式,如果你覺得比較難記的話,可以這樣記憶,所有CSS的 選擇模式,在JQUERY里都是支持的。在JQUERY里層級里有4種選擇方式,分別是:"空格"作為分隔符,">"作為分隔符,"+"作為分隔符,"~"作為分隔符
這4種層級選擇方式空格是匹配某元素后的后代元素,而>在限定性上要嚴格得多,例如
<div><p>aaa</p><ul><li><p>cc</p></li></ul></div>
$("div>p")這個P元素必須是DIV元素的子元素我們找到的是內容為AAA的P元素,而使用$("DIV P")這樣的選擇器我們不單純找到內容為AAA的P元素而且找到內容為CC的P元素。其實很多人對CSS上更多的是使用空格這種方式去限定的,但是空格的嚴謹性上有一定的問題,如果想找某一確定元素用">"要比"空格"要好的,
“+”這個分割符號最大別的是選擇的元素是配對的,也就是說,$("P+UL")只有在 P后面跟著UL標記的才選擇。
“~”是同級分割符號,表示兩個分割符同深度的才選擇
這類層級選擇是分割符后面的元素才是選定的元素,分割符前面的元素是起限制作用的,查找的是分割符后面的元素,這個比較容易搞混,尤其是一些初次使用JQUERY的。
三、從第三開始都是用":"作為分割符的了這部分是令你靈活運用選擇器的重點。基本對象屬性,分別是:first(匹配找到的第一個元素),last(匹配找到的最后一個元素),not(去除所有與給定選擇器匹配的元素),even(匹配所有索引值為偶數的元素,從 0 開始計數),odd(匹配所有索引值為奇數的元素,從 0 開始計數),eq(匹配一個給定索引值的元素),gt(匹配所有大于給定索引值的元素),lt(匹配所有小于給定索引值的元素),header(匹配如 h1, h2, h3之類的標題元素),animated(匹配所有正在執行動畫效果的元素)
具體應用看例子:
<table>
??<tr><td>第0個吃螃蟹</td></tr>
??<tr><td>第1個吃螃蟹</td></tr>
??<tr><td>第2個吃螃蟹</td></tr>
</table>

lt:
<!--?在~$:后面是選擇后的結果?-->
$("tr:lt(2)")??~$:?<tr><td>第0個吃螃蟹</td></tr>,?<tr><td>第1個吃螃蟹</td></tr>

gt:
<!--?在~$:后面是選擇后的結果?-->
$("tr:gt(0)")??~$:?<tr><td>第1個吃螃蟹</td></tr>,?<tr><td>第2個吃螃蟹</td></tr>

eq:
<!--?在~$:后面是選擇后的結果?-->
$("tr:eq(1)")?~$:?<tr><td>第1個吃螃蟹</td></tr>

odd:
<!--?在~$:后面是選擇后的結果?-->
$("tr:odd")?~$:?<tr><td>第1個吃螃蟹</td></tr>?

even:
<!--?在~$:后面是選擇后的結果?-->
$("tr:even")?~$:?<tr><td>第0個吃螃蟹</td></tr>?<tr><td>第2個吃螃蟹</td></tr>?

first:
<!--?在~$:后面是選擇后的結果?-->
$("tr:first")?~$:?<tr><td>第0個吃螃蟹</td></tr>?

last:
<!--?在~$:后面是選擇后的結果?-->
$("tr:last")?~$:?<tr><td>第2個吃螃蟹</td></tr>?

<!---------------重點介紹(not)------------->
<input?id="userID"?name="userID"?type="text">
<input?id="password"?name="password"?type="password">


$("input:not(#userID)")
結果為:
<input?id="password"?name="password"?type="password">

$("input:not(:text)")
結果為:
<input?id="password"?name="password"?type="password">

記得有一次面試做網站的公司,出來一道這樣的題目:
用JS查找頁面所有的文本輸入框,
那我們可以怎么做呢$("input:text)")這樣就好。。。是不是超級簡單。。。


四、內容選擇分為4個:contains(匹配包含給定文本的元素),empty(判空),has(匹配含有選擇器所匹配的元素的元素)parent(匹配含有子元素或者文本的元素),empty和parent是對立的。一個是空,一個是非空。至于如何靈活使用,就看自己了。
五、可見性選擇器,從名字我們可以猜到,這個應該是由兩個組成的,分別是:hidden和visible這個也是在正常應用中應用的最多的,例如我們要實現,當鼠標經過某個鏈接顯示某個層的時候,在選擇上就可以使用可見性選擇,一般網站開發都有很多隱藏層,所以這個可見性選擇功能我覺得還是十分好用的。
六、屬性選擇器,這個部分是一個重點,記憶點也不多,就是幾個判斷,第一判斷存在不存在這個屬性,屬性等于某個值,屬性不等某個值,屬性的值是以某個字符串開始,屬性的值是以某個字符串結尾,屬性的值只要包含某個字符串最后就是同時檢測多個屬性,在手冊里你可以看到:[attribute],
[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute~=value],"[attribute],[attribute]...."
既然我們學多了一個新的選擇方式,依照剛剛那道面試題目我們可以怎么實現呢?
$("input[type=text]")實現的方式是使用屬性選擇器,而上面講的則是表單選擇器。
至于余下的表單屬性對像,表單等選擇器方式可以自己查看手冊,因為手冊演示得十分清晰。下面我們找一個網來做下聯系,
使用以下網站吧:
時尚專屬
<table?width="130"?border="0"?align="center"?cellpadding="0"?cellspacing="0"?class="floatindex">?
????????????????????<tr>?
??????????????????????<td?height="139"?colspan="2"?align="center"?background="images/menu_10.gif">?
??????????????????????<a?href="product.php?act=page&id=789"?title="louis?vuitton/路易威登?淑女?牛皮?挎包?m40074"><img?src="upload/system/{1D9DF9E9-4805-477B-8EDC-37A36E9816FC}.jpg"?width="108"?height="108"?onload="DrawImage(this,108,108)"?border="0"?/></a>?
??????????????????????</td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?width="40"?align="right"><img?src="images/menu_14.gif"?width="32"?height="13"?/></td>?
??????????????????????<td?width="90"?height="35"?align="center">?
??????????????????????<div?class="limit"><a?title="louis?vuitton/路易威登?淑女?牛皮?挎包?m40074"?href="product.php?act=page&id=789">louis?vuitton/路易威登?淑女?牛皮?挎包?m40074</a></div></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?colspan="2"?align="center"><span?class="t3">會員價:4025元</span></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?height="30"?colspan="2"?align="center"?valign="bottom">?
??????????????????????<input?type="submit"?name="submit"?value=" 加入購物車"?class="basket"?/>?
??????????????????????</td>?
????????????????????</tr>?
??????????????????</table>?
</form>?
<form?name="cart_788"?action="product_cart_c.php"?method="post">?
<input?name="id"?type="hidden"?id="prid"?value="788">?
<input?name="price"?type="hidden"?value="3725">?
??????????<table?width="130"?border="0"?align="center"?cellpadding="0"?cellspacing="0"?class="floatindex">?
????????????????????<tr>?
??????????????????????<td?height="139"?colspan="2"?align="center"?background="images/menu_10.gif">?
??????????????????????<a?href="product.php?act=page&id=788"?title="lv?外型高貴典雅?m40058?monogram?經典印花皺摺手提包"><img?src="upload/system/{7CCA6AA4-38A0-3391-B396-4DA4F6896BDD}.jpg"?width="108"?height="108"?onload="DrawImage(this,108,108)"?border="0"?/></a>?
??????????????????????</td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?width="40"?align="right"><img?src="images/menu_14.gif"?width="32"?height="13"?/></td>?
??????????????????????<td?width="90"?height="35"?align="center">?
??????????????????????<div?class="limit"><a?title="lv?外型高貴典雅?m40058?monogram?經典印花皺摺手提包"?href="product.php?act=page&id=788">lv?外型高貴典雅?m40058?monogram?經典印花皺摺手提包</a></div></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?colspan="2"?align="center"><span?class="t3">會員價:3725元</span></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?height="30"?colspan="2"?align="center"?valign="bottom">?
??????????????????????<input?type="submit"?name="submit"?value=" 加入購物車"?class="basket"?/>?
??????????????????????</td>?
????????????????????</tr>?
??????????????????</table>?
</form>?
<form?name="cart_786"?action="product_cart_c.php"?method="post">?
<input?name="id"?type="hidden"?id="prid"?value="786">?
<input?name="price"?type="hidden"?value="3725">?
??????????<table?width="130"?border="0"?align="center"?cellpadding="0"?cellspacing="0"?class="floatindex">?
????????????????????<tr>?
??????????????????????<td?height="139"?colspan="2"?align="center"?background="images/menu_10.gif">?
??????????????????????<a?href="product.php?act=page&id=786"?title="louis?vuitton?m40045經典monogram?hudson?gm烏瑪舒曼雙口袋斜背包"><img?src="upload/system/{D8A85A25-818B-684B-3F37-1E9A4C791379}.jpg"?width="108"?height="108"?onload="DrawImage(this,108,108)"?border="0"?/></a>?
??????????????????????</td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?width="40"?align="right"><img?src="images/menu_14.gif"?width="32"?height="13"?/></td>?
??????????????????????<td?width="90"?height="35"?align="center">?
??????????????????????<div?class="limit"><a?title="louis?vuitton?m40045經典monogram?hudson?gm烏瑪舒曼雙口袋斜背包"?href="product.php?act=page&id=786">louis?vuitton?m40045經典monogram?hudson?gm烏瑪舒曼雙口袋斜背包</a></div></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?colspan="2"?align="center"><span?class="t3">會員價:3725元</span></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?height="30"?colspan="2"?align="center"?valign="bottom">?
??????????????????????<input?type="submit"?name="submit"?value=" 加入購物車"?class="basket"?/>?
??????????????????????</td>?
????????????????????</tr>?
??????????????????</table>?
</form>?
<form?name="cart_785"?action="product_cart_c.php"?method="post">?
<input?name="id"?type="hidden"?id="prid"?value="785">?
<input?name="price"?type="hidden"?value="2225">?
??????????<table?width="130"?border="0"?align="center"?cellpadding="0"?cellspacing="0"?class="floatindex">?
????????????????????<tr>?
??????????????????????<td?height="139"?colspan="2"?align="center"?background="images/menu_10.gif">?
??????????????????????<a?href="product.php?act=page&id=785"?title="lv【m40044】monogram?經典花紋斜背包"><img?src="upload/system/{185D3216-236E-DD1A-5897-D19B40FF4441}.jpg"?width="108"?height="108"?onload="DrawImage(this,108,108)"?border="0"?/></a>?
??????????????????????</td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?width="40"?align="right"><img?src="images/menu_14.gif"?width="32"?height="13"?/></td>?
??????????????????????<td?width="90"?height="35"?align="center">?
??????????????????????<div?class="limit"><a?title="lv【m40044】monogram?經典花紋斜背包"?href="product.php?act=page&id=785">lv【m40044】monogram?經典花紋斜背包</a></div></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?colspan="2"?align="center"><span?class="t3">會員價:2225元</span></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?height="30"?colspan="2"?align="center"?valign="bottom">?
??????????????????????<input?type="submit"?name="submit"?value=" 加入購物車"?class="basket"?/>?
??????????????????????</td>?
????????????????????</tr>?
??????????????????</table>?
</form>?
<form?name="cart_784"?action="product_cart_c.php"?method="post">?
<input?name="id"?type="hidden"?id="prid"?value="784">?
<input?name="price"?type="hidden"?value="3350">?
??????????<table?width="130"?border="0"?align="center"?cellpadding="0"?cellspacing="0"?class="floatindex">?
????????????????????<tr>?
??????????????????????<td?height="139"?colspan="2"?align="center"?background="images/menu_10.gif">?
??????????????????????<a?href="product.php?act=page&id=784"?title="m40043louis?vuitton?英倫風格提背兩用公事包m40043"><img?src="upload/system/{C77BD582-099A-9FF1-D563-F86149B28BA0}.jpg"?width="108"?height="108"?onload="DrawImage(this,108,108)"?border="0"?/></a>?
??????????????????????</td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?width="40"?align="right"><img?src="images/menu_14.gif"?width="32"?height="13"?/></td>?
??????????????????????<td?width="90"?height="35"?align="center">?
??????????????????????<div?class="limit"><a?title="m40043louis?vuitton?英倫風格提背兩用公事包m40043"?href="product.php?act=page&id=784">m40043louis?vuitton?英倫風格提背兩用公事包m40043</a></div></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?colspan="2"?align="center"><span?class="t3">會員價:3350元</span></td>?
????????????????????</tr>?
????????????????????<tr>?
??????????????????????<td?height="30"?colspan="2"?align="center"?valign="bottom">?
??????????????????????<input?type="submit"?name="submit"?value=" 加入購物車"?class="basket"?/>?
??????????????????????</td>?
????????????????????</tr>?
??????????????????</table>?這一部分是一個演示商品的原代碼。現在我要更改這個網站的部分功能個,我要將在所有的
submit按鈕的“加入購物車”下改加入一個檢測語句,提示用戶是否加入,我們要如何查找這個商品頁面內的
submit呢?
??? 根據屬性選擇:input:submit我們可以查看到所有的submit按鈕,但是我們不能保證這些按鈕都是屬于演示商品的,所以我們需要用用更復雜的語句,根據上面的代碼我們可以看出,所有用于層列商品的都是用了一個類“
floatindex”這樣我們就可以這樣做,
$(".floatindx input:submit")到底可以不可以抓到?我也不知道哈哈,理論上可以。
其實我們可以怎么實現?有更方便的方法,也是我比較喜歡用的方法
$("input[type=submit][value~=加入購物車]")這個方法是使用了多屬性搜查選擇器。
從以上例子可以看出,我們要如何使用 jquery去選擇某個對象,完全取決你如何去選擇,只要你善于分析,頁面上的任何東西,你都可以準確的抓到,并進行加工。
posted on 2009-06-01 00:58
^喬喬^ 閱讀(1734)
評論(0) 編輯 收藏 引用 所屬分類:
Jquery學習筆記