Web UI開(kāi)發(fā)神器—Kendo UI for jQuery數(shù)據(jù)管理之過(guò)濾操作

擊“了解更多”獲取Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

默認(rèn)情況下，Kendo UI Grid過(guò)濾功能處于禁用狀態(tài)。要控制Grid中的過(guò)濾，請(qǐng)使用filterable屬性。

Grid使您可以實(shí)現(xiàn)以下過(guò)濾器選項(xiàng)：

標(biāo)題行過(guò)濾
通過(guò)復(fù)選框過(guò)濾
自定義菜單過(guò)濾

標(biāo)題行過(guò)濾

要啟用網(wǎng)格標(biāo)題中的過(guò)濾器行，請(qǐng)將模式設(shè)置為row。結(jié)果基于基礎(chǔ)列數(shù)據(jù)的數(shù)據(jù)類(lèi)型，網(wǎng)格將在列標(biāo)題中呈現(xiàn)字符串值、數(shù)字輸入或日期選擇器的文本框進(jìn)行過(guò)濾。您還可以指定默認(rèn)的過(guò)濾器運(yùn)算符，當(dāng)用戶在過(guò)濾器文本框中輸入值并從鍵盤(pán)按Enter或Tab時(shí)將應(yīng)用該默認(rèn)過(guò)濾器。要處理這種情況，請(qǐng)將相應(yīng)列的cell設(shè)置為operator。

<!DOCTYPE?html>
??<html>
??<head><title></title><link?rel="stylesheet"?href="styles/kendo.common.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.mobile.min.css"?/>
<script?src="js/jquery.min.js"></script>
??<script?src="js/kendo.all.min.js"></script>
</head>
??<body>
<div?id="example">
??<div?id="grid"></div>
??<script>
??$(document).ready(function()?{
??$("#grid").kendoGrid({
??dataSource:?{
??type:?"odata",
??transport:?{
??read:?"https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
??},
??schema:?{
??model:?{
??fields:?{
??OrderID:?{?type:?"number"?},
??Freight:?{?type:?"number"?},
??ShipName:?{?type:?"string"?},
??OrderDate:?{?type:?"date"?},
??ShipCity:?{?type:?"string"?}
??}
??}
??},
??pageSize:?20,
??serverPaging:?true,
??serverFiltering:?true,
??},
??height:?550,
??filterable:?{
??mode:?"row"
??},
??pageable:?true,
??columns:?
??[{
??field:?"OrderID",
??width:?225,
??filterable:?{
??cell:?{
??showOperators:?false
??}
??}
??},
??{
??field:?"ShipName",
??width:?500,
??title:?"Ship?Name",
??filterable:?{
??cell:?{
??operator:?"contains",
??suggestionOperator:?"contains"
??}
??}
??},{
??field:?"Freight",
??width:?255,
??filterable:?{
??cell:?{
??operator:?"gte"
??}
??}
??},{
??field:?"OrderDate",
??title:?"Order?Date",
??format:?"{0:MM/dd/yyyy}"
??}]
??});
??});
??</script>
??</div>
</body>
??</html>

通過(guò)復(fù)選框過(guò)濾

要在過(guò)濾器菜單中呈現(xiàn)復(fù)選框列表，請(qǐng)為所需的Grid列設(shè)置multi=true，還可以將復(fù)選框過(guò)濾器與itemTemplate定義結(jié)合使用，并自定義將顯示的復(fù)選框項(xiàng)目。

