jquery如何實(shí)現(xiàn)一個(gè)表格的篩選,也就是按條件查找篩選

使用jquery的each()方法遍歷單元格，如果滿足條件則進(jìn)行相應(yīng)的操作

成都創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)按需定制開(kāi)發(fā)，是成都網(wǎng)站推廣公司,為玻璃鋼雕塑提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺(tái)程序開(kāi)發(fā)等。成都網(wǎng)站建設(shè)熱線：13518219792

$(selector).each(function(index,element))

實(shí)例演示：在表格中按姓名查找記錄，找到則突出顯示，否則給出提示

創(chuàng)建Html元素

div?class="box"

span實(shí)例演示：在表格中按姓名查找記錄/spanbr

div?class="content"

姓名:nbsp;input?type="text"?name="name"nbsp;input?type="button"?value="查找"

table

trtd張三/tdtd175/tdtd140/td/tr

trtd李四/tdtd170/tdtd120/td/tr

trtd王五/tdtd185/tdtd160/td/tr

/table

/div

/div

設(shè)置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}

input[type='text']{width:100px;padding:5px?10px;margin:5px?0;border:1px?solid?#ff9966;}

input[type='button']{height:30px;margin:10px;padding:5px?10px;}

table{border-collapse:collapse;}

td{width:80px;height:30px;line-height:30px;text-align:center;border:1px?solid?green;}

.selected{font-weight:bold?!important;?background:?#ff99cc?!important;color:#fff;}

編寫(xiě)jquery代碼

$(function(){?

$(":button").click(function()?{

$("table?tr").removeClass('selected');???//?還原樣式

name?=?$("input[name='name']").val();????//?要查找的名字

flag?=?true;?????????????????????????????//?表示未查到目標(biāo)

$("table?tr").find("td:first").each(function()?{

if($(this).html()==name){????????????//?如果找到了

$(this).parent("tr").addClass('selected');????//?為整行設(shè)置樣式

flag?=?false;????????????????????//?將未找到標(biāo)記設(shè)為false

return?false;????????????????????//?提前終止循環(huán)

}

});

if(flag)?????????????????????????????????//?如果沒(méi)找到就給出提示

alert("查無(wú)此人");??

});

});

觀察效果

如果表中有相應(yīng)記錄

如果表中并無(wú)相應(yīng)記錄

Jquery實(shí)戰(zhàn)

Jquery實(shí)戰(zhàn)

基本的CSS選擇器

熟悉web開(kāi)發(fā)的人員一定對(duì)css的選擇功能相當(dāng)?shù)牧私猓ㄟ^(guò)css選擇功能，我們可以在css樣式文件里輕松的將樣式應(yīng)用到選擇的頁(yè)面元素上。jQuery也正是采用了這樣的機(jī)制，使jQuery的元素選擇能力易常強(qiáng)大。

a——選擇所有元素

#specialID——選擇匹配id為specialID的元素

.specialClass——選擇匹配擁有css類sepcialClass的元素

a#specialID.specialClass——選擇匹配id為specialID、有用css類specialClass的元素

p a.specialClass——匹配擁有css類specialClass、在

元素內(nèi)的元素

除了支持傳統(tǒng)的css選擇器，Jquery還支持CSS3選擇功能。

子節(jié)點(diǎn)選擇器

$("p a") 選擇元素

的直接子節(jié)點(diǎn)的元素，非直接子節(jié)點(diǎn)的元素將不會(huì)被選擇到

特性選擇器

特性選擇器在匹配的選擇元素上過(guò)濾滿足某特性(屬性)的元素

如我們需要做如下的'選擇：匹配所有指向本網(wǎng)站之外地址的鏈接，我們可以這樣選擇

$("a[href^=http://") 該選擇器選擇具有href屬性，且href屬性值以http://開(kāi)始的鏈接元素

特性選擇的語(yǔ)法是：

選擇具有某特性(屬性)的元素

form[method]

選擇具有某特性，且屬性值為指定值的元素

input[type=text]

選擇匹配特性以特定字符開(kāi)頭的元素

div[title^=my] ——選擇匹配title特性值已my開(kāi)頭的所有div元素

選擇匹配特性以特定字符結(jié)束的元素

a[href$=.pdf] ——選擇引用了pdf文件的所有鏈接元素

其他

a[href*=jquery.com]選擇引用jQuery網(wǎng)站的所有鏈接元素

過(guò)濾符

通過(guò)過(guò)濾符選擇器可以在已選擇的元素中過(guò)濾出需要的元素，上面的特性選擇器也屬于過(guò)濾符，另外還有“:”字符

如：

li:has(a)—— 選擇匹配包含元素的所有

元素

1. 基礎(chǔ)過(guò)濾符：

:first：匹配多個(gè)對(duì)象中的第一個(gè)對(duì)象

:last：匹配多個(gè)對(duì)象中的最后一個(gè)對(duì)象

:not(selector)：匹配去除了not后面選擇符中內(nèi)容的項(xiàng)，not中的selector只能是過(guò)濾選擇器，不能是查找選擇器

:even：匹配所有對(duì)象中的第偶數(shù)個(gè)

:odd：匹配所有對(duì)象中的第奇數(shù)個(gè)

:eq(index)：匹配某一下表的單獨(dú)某元素

:gt(index)：匹配大于某一下標(biāo)的所有元素

:lt(index)：匹配小于某一下標(biāo)的所有元素

:header：匹配所有的header元素，例如h1,h2,h3,h4,h5,h6

:animated：匹配所有有動(dòng)畫(huà)效果的元素

2. 內(nèi)容過(guò)濾符：

:contains(text)：匹配內(nèi)部擁有該文本元素的對(duì)象，包含間接有用的情況

:empty：匹配所有沒(méi)有子元素的對(duì)象

:has(selector)：匹配所有至少含有一個(gè)子選擇符的對(duì)象

:parent：匹配元素，這些元素包含子元素（包括文本元素）

3. 可見(jiàn)性過(guò)濾符：

:hidden：匹配所有隱藏對(duì)象，或者input中的hidden類型

:visible：匹配所有可見(jiàn)的對(duì)象

4. 子過(guò)濾符：

:nth-child(index/even/odd/equation)：匹配子元素中的某一下標(biāo)/偶數(shù)/奇數(shù)/等式的對(duì)象，:eq(index)只能匹配某單一對(duì)象的子元素特征，而這個(gè)方法可以匹配多個(gè)對(duì)象的某一子元素共同特征 nth-child過(guò)濾器，從1開(kāi)始計(jì)數(shù)，這主要是與css標(biāo)準(zhǔn)兼容。

:first-child：匹配第一個(gè)子元素

:last-child：匹配最后一個(gè)子元素

這兩個(gè)匹配符也可以對(duì)多個(gè)父對(duì)象的所有子元素進(jìn)行匹配操作

:only-child：如果一個(gè)父元素只有一個(gè)子元素，就匹配這個(gè)子元素

5. 表單過(guò)濾符

:input ：匹配表單內(nèi)input元素

:text ：匹配表單內(nèi)input type為text的元素

:password ：匹配表單內(nèi)input type為password的元素

:radio ：匹配表單內(nèi)input type為radio的元素

:checkbox ：匹配表單內(nèi)input type為checkbox的元素

:submit ：匹配表單內(nèi)input type為submit的元素

:image ：匹配表單內(nèi)image的元素

:reset ：匹配表單內(nèi)input type為reset的元素

:button ：匹配表單內(nèi)input type為button的元素

:file ：匹配表單內(nèi)input type為file的元素.

:hidden ：匹配表單內(nèi)input type為hidden的元素或者h(yuǎn)idden區(qū)域

:enabled ：匹配所有啟用元素

:disabled ：匹配所有非啟用元素

:checked ：匹配所有選中元素

:selected ：匹配所有下拉列表選中元素

查找選擇器和篩選選擇器的概念區(qū)別

為了能靈活的使用jQuery,認(rèn)清查找選擇器、篩選選擇器之間的區(qū)別是非常重要的。篩選選擇器，通過(guò)對(duì)元素應(yīng)用更高的選擇標(biāo)準(zhǔn)（如過(guò)濾特性或或其他相關(guān)值），縮小正在匹配的元素的集合；查找選擇器，比如后代選擇器（空格）、子節(jié)點(diǎn)選擇器（）以及兄弟節(jié)點(diǎn)選擇器（+）等，則查找與已選擇元素具有某種關(guān)系的其他元素，而不是通過(guò)把標(biāo)準(zhǔn)應(yīng)用于已匹配元素來(lái)限制匹配范圍。 ;

jquery的篩選有哪些

jQuery提供了強(qiáng)大的選擇器讓我們獲取對(duì)象。在這邊，我人為地將jQuery選擇器分為兩大部分：選擇對(duì)象和篩選條件。選擇對(duì)象表示要獲取什么對(duì)象，篩選條件是對(duì)獲取的對(duì)象進(jìn)行篩選，最終留下符合某些特征的對(duì)象

1.選擇對(duì)象

1).基本

