亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery中filter()方法用法實例

 更新時間：2015年01月06日 10:15:56   投稿：shichen2014  
這篇文章主要介紹了jQuery中filter()方法用法,實例分析了filter()方法的功能、定義及篩選的幾種使用技巧,需要的朋友可以參考下

此方法能夠篩選出與指定表達式或者方法返回值相匹配的元素或者元素集合。

語法結構一:
篩選出與指定表達式匹配的元素集合。

復制代碼 代碼如下:
$(selector).filter(expr)

參數列表:

參數 描述
expr 字符串值，用于篩選當前元素集合的選擇器表達式。

實例代碼:

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>filter()函數-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li").filter(".js").css("color","blue")
})
</script>
</head>
<body>
<div>
  <ul>
    <li>HTML專區(qū)</li>
    <li class="js">Javascript專區(qū)</li>
    <li>Div+Css專區(qū)</li>
    <li>Jquery專區(qū)</li>
  </ul>
</div>
</body>
</html>

這段代碼能夠將類名為js的li中的字體顏色設置為藍色。

語法結構二:

從元素集合中篩選出指定的jquery對象。

復制代碼 代碼如下:
$(selector).filter(element)

參數列表:

參數 描述
element 用于匹配當前元素集合中元素的jQuery對象或者DOM對象。

實例代碼:

實例一:

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>filter()函數-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li").filter(document.getElementById("js")).css("color","blue")
})
</script>
</head>
<body>
<div>
  <ul>
    <li>HTML專區(qū)</li>
    <li id="js">Javascript專區(qū)</li>
    <li>Div+Css專區(qū)</li>
    <li>Jquery專區(qū)</li>
  </ul>
</div>
</body>
</html>

實例二:

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>filter()函數-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li").filter($($("li")[0])).css("color","blue")
})
</script>
</head>
<body>
<div>
  <ul>
    <li>HTML專區(qū)</li>
    <li id="js">Javascript專區(qū)</li>
    <li>Div+Css專區(qū)</li>
    <li>Jquery專區(qū)</li>
  </ul>
</div>
</body>
</html>

語法結構三:

篩選出與指定函數返回值匹配的元素集合。
filter()方法內部將對每個對象計算一次 (如$.each).。如果調用的function返回false則這個元素被刪除，否則就會保留。

復制代碼 代碼如下:
$(selector).filter(function())

參數列表:

參數 描述
function(index) 定義返回filter()匹配值的函數。
index為當前元素在匹配元素集合中的索引值。

實例代碼:

復制代碼 代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://chabaoo.cn/" />
<title>filter()函數-腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("ul").filter(function(index){
    return $(".js",this).length==0;
  }).css("color","blue")
})
</script>
</head>
<body>
<div>
  <ul>
    <li>HTML專區(qū)</li>
    <li class="js">Javascript專區(qū)</li>
    <li>Div+Css專區(qū)</li>
    <li>Jquery專區(qū)</li>
  </ul>
  <ul>
    <li>字體要變藍色了</li>
  </ul>
</div>
</body>
</html>

希望本文所述對大家的jQuery程序設計有所幫助。

相關文章

  • jquery操作select取值賦值與設置選中實例

    jquery操作select取值賦值與設置選中實例

    下面小編就為大家?guī)硪黄猨query操作select取值賦值與設置選中實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • jquery中eq和get的區(qū)別與使用方法

    jquery中eq和get的區(qū)別與使用方法

    相信大部份人都會把這2個的用法搞錯。仔細查看下API文檔就可以知道。eq返回的是一個jquery對象，get返回的是一個html 對象數組。
    2011-04-04
  • JQuery的自定義事件代碼,觸發(fā),綁定簡單實例

    JQuery的自定義事件代碼,觸發(fā),綁定簡單實例

    下面的代碼是所有它自己的自定義事件觸發(fā)。你可以綁定到這個自定義事件，并提高它時，你要執(zhí)行的代碼里面綁定。
    2013-08-08
  • jQuery通過Ajax返回JSON數據

    jQuery通過Ajax返回JSON數據

    最近在使用JQuery的ajax方法時，要求返回的數據為json數據，在處理的過程中遇到下面的幾個問題，那就是采用不同的方式來生成json數據的時候，在$.ajax方法中應該是如何來處理的，下面依次來進行說明。
    2015-04-04
  • jQuery的text()方法用法分析

    jQuery的text()方法用法分析

    這篇文章主要介紹了jQuery的text()方法用法,以實例形式詳細分析了jQuery的text()方法的定義、參數與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下
    2014-12-12
  • 七夕情人節(jié)丘比特射箭小游戲

    七夕情人節(jié)丘比特射箭小游戲

    本文給大家分享的是使用javascript實現的七夕情人節(jié)丘比特射箭小游戲的代碼，并附上源碼下載，誰說程序猿就不懂得浪漫呢，小伙伴們感覺拿去獻寶吧（當然了，首先你得有女票才行^_^）
    2015-08-08
  • jquery 無限級聯菜單案例分享

    jquery 無限級聯菜單案例分享

    phpcms的地區(qū)級聯菜單，感覺寫的挺有意思于是自己也實現了個，感興趣的各位路過的可以參考下哈，希望本例可以幫助到你
    2013-03-03
  • ajax無刷新動態(tài)調用股票信息(改良版)

    ajax無刷新動態(tài)調用股票信息(改良版)

    今日閑來無事，把上次寫的代碼稍微改了改。增加了動態(tài)追加和刪除股票信息的功能（代碼基于jquery運行：http://jquery.com/） 。由于對Ajax技術的認識還只是在初級階段，總覺得這么些有點別扭，希望大蝦能夠指點一二。
    2008-11-11
  • jQuery的ztree仿windows文件新建和拖拽功能的實現代碼

    jQuery的ztree仿windows文件新建和拖拽功能的實現代碼

    zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點。這篇文章主要介紹了jQuery的ztree仿windows文件新建和拖拽功能的實現代碼,需要的朋友可以參考下
    2018-12-12
  • JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件

    JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件

    這篇文章主要介紹了JQuery通過鍵盤控制鍵盤按下與松開觸發(fā)事件，文章通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-08-08

最新評論