<!DOCTYPE?html>
??<html>
??<head><title></title><link?rel="stylesheet"?href="styles/kendo.common.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.mobile.min.css"?/>
<script?src="js/jquery.min.js"></script>
??<script?src="js/kendo.all.min.js"></script>
</head>
??<body>
<div?id="example">
??<style>
??.k-multicheck-wrap?{
??overflow-x:?hidden;
??}
??</style>
??<div?class="demo-section?k-content?wide">
??<h4>Client?Operations</h4>
??<div?id="client"></div>
??</div>
??<div?class="demo-section?k-content?wide">
??<h4>Server?Operations</h4>
??<div?id="server"></div>
??</div>
??<script>
??$(document).ready(function()?{
??var?telerikWebServiceBase?=?"https://demos.telerik.com/kendo-ui/service/";
$("#client").kendoGrid({
??dataSource:?{
??transport:?{
??read:??{
??url:?telerikWebServiceBase?+?"/Products",
??dataType:?"jsonp"
??},
??update:?{
??url:?telerikWebServiceBase?+?"/Products/Update",
??dataType:?"jsonp"
??},
??destroy:?{
??url:?telerikWebServiceBase?+?"/Products/Destroy",
??dataType:?"jsonp"
??},
??create:?{
??url:?telerikWebServiceBase?+?"/Products/Create",
??dataType:?"jsonp"
??},
??parameterMap:?function(options,?operation)?{
??if?(operation?!==?"read"?&&?options.models)?{
??return?{models:?kendo.stringify(options.models)};
??}
??}
??},
??batch:?true,
??pageSize:?20,
??schema:?{
??model:?{
??id:?"ProductID",
??fields:?{
??ProductID:?{?editable:?false,?nullable:?true?},
??ProductName:?{?validation:?{?required:?true?}?},
??UnitPrice:?{?type:?"number",?validation:?{?required:?true,?min:?1}?},
??Discontinued:?{?type:?"boolean"?},
??UnitsInStock:?{?type:?"number",?validation:?{?min:?0,?required:?true?}?}
??}
??}
??}
??},
??filterable:?true,
??pageable:?true,
??height:?550,
??toolbar:?["create",?"save",?"cancel"],
??columns:?[
??{?field:?"ProductName",?filterable:?{?multi:?true,?search:?true}?},
??{?field:?"UnitPrice",?title:?"Unit?Price",?format:?"{0:c}",?width:?120,?filterable:?{?multi:?true?}?},
??{?field:?"UnitsInStock",?title:?"Units?In?Stock",?width:?120,?filterable:?{?multi:?true?}?},
??{?field:?"Discontinued",?width:?120,?filterable:?{?multi:?true,?dataSource:?[{?Discontinued:?true?},?{?Discontinued:?false?}]}?},
??{?command:?"destroy",?title:?" ",?width:?150}],
??editable:?true
??});
$("#server").kendoGrid({
??dataSource:?{
??type:?"odata",
??transport:?{
??read:?telerikWebServiceBase?+?"Northwind.svc/Employees"
??},
??pageSize:?20,
??serverPaging:?true,
??serverSorting:?true,
??serverFiltering:?true,
??},
??editable:?true,
??filterable:?true,
??pageable:?true,
??columns:?[
??{
??field:?"FirstName",
??title:?"First?Name",
??filterable:?{
??multi:?true?,
??//when?serverPaging?of?the?Grid?is?enabled,?dataSource?should?be?provided?for?all?the?Filterable?Multi?Check?widgets
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"FirstName"
??}
??}
??}
??}
??},
??width:?"220px"
??},
??{
??field:?"LastName",
??filterable:?{?
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"LastName"
??}
??}
??}
??},
??multi:?true?
??},
??title:?"Last?Name",
??width:?"220px"
??},
??{
??field:?"Country",
??filterable:?{
??multi:?true,
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"Country"
??}
??}
??}
??},
??itemTemplate:?function(e)?{
??if?(e.field?==?"all")?{
??//handle?the?check-all?checkbox?template
??return?"<div><label><strong><input?type='checkbox'?/>#=?all#</strong></label></div>";
??}?else?{
??//handle?the?other?checkboxes
??return?"<span><label><input?type='checkbox'?name='"?+?e.field?+?"'?value='#=Country#'/><span>#=?Country?#</span></label></span>"
??}
??}
??},
??width:?"220px"
??},
??{
??field:?"City",
??filterable:?{
??multi:?true,
??dataSource:?[{
??City:?"Seattle",
??},{
??City:?"Tacoma",
??},{
??City:?"Kirkland",
??},{
??City:?"Redmond",
??},{
??City:?"London"
??}],
??checkAll:?false
??},
??width:?"220px"
??},
??{
??filterable:?{
??multi:?true,
??dataSource:?{
??transport:?{
??read:?{
??url:?telerikWebServiceBase?+?"Employees/Unique",
??dataType:?"jsonp",
??data:?{
??field:?"Title"
??}
??}
??}
??}
??},
??field:?"Title"
??}
??]
??});
});
??</script>
??</div>
</body>
??</html>