·#id 根據(jù)給定的ID匹配一個(gè)元素。例如：$("#id")

·element 根據(jù)給定的元素名匹配所有元素。例如：$("div")

·.class 根據(jù)給定的類匹配元素。例如：$(".style1");

·* 匹配所有元素。例如：$("*")

·selector1,selector2,selectorN 將每一個(gè)選擇器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")

2).表單

·:button 匹配所有按鈕。例如：$(":button")

·:checkbox 匹配所有復(fù)選框。例如：$(":checkbox")

·:file 匹配所有文件域。例如：$(":File")

·:hidden 匹配所有不可見(jiàn)元素，或者type為hidden的元素。例如：$("input:hidden")

·:image 匹配所有圖像域。例如：$(":image")

·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")

·:password 匹配所有密碼框。例如：$(":password")

·:radio 匹配所有單選按鈕。例如：$(":radio")

·:reset 匹配所有重置按鈕。例如：$(":reset")

·:submit 匹配所有提交按鈕。例如：$(":submit")

·:text 匹配所有的單行文本框。例如：$(":text")

·:header 匹配如 h1, h2, h3之類的標(biāo)題元素。例如：$(":header").css("background", "#EEE");

2.篩選條件

1).屬性篩選

·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如：$("input[name*='man'")

·[attribute!=value] 匹配所有含有指定的屬性，但屬性不等于特定值的元素。例如：$(input[name!='man');

·[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素。例如：$("input[name$='man']")

·[attribute=value] 匹配給定的屬性是某個(gè)特定值的元素。例如：$("input[name='man']");

·[attribute] 匹配包含給定屬性的元素。例如：$("div[id]")

·[attribute^=value] 匹配給定的屬性是以某些值開(kāi)始的元素。例如：$("input[name^='man']")

·[selector1][selector2][selectorN] 同時(shí)滿足多個(gè)條件。例如：$("input[id][name$='man']")

·:hidden 匹配所有的不可見(jiàn)元素。例如：$("tr:hidden")

·:visible 匹配所有的可見(jiàn)元素。例如：$("tr:visible")

·:checked 匹配所有選中的被選中元素(復(fù)選框、單選框等，不包括select中的option)。例如：$("input:checked")

·:disabled 匹配所有不可用元素。例如：$("input:disabled")

·:enabled 匹配所有可用元素。例如：$("input:enabled")

·:selected 匹配所有選中的option元素。例如：$("select option:selected")

2).內(nèi)容篩選

·:contains(text) 匹配包含給定文本的元素。例如：$("div:contains('John')")

·:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty")

·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如：$("div:has(p)");

·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")

3).層級(jí)篩選

