Jquery find與filter函數區別說明

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery find與filter函數區別說明

編輯：JQuery特效代碼

find()會在div元素內尋找 class為classname的元素。
filter()則是篩選div的class為classname的元素。

基本是find子元素找，filter是平級找

·find 函數是在當前對象集合的子元素中進行查詢;
·filter 函數是對當前對象集合進行過濾, 利用過濾條件縮小范圍;
·find 函數的參數是 jQuery 選擇器表達式;
·filter 的參數也是選擇器表達式, 但可以有多個條件, 用逗號分隔(邏輯或關系);
·filter 的參數也可以是個函數, 調用函數時會自動傳入 index 參數, 函數需返回 true或false 以選中或排除元素.

<!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=gb2312"> 
<title>Document</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
<script> 
$(function(){ 
$('#btn1').click(function(){ 
alert($('div').find('.test').html()); 
}); 
$('#btn2').click(function(){ 
alert($('div').filter('.test').html()); 
}); 
$('#btn3').click(function(){ 
alert($('div').filter('.last').html()); 
}); 
$('#btn4').click(function(){ 
alert($('div').filter('.first,.last').html()); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="button" value="test-find" id="btn1" /> 
<input type="button" value="test-filter" id="btn2" /> 
<input type="button" value="test-filter" id="btn3" /> 
<input type="button" value="test-filter" id="btn4" /> 
<div class="first">first content<span class="test">test content</span></div> 
<div class="last">last<span class="test">last test content</span></div> 
<div class="last">last<span>last no test content</span></div> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:jquery validate.js表單驗證的基本用法入門
下一頁:Jquery change(fontsize,background) 改變顏色與背景的代碼

JQuery特效代碼

jquery ready(fn)事件使用介紹: 1、事件簡介（1）當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數；（2）請確保在 <
Jquery中ajax方法data參數的用法小結: 。代碼如下:$.ajax({ type: POST,
JQuery入門——移除綁定事件unbind方法概述及應用: 1、在DOM對象的實踐操作中，既然存在用於綁定事件的bind方法，也相應存在用於移出綁定事件的方法，

DIV CSS 佈局教程網

相關文章