自定義菜單過(guò)濾

您可以為網(wǎng)格過(guò)濾器的菜單配置應(yīng)用通用設(shè)置，并在每列中自定義其UI。有關(guān)實(shí)現(xiàn)自定義菜單篩選的可運(yùn)行示例演示了如何：

通過(guò)設(shè)置extra = false來(lái)指定單個(gè)過(guò)濾條件；
將字符串列的過(guò)濾器運(yùn)算符限制為僅、等于和不等于開(kāi)始；
定義內(nèi)置的日期選擇器用戶界面，以過(guò)濾網(wǎng)格中的日期時(shí)間列；
分別為T(mén)itle和City列實(shí)例化Kendo UI AutoComplete和DropDownList。

<!DOCTYPE?html>
??<html>
??<head><title></title><link?rel="stylesheet"?href="styles/kendo.common.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.min.css"?/><link?rel="stylesheet"?href="styles/kendo.default.mobile.min.css"?/>
<script?src="js/jquery.min.js"></script>
??<script?src="js/kendo.all.min.js"></script>
</head>
??<body>
??<script?src="../content/shared/js/people.js"></script>
<div?id="example">
??<div?id="grid"></div>
<script>
??$(document).ready(function()?{
??$("#grid").kendoGrid({
??dataSource:?{
??data:?createRandomData(50),
??schema:?{
??model:?{
??fields:?{
??City:?{?type:?"string"?},
??Title:?{?type:?"string"?},
??BirthDate:?{?type:?"date"?}
??}
??}
??},
??pageSize:?15
??},
??height:?550,
??scrollable:?true,
??filterable:?{
??extra:?false,
??operators:?{
??string:?{
??startswith:?"Starts?with",
??eq:?"Is?equal?to",
??neq:?"Is?not?equal?to"
??}
??}
??},
??pageable:?true,
??columns:?[
??{
??title:?"Name",
??width:?160,
??filterable:?false,
??template:?"#=FirstName#?#=LastName#"
??},
??{
??field:?"City",
??width:?130,
??filterable:?{
??ui:?cityFilter
??}
??},
??{
??field:?"Title",
??filterable:?{
??ui:?titleFilter
??}
??},
??{
??field:?"BirthDate",
??title:?"Birth?Date",
??format:?"{0:MM/dd/yyyy?HH:mm?tt}",
??filterable:?{
??ui:?"datetimepicker"
??}
??}
??]
??});
??});
function?titleFilter(element)?{
??element.kendoAutoComplete({
??dataSource:?titles
??});
??}
function?cityFilter(element)?{
??element.kendoDropDownList({
??dataSource:?cities,
??optionLabel:?"--Select?Value--"
??});
??}
</script>
??</div>
</body>
??</html>

更多最新Kendo UI最新資訊，盡在Telerik中文網(wǎng)！

習(xí)大綱

一、了解Jquery

1.什么是jquery

Jquery 是一款優(yōu)秀的JavaScript框架，它是一個(gè)輕量的JS庫(kù)，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,火狐1.5+,谷歌，safari2.0+等），使用Jquery讓web開(kāi)發(fā)變得更簡(jiǎn)單，例如：文檔操作、文檔選擇、制作動(dòng)畫(huà)、事件處理、AJAX的使用以及其他的功能。

2.什么是框架

JS框架就是對(duì)JS各種功能的封裝和抽象，使我們?cè)陂_(kāi)發(fā)的時(shí)候具有簡(jiǎn)便性和更好的兼容性，并且可以擴(kuò)展框架的內(nèi)容。

3.常見(jiàn)的JS框架

1.1JS核心底層框架(JS庫(kù))

Jquery 、 phototype、Mootools

1.2JS前端框架(框架)

YUI（yahoo user interface 雅虎的）

Kissy（淘寶自己的框架）

JX(騰訊自己的框架)

Tangram(百度自己的框架)

ExtJs(后臺(tái)開(kāi)發(fā)前端框架，全部都是AJAX操作，性能不是太好)