·ancestor descendant 在給定的祖先元素下匹配所有的后代元素。例如：$("form input")

·parent child 在給定的父元素下匹配所有的子元素。例如：$("form input")

·prev + next 匹配所有緊接在 prev 元素后的 next 元素。例如：$("label + input")

·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如：$("form ~ input")

·:first-child 匹配第一個(gè)子元素。例如：$("ul li:first-child")

·:last-child 匹配最后一個(gè)子元素。例如：$("ul li:last-child")

·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個(gè)子或奇偶元素。例如：$("ul li:nth-child(2)")

·:only-child 如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配。例如：$("ul li:only-child")

4).方法篩選

·:animated 匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素。例如：$("div:animated");

·:eq(index) 匹配一個(gè)給定索引值的元素。例如：$("tr:eq(1)")

·:even 匹配所有索引值為偶數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)。例如：$("tr:even")

·:first 匹配找到的第一個(gè)元素。例如：$("tr:first")

·:gt(index) 匹配所有大于給定索引值的元素，從 0 開(kāi)始計(jì)數(shù)。例如：$("tr:gt(0)")

·:last 匹配找到的最后一個(gè)元素。例如：$("tr:last")

·:lt(index) 匹配所有小于給定索引值的元素。例如：$("tr:lt(2)")

·:not(selector) 去除所有與給定選擇器匹配的元素。例如：$("input:not(:checked)")

·:odd 匹配所有索引值為奇數(shù)的元素，從 0 開(kāi)始計(jì)數(shù)。例如：$("tr:odd")

分享文章：jquery篩選,下面哪種不屬于jquery的篩選
文章起源：http://chinadenli.net/article31/dsgjssd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站改版、建站公司、企業(yè)網(wǎng)站制作、網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)