Web UI開發神器—Kendo UI for jQuery數據管理之過濾操作

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

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控件。Kendo UI for jQuery是創建現代Web應用程序的最完整UI庫。

默認情況下，Kendo UI Grid過濾功能處于禁用狀態。要控制Grid中的過濾，請使用filterable屬性。

Grid使您可以實現以下過濾器選項：

標題行過濾
通過復選框過濾
自定義菜單過濾

標題行過濾

要啟用網格標題中的過濾器行，請將模式設置為row。結果基于基礎列數據的數據類型，網格將在列標題中呈現字符串值、數字輸入或日期選擇器的文本框進行過濾。您還可以指定默認的過濾器運算符，當用戶在過濾器文本框中輸入值并從鍵盤按Enter或Tab時將應用該默認過濾器。要處理這種情況，請將相應列的cell設置為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>

通過復選框過濾

要在過濾器菜單中呈現復選框列表，請為所需的Grid列設置multi=true，還可以將復選框過濾器與itemTemplate定義結合使用，并自定義將顯示的復選框項目。

<!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>

自定義菜單過濾

您可以為網格過濾器的菜單配置應用通用設置，并在每列中自定義其UI。有關實現自定義菜單篩選的可運行示例演示了如何：

通過設置extra = false來指定單個過濾條件；
將字符串列的過濾器運算符限制為僅、等于和不等于開始；
定義內置的日期選擇器用戶界面，以過濾網格中的日期時間列；
分別為Title和City列實例化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中文網！

習大綱

一、了解Jquery

1.什么是jquery

Jquery 是一款優秀的JavaScript框架，它是一個輕量的JS庫，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,火狐1.5+,谷歌，safari2.0+等），使用Jquery讓web開發變得更簡單，例如：文檔操作、文檔選擇、制作動畫、事件處理、AJAX的使用以及其他的功能。

2.什么是框架

JS框架就是對JS各種功能的封裝和抽象，使我們在開發的時候具有簡便性和更好的兼容性，并且可以擴展框架的內容。

3.常見的JS框架

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

Jquery 、 phototype、Mootools

1.2JS前端框架(框架)

YUI（yahoo user interface 雅虎的）

Kissy（淘寶自己的框架）

JX(騰訊自己的框架)

Tangram(百度自己的框架)

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

1.3.庫和框架的區別

所謂的庫就類似于一個工具箱，我們在做項目的時候需要用這些工具來完成我們要的前端效果。

所謂的框架就是別人已經封裝好的效果我們直接拿過來使用即可。

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

框架具有選擇性如果沒有給我們封裝那個效果我們同樣要自己來寫。

4.jquery的特點

開源（源碼開放）

輕量級，代碼非常小巧

完善的學習資源，語法簡練、語義易懂、學習快速、豐富文檔

出色的瀏覽器兼容

出色的dom操作

插件豐富，除了 jQuery 自身帶有的一些特效外，可以通過插件實現更多功能

5.jquery快速體驗

1.1下載

官方網站:http://www.jquery.com

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

下載后出現

文件后綴會出現min.js 這個是壓縮版也是線上版，.js是開發版本

壓縮版：沒有空格，沒有換行，沒有文字說明

未壓縮版：有空格，有換行，有簡單的注釋

如何選用版本呢？

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

區別在于兼容性：

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

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

建議使用（1.7-1.9）版本

二、DOM操作（一）

1.樣式操作

1.1CSS樣式操作

?JS操作

語法：JS對象.style.CSS屬性轉化為JS后的名稱=屬性的值

JS設置背景色：

對象.BackgroundColor=’red’;

CSS設置背景色:

background-color: red;

?缺點：

需要將CSS的寫法轉換成JS的寫法

一次只能設置一個樣式

?Jquery操作

語法:

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

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

$().css(json對象)//設置樣式的多個屬性

說明：json對象的鍵=>值（‘屬性名’=>’屬性值’）

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

三、Jquery-選擇器

1.什么是選擇器

所謂選擇器就是用來查找定位DOM元素的工具

獲取和選擇：

HTML中的標簽元素

JS中的DOM節點

JS中的對象

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

簡單選擇器的對比

3.基本-CSS選擇器

靈感來源于CSS選擇器

1.1ID選擇器

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

作用：選擇頁面指定ID的元素的名稱，返回JQ對象

說明：說明相當于JS中的document.getElementsById();

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

【原生JS】

obj = document.getElementById('em1');

obj.style.color='red';

【Jquery】

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

?腳下留心：$is not defined

當我們看到$ is not defined 說明我們沒有引入jquery操作庫

1.2類選擇器

語法：$(‘.類名’)

作用：選擇頁面指定類名稱的元素，返回JQ對象

說明:相當于JS中document.getElementsByClassName

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

1.3標簽選擇器

語法：$(‘標簽名稱’);

作用：選定頁面指定標簽的名稱

說明：相當于JS中的getElemetsTagName()

【HTML】

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

【JS】

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

?腳下留心：是將頁面中所有的span標簽字體顏色全部改變。

1.4通配符選擇器

