欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery之過濾元素操作小結(jié)

 更新時(shí)間：2013年11月30日 13:28:12   作者：  
這篇文章主要介紹了jQuery中的過濾元素操作。需要的朋友可以過來參考下，希望對(duì)大家有所幫助

1：eq(index)方法

用于獲取第N個(gè)元素，這個(gè)元素的位置從0開始算起，語(yǔ)法格式如下：eq(index)

獲取第3個(gè)表格，并將它的背景色設(shè)置為"#FCF"， 代碼如下：$("td").eq(2).css("background", "#FCF");


2：filter(expr)方法

用于篩選出與指定表達(dá)式匹配的元素集合，用于縮小匹配的范圍，用逗號(hào)分隔多個(gè)表達(dá)式，那么多個(gè)表達(dá)式之間是“或”的關(guān)系，

語(yǔ)法如下：filter(expr)

$("input").filter(".sel").css("backgroud", "#FCF");  //選取帶有class屬性值為sel的input元素，并設(shè)置它的背景色

$("input").filter(".sel, :first").css("background", "#FCF");  //選取帶有class屬性值的input元素或者選取當(dāng)前領(lǐng)域中的第一個(gè)元素，并設(shè)置它們的背景色，

表達(dá)式之間用逗號(hào)分隔


3：filter(fn)方法

用于篩選出與指定函數(shù)返回值匹配的元素集合，該函數(shù)內(nèi)部將對(duì)每個(gè)對(duì)象計(jì)算一次(如$:each)。如果調(diào)用的函數(shù)返回false，則這個(gè)元素將被刪除，

否則就會(huì)保留。語(yǔ)法格式如下：filter(fn)

復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filter(fn)用法</title>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
      $("p").filter(function(index){
        return $("ol", this).length == 0;
    }).css("color", "blue");
   })
</script>

</head>

<body>
     <p>
       <ol>
           <li>Hello</li>
       </ol>
     </p>
     <p>How are you?</p>
</body>
</html>


假設(shè)子元素中不含有ol元素，并設(shè)置該元素的字體顏色為藍(lán)色。



4：has(expr)方法

用于保留包含特定后代的元素，去掉那些不含有指定后代的元素，該方法將會(huì)從給定的jQuery對(duì)象中重新創(chuàng)建一組匹配的對(duì)象，提供的選擇器會(huì)一一測(cè)試原先

那些對(duì)象的后代，含有匹配后代的對(duì)象將得以保留，語(yǔ)法格式如下：

has(expr)

復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>has(expr)用法</title>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
      $("li").has("ul").css("color", "red");
   })
</script>

</head>

<body>
    <ul>
       <li id="menu_li">
          <ul id="menu_ul">
              <li>新聞</li>
              <li>網(wǎng)頁(yè)</li>
              <li>知道</li>
          </ul>
       </li>
       <li>正文</li>
       <li>結(jié)尾</li>
    </ul>
</body>
</html>


5： hasClass(class)

用于檢查當(dāng)前的元素是否含有某個(gè)特定的類，如果有，則返回true

復(fù)制代碼 代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hasClass用法</title>

<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(function(){
     $("div").click(function() {
     if($(this).hasClass("protected")) {
      $(this).css("border", "1px solid blue");
     }
   });
   })
</script>

</head>

<body>
   <div class="protected">div元素</div>
   <div>div元素二</div>
</body>
</html>


6：map(callback)方法

map(callback)方法用于將一組元素轉(zhuǎn)換成其他數(shù)組(無論是否是元素?cái)?shù)組)， 可以用這個(gè)函數(shù)來建立一個(gè)列表，無論是值、屬性還是CSS樣式，或者其他特別形式，

都可以用$.map()來方便的建立，語(yǔ)法格式如下：

map(callback)

相關(guān)文章

最新評(píng)論