1.3.庫(kù)和框架的區(qū)別

所謂的庫(kù)就類(lèi)似于一個(gè)工具箱，我們?cè)谧鲰?xiàng)目的時(shí)候需要用這些工具來(lái)完成我們要的前端效果。

所謂的框架就是別人已經(jīng)封裝好的效果我們直接拿過(guò)來(lái)使用即可。

使用庫(kù)我們可以快速做出自己想要的效果。

框架具有選擇性如果沒(méi)有給我們封裝那個(gè)效果我們同樣要自己來(lái)寫(xiě)。

4.jquery的特點(diǎn)

開(kāi)源（源碼開(kāi)放）

輕量級(jí)，代碼非常小巧

完善的學(xué)習(xí)資源，語(yǔ)法簡(jiǎn)練、語(yǔ)義易懂、學(xué)習(xí)快速、豐富文檔

出色的瀏覽器兼容

出色的dom操作

插件豐富，除了 jQuery 自身帶有的一些特效外，可以通過(guò)插件實(shí)現(xiàn)更多功能

5.jquery快速體驗(yàn)

1.1下載

官方網(wǎng)站:http://www.jquery.com

下載地址：http://www.jquery.com/download

下載后出現(xiàn)

文件后綴會(huì)出現(xiàn)min.js 這個(gè)是壓縮版也是線上版，.js是開(kāi)發(fā)版本

壓縮版：沒(méi)有空格，沒(méi)有換行，沒(méi)有文字說(shuō)明

未壓縮版：有空格，有換行，有簡(jiǎn)單的注釋

如何選用版本呢？

1.0,1.2,1.3 .......2.0....3.0

區(qū)別在于兼容性：

2.0 以上版本不支持IE9以下的瀏覽器

1.0-1.9版本支持IE6，IE7，IE8

建議使用（1.7-1.9）版本

二、DOM操作（一）

1.樣式操作

1.1CSS樣式操作

?JS操作

語(yǔ)法：JS對(duì)象.style.CSS屬性轉(zhuǎn)化為JS后的名稱=屬性的值

JS設(shè)置背景色：

對(duì)象.BackgroundColor=’red’;

CSS設(shè)置背景色:

background-color: red;

?缺點(diǎn)：

需要將CSS的寫(xiě)法轉(zhuǎn)換成JS的寫(xiě)法

一次只能設(shè)置一個(gè)樣式

?Jquery操作

語(yǔ)法:

$().css(‘屬性名’); //獲取樣式屬性的值

$().css(‘屬性名’,’屬性值’);//設(shè)置樣式的屬性和值

$().css(json對(duì)象)//設(shè)置樣式的多個(gè)屬性

說(shuō)明：json對(duì)象的鍵=>值（‘屬性名’=>’屬性值’）

例如：設(shè)置背景為紅色，字符30px;

三、Jquery-選擇器

1.什么是選擇器

所謂選擇器就是用來(lái)查找定位DOM元素的工具

獲取和選擇：

HTML中的標(biāo)簽元素

JS中的DOM節(jié)點(diǎn)

JS中的對(duì)象

2.原生JS選擇器VSJQ選擇器

簡(jiǎn)單選擇器的對(duì)比

3.基本-CSS選擇器

靈感來(lái)源于CSS選擇器

1.1ID選擇器