語法：$(*)

作用：選擇頁面所有的標簽元素，返回JQ對象

//通配符選擇器

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

1.5群組選擇器

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

作用：選擇頁面同時指定多個標簽元素，返回JQ對象

?特點：

可以選擇多個選擇器，多個之間使用,號隔開

可以執行相同的操作

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

4.基本-層級選擇器

1.1后代選擇器

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

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

特點：

給所有的子孫增加樣式

多個選擇器使用逗號分隔開來

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

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

1.2子元素選擇器

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

作用:選中父級下的兒子選擇器

特點：選中父級下的兒子但是不包含孫子

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

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

后代選擇器：會選中父級下的所有標簽元素

子元素選擇器：只會選中父級下的所有子元素

1.3同輩選擇器

【+】緊鄰同輩

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

作用；選中指定對象的下一個兄弟元素

特點：

只是選擇一個和其緊鄰的下一個元素(緊鄰同輩元素)

//選擇緊挨p元素的下一個元素

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

【~】相鄰同輩

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

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

特點:

從對象下面開始找，所有指定的兄弟元素

//選擇相鄰p元素的下一個元素

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

5.基本-表單選擇器

?:input

語法:$(‘:input’)

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

?:text

語法:$(‘:text’)

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

?:password

語法:$(‘:password’);

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

?:radio

語法:$(‘:radio’);

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

?:checkbox

語法：$(‘:checkbox’);

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

?:file

語法：$(‘:file’)

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

?:hidden

案例：

在表單元素中單選和復選框比較特殊，不能設置顏色，在實際項目中我們可以通過

div設置圖片來代替單選和復選框

6.過濾-表單屬性過濾選擇器

案例代碼：

<!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>真實姓名:<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>興趣愛好：足球<input checked type="checkbox" value='足球' name='hobby[]' />籃球<input checked type="checkbox"  value='籃球' name='hobby[]' />其他<input type="checkbox"  value='其他' name='hobby[]' /></p>
           <p>地區：<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

語法：$(‘:checked’)

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

腳下留心：同時包含單選和多選按鈕

?:selected

語法:$(‘:selected’)

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

?:disabled

語法：$(‘:disabled’)

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

?:enabled

語法:$(‘:enabled’)

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

7.過濾-簡單過濾/選中

?:first

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

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

?:last

語法:$(‘:last’);

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

?腳下留心：

First和last 操作的是當前選擇器集合下的元素（當前選中的所有標簽）集合外的不會被選中

?:even

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

作用:用于匹配元素集合中索引為偶數的（說明：偶數從零開始）

?:odd

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

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

?小總結

even和odd他們的作用剛剛相反，在實際工作項目中我們用來區分列表的每行顯示

?:eq

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

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

?:gt

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

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

?:lt

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

作用：和gt 的作用相反

腳下留心:

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

:not(selector)

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

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

:header

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

作用:匹配選中所有標題標簽元素

8.過濾-內容過濾選擇器

:contains

語法：$(‘選擇器:contains(內容)’)

作用: 匹配選中標簽中是否存在指定內容

例如：

:has

語法:$(‘選擇器1:has(標簽名稱)’)

作用：匹配指定選擇器中的指定標簽。

案例：

:empty

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

作用:匹配指定選擇器內容為空的元素

說明：如果有子元素就不為空

:parent

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

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

9.過濾-屬性過濾選擇器

?包含屬性[attribute]

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

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

包含值[attribute*=value]

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

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

?等值[attribute=value]

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

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

?不等值[attribute!=value]

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

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

?值開頭[attribute^=value]

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

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

?值結尾[attribute$=value]

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

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

案例代碼：

<!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-屬性過濾選擇器</title>
</head>
<body>
  <h1>屬性過濾選擇器</h1>
  <hr/>
  <div>
      <span datas='1' >小明</span>
      <span datas='2' >小明2號</span>
     
      <span>小紅</span>
  </div>
  <div id="test">
  <p>姓名:<input name='username' type="text" value='小明'/></p>
  <p>真實姓名:<input name='truename' type="text" value='王明' /></p>
  <p>密碼：<input type="text" name="pwd" value="123456" id=""></p>
  <p>確認密碼：<input type="text" name="pwd" value="7897" id=""></p>
  </div>
  <h3>----------------------華麗分割線---------------------</h3>
  <div id='test2'>
      <p>姓名:<input name='username' type="text" value='小明'/></p>
  <p>真實姓名:<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');
   //值開始為
   $('#test2 input[value^=123456]').css('background','red');
   
   //值結束為
   $('#test2 input[value$=90]').css('background','blue');
   
</script>
</html>

10.過濾-子元素

和簡單并且選擇器做比較

?第一個子:first-child

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

作用：匹配指定父元素的第一個子元素

?最后一個子:last-child

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

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

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

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

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

說明：

Index:代表索引，索引的值從（1）開始，要和eq區分開來

Even：代表偶數

Odd：代表奇數

?唯一子:only-child

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

作用:如果當前元素為父元素的唯一元素則匹配

11.過濾-可見性