::^乔乔^::明镜台::原创空间::C#.NET2.0,C++技术BLOG
人最重要的是心境,一颗平静安稳的心才能更好的进步,保持自己的心态.成为梦想中的高手QQ群:8664695
posts - 17,comments - 32,trackbacks - 0

明鏡臺原創(轉載請保留) 
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"> 
                      
<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"><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="&nbsp;&nbsp;&nbsp;&nbsp;加入購物車" 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"> 
                      
<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"><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="&nbsp;&nbsp;&nbsp;&nbsp;加入購物車" 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"> 
                      
<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"><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="&nbsp;&nbsp;&nbsp;&nbsp;加入購物車" 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"> 
                      
<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"><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="&nbsp;&nbsp;&nbsp;&nbsp;加入購物車" 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"> 
                      
<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"><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="&nbsp;&nbsp;&nbsp;&nbsp;加入購物車" 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 ^乔乔^ 阅读(1710) 评论(0)  编辑 收藏 引用 所属分类: Jquery學習筆記

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理