語(yǔ)法：$(‘#ID名稱’)

作用：選擇頁(yè)面指定ID的元素的名稱，返回JQ對(duì)象

說(shuō)明：說(shuō)明相當(dāng)于JS中的document.getElementsById();

案例：使用ID選擇器將【who are you!】變成紅色

【原生JS】

obj = document.getElementById('em1');

obj.style.color='red';

【Jquery】

$('#em1').css('color','red');

?腳下留心：$is not defined

當(dāng)我們看到$ is not defined 說(shuō)明我們沒(méi)有引入jquery操作庫(kù)

1.2類(lèi)選擇器

語(yǔ)法：$(‘.類(lèi)名’)

作用：選擇頁(yè)面指定類(lèi)名稱的元素，返回JQ對(duì)象

說(shuō)明:相當(dāng)于JS中document.getElementsByClassName

$('.em1').css({'color':'blue','font-size':'30px'});

1.3標(biāo)簽選擇器

語(yǔ)法：$(‘標(biāo)簽名稱’);

作用：選定頁(yè)面指定標(biāo)簽的名稱

說(shuō)明：相當(dāng)于JS中的getElemetsTagName()

【HTML】

3.使用標(biāo)簽選擇器將【<span>O!NO!</span>】變成<span>黃色</span>,

【JS】

$('span').css('color','red');

?腳下留心：是將頁(yè)面中所有的span標(biāo)簽字體顏色全部改變。

1.4通配符選擇器

語(yǔ)法：$(*)

作用：選擇頁(yè)面所有的標(biāo)簽元素，返回JQ對(duì)象

//通配符選擇器

$('*').css('color','blue');

1.5群組選擇器

語(yǔ)法:$(‘選擇器1,選擇器2,選擇器3...’);

作用：選擇頁(yè)面同時(shí)指定多個(gè)標(biāo)簽元素，返回JQ對(duì)象

?特點(diǎn)：

可以選擇多個(gè)選擇器，多個(gè)之間使用,號(hào)隔開(kāi)

可以執(zhí)行相同的操作

$('div,p').css('color','red');

4.基本-層級(jí)選擇器

1.1后代選擇器

語(yǔ)法:$(‘選擇器1 選擇器2 選擇器..n’);

作用：選擇指定父級(jí)元素下的所有子元素

特點(diǎn)：

給所有的子孫增加樣式

多個(gè)選擇器使用逗號(hào)分隔開(kāi)來(lái)

//父親下面的所有的子孫

$('#id1 span,#id2 span').css('color','blue');

1.2子元素選擇器

語(yǔ)法：$(‘選擇器1>選擇器2’)

作用:選中父級(jí)下的兒子選擇器

特點(diǎn)：選中父級(jí)下的兒子但是不包含孫子

$('#id1 > span').css('color','red');

?思考：后代選擇器和子元素選擇器有什么區(qū)別？

后代選擇器：會(huì)選中父級(jí)下的所有標(biāo)簽元素

子元素選擇器：只會(huì)選中父級(jí)下的所有子元素

1.3同輩選擇器

【+】緊鄰?fù)?/p>

語(yǔ)法：$(‘選擇器1+選擇器2’)

作用；選中指定對(duì)象的下一個(gè)兄弟元素

特點(diǎn)：

只是選擇一個(gè)和其緊鄰的下一個(gè)元素(緊鄰?fù)呍?

//選擇緊挨p元素的下一個(gè)元素

$('#id3 p+span').css('color','red');

【~】相鄰?fù)?/p>

語(yǔ)法：$(‘選擇器1~選擇器2’)

作用：選中指定對(duì)象的下的所有兄弟元素

特點(diǎn):

從對(duì)象下面開(kāi)始找，所有指定的兄弟元素

//選擇相鄰p元素的下一個(gè)元素

$('#id4 p~span').css('color','red');

5.基本-表單選擇器

?:input

語(yǔ)法:$(‘:input’)

作用：選中所有input select textarea button 表單元素

?:text

語(yǔ)法:$(‘:text’)

作用：選中所有單行文本(<input type=’text’/>)

?:password

語(yǔ)法:$(‘:password’);

作用:選中所有密碼文本(<input type=’password’/>)

?:radio

語(yǔ)法:$(‘:radio’);

作用：選中所有單選框 (<input type=’radio’/>)

?:checkbox

語(yǔ)法：$(‘:checkbox’);

作用：選中所有復(fù)選框元素（<input type=’checkbox’/>）

?:file

語(yǔ)法：$(‘:file’)

作用：選中所有文件域元素（<input type=’file’>）

?:hidden

案例：

在表單元素中單選和復(fù)選框比較特殊，不能設(shè)置顏色，在實(shí)際項(xiàng)目中我們可以通過(guò)

div設(shè)置圖片來(lái)代替單選和復(fù)選框

6.過(guò)濾-表單屬性過(guò)濾選擇器

案例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
   <head>
       <title>表單域選擇器</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta name="description" content="" />
       <meta name="keywords" content="" />
   </head>
   
   <body>
       <h2>表單域選擇器</h2>
       <hr />
   <form>
         <p>用戶名：<input  type="text" disabled='disabled' /></p>
           <p>真實(shí)姓名:<input type="text"></p>
           <p>密碼：<input type="password" /></p>
           <p>性別：男<input checked type="radio" value='男' name='sex' />女<input type="radio"  value='女' name='sex' /></p
           ><p>興趣愛(ài)好：足球<input checked type="checkbox" value='足球' name='hobby[]' />籃球<input checked type="checkbox"  value='籃球' name='hobby[]' />其他<input type="checkbox"  value='其他' name='hobby[]' /></p>
           <p>地區(qū)：<select>
               <option value="">北京</option>
                <option selected value="">上海</option>
                 <option value="">深圳</option>
           </select></p>
           <p><input type="file" name="" id=""></p>
           <textarea>sdfsdf</textarea>
           <input type="hidden" />
           
           <input type="button" value="提交"/>
           <button>重置</button>
       </form>
       <script type="text/javascript" src="jquery-1.7.2.js"></script>
   
   </body>
</html>

?:checked

語(yǔ)法：$(‘:checked’)

作用：匹配所有選擇的表單標(biāo)簽，一般用于匹配單選按鈕和多選按鈕

腳下留心：同時(shí)包含單選和多選按鈕

?:selected

語(yǔ)法:$(‘:selected’)

作用:匹配所有選中的的元素，一般用于匹配下拉列表

?:disabled

語(yǔ)法：$(‘:disabled’)

作用：選中匹配表單中禁用的元素

?:enabled

語(yǔ)法:$(‘:enabled’)

作用：選中匹配表單可用元素，和disabled相反

7.過(guò)濾-簡(jiǎn)單過(guò)濾/選中

?:first

語(yǔ)法：$(‘選擇器:first’);

作用：用于匹配選中元素集合中的第一個(gè)元素

?:last

語(yǔ)法:$(‘:last’);

作用：匹配選中集合元素中的最后一個(gè)元素

?腳下留心：

First和last 操作的是當(dāng)前選擇器集合下的元素（當(dāng)前選中的所有標(biāo)簽）集合外的不會(huì)被選中

?:even

語(yǔ)法：$(‘選擇器:even’);

作用:用于匹配元素集合中索引為偶數(shù)的（說(shuō)明：偶數(shù)從零開(kāi)始）

?:odd

語(yǔ)法：$(‘選擇器:odd’);

作用:用于匹配指定元素集合中索引為偶數(shù)的元素

?小總結(jié)

even和odd他們的作用剛剛相反，在實(shí)際工作項(xiàng)目中我們用來(lái)區(qū)分列表的每行顯示

?:eq

語(yǔ)法:$(‘選擇器:eq(index)’) ,index:索引從0開(kāi)始

作用:匹配指定元素集合中的具體某一個(gè)元素

?:gt

語(yǔ)法:$(‘選擇器:gt(index)’)

作用:用于匹配指定集合中的元素索引值大于index的元素集合

?:lt

語(yǔ)法:$(‘選擇器:lt(index)’);

作用：和gt 的作用相反

腳下留心:

Gt(index)和lt(index) 過(guò)濾選擇器不包含當(dāng)前選中的index元素

:not(selector)

語(yǔ)法:$(‘選擇器:not(選擇器1,選擇器2)’)

作用:匹配指定元素集合除了指定的元素

:header

語(yǔ)法：$(‘選擇器:header’)

作用:匹配選中所有標(biāo)題標(biāo)簽元素

8.過(guò)濾-內(nèi)容過(guò)濾選擇器

:contains

語(yǔ)法：$(‘選擇器:contains(內(nèi)容)’)

作用: 匹配選中標(biāo)簽中是否存在指定內(nèi)容

例如：

:has

語(yǔ)法:$(‘選擇器1:has(標(biāo)簽名稱)’)

作用：匹配指定選擇器中的指定標(biāo)簽。

案例：

:empty

語(yǔ)法:$(‘選擇器:empty’)

作用:匹配指定選擇器內(nèi)容為空的元素

說(shuō)明：如果有子元素就不為空

:parent

語(yǔ)法：$(‘選擇器:parent’)

作用:和empty相反，匹配指定選擇器內(nèi)容不為空的元素

9.過(guò)濾-屬性過(guò)濾選擇器

?包含屬性[attribute]

語(yǔ)法:$(‘選擇器[屬性名稱]’)

作用:匹配選擇器，有該屬性的元素（標(biāo)簽）

包含值[attribute*=value]

語(yǔ)法:$(‘選擇器[屬性名稱*=屬性值]’)

作用：用于匹配選中選擇器中屬性名含有屬性值的元素

?等值[attribute=value]

語(yǔ)法：$(‘選擇器[屬性名稱=屬性值]’)

作用:用于匹配選中選擇器中屬性名等于屬性值的元素

?不等值[attribute!=value]

語(yǔ)法:$(‘選擇器[屬性名!=屬性值]’)

作用:用于匹配選中選擇器中的元素屬性名不等于屬性值的元素

?值開(kāi)頭[attribute^=value]

語(yǔ)法:$(‘選擇器[屬性名^=屬性值]’)

作用:用于匹配選中的元素屬性名開(kāi)頭為指定元素屬性值的元素

?值結(jié)尾[attribute$=value]

語(yǔ)法:$(‘選擇器[屬性名$=屬性值]’)

作用:用于匹配選中的元素屬性名結(jié)尾為指定元素屬性值的元素

案例代碼：

<!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" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Jquery-屬性過(guò)濾選擇器</title>
</head>
<body>
  <h1>屬性過(guò)濾選擇器</h1>
  <hr/>
  <div>
      <span datas='1' >小明</span>
      <span datas='2' >小明2號(hào)</span>
     
      <span>小紅</span>
  </div>
  <div id="test">
  <p>姓名:<input name='username' type="text" value='小明'/></p>
  <p>真實(shí)姓名:<input name='truename' type="text" value='王明' /></p>
  <p>密碼：<input type="text" name="pwd" value="123456" id=""></p>
  <p>確認(rèn)密碼：<input type="text" name="pwd" value="7897" id=""></p>
  </div>
  <h3>----------------------華麗分割線---------------------</h3>
  <div id='test2'>
      <p>姓名:<input name='username' type="text" value='小明'/></p>
  <p>真實(shí)姓名:<input name='truename' type="text" value='王明' /></p>
  <p>密碼：<input type="text" name="pwd" value="123" id=""></p>
  <p>密碼2：<input type="text" name="pwd" value="123456" id=""></p>
  <p>密碼3：<input type="text" name="pwd" value="1234567890" id=""></p>
  </div>
   
</body>
<script src="jquery-1.8.2.js"></script>
<script>
   //選中所有屬性
   $('#test input[name]').css('background','red');
   //包含
    $('#test input[value*=1]').css('background','blue');
   //相等
    $('#test input[name=truename]').css('background','green');
   //不等
   $('#test2 input[name!=truename]').css('background','green');
   //值開(kāi)始為
   $('#test2 input[value^=123456]').css('background','red');
   
   //值結(jié)束為
   $('#test2 input[value$=90]').css('background','blue');
   
</script>
</html>

10.過(guò)濾-子元素

和簡(jiǎn)單并且選擇器做比較

?第一個(gè)子:first-child

語(yǔ)法：$(‘選擇器:first-child’)

作用：匹配指定父元素的第一個(gè)子元素

?最后一個(gè)子:last-child

語(yǔ)法:$(‘選擇器:last-child’)

作用:匹配指定父元素下的最后一個(gè)子元素

?指定子:nth-child(index/even/odd)

語(yǔ)法:$(‘選擇器:nth-child(index)’)

作用:匹配指定父元素的指定索引元素或索引為奇數(shù)或索引為偶數(shù)的元素

說(shuō)明：

Index:代表索引，索引的值從（1）開(kāi)始，要和eq區(qū)分開(kāi)來(lái)

Even：代表偶數(shù)

Odd：代表奇數(shù)

?唯一子:only-child

語(yǔ)法:$(‘選擇器:only-child’)

作用:如果當(dāng)前元素為父元素的唯一元素則匹配

11.過(guò)濾-可見(jiàn)性