整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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.過濾-可見性

          ?:hidden

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

          作用:匹配不可見元素

          ?:visible

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

          作用:匹配可見元素

          選擇器:hidden 之間是沒有空格的

          $('p') :元素選擇器,使用 CSS 選擇器來選取 HTML 元素。
          $(".test") :.class 選擇器 可以通過指定的 class 查找元素。
          $("#test") :#id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
          $("[href]") :屬性選擇器,選取所有帶有 href 屬性的元素。比如$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。$("[href$='.jpg']")選取所有 href 值以 ".jpg" 結尾的元素。
           
          2、jQuery支持的css3基本選擇器
          語法描述$("*")選取所有元素$(this)選取當前 HTML 元素$("p.intro")選取 class 為 intro 的 <p> 元素$("p:first")選取第一個 <p> 元素$("ul li:first")選取第一個 <ul> 元素的第一個 <li> 元素$("ul li:first-child")選取每個 <ul> 元素的第一個 <li> 元素$("[href]")選取帶有 href 屬性的元素$("a[target='_blank']")選取所有 target 屬性值等于 "_blank" 的 <a> 元素$("a[target!='_blank']")選取所有 target 屬性值不等于 "_blank" 的 <a> 元素$(":button")選取所有 type="button" 的 <input> 元素 和 <button> 元素$("tr:even")選取偶數位置的 <tr> 元素$("tr:odd")選取奇數位置的 <tr> 元素
           
          選擇器說明*、E、E F、E。C、E#I等CSS1選擇器通配符、標記選擇器,后代選擇器,交集選擇器,ID選擇器等CSS1中的選擇器E>F子選擇器,只選中第一代E+F所有名稱為F的標記,并且該標記緊接著前面的E標記,下一個兄弟元素E~F所有名稱為F的標記,如果F和E是兄弟關系,并且F位于E后面(不需要緊跟E)E:has(F)所有名稱為E的標記,并且該標記包含F標記E[A]所有名稱為E的標記,并且具有屬性AE[A=V]所有名稱為E的標記,并且屬性A的值等于VE[A^=V]所有名稱為E的標記,并且屬性A的值以V開頭E[A$=V]所有名稱為E的標記,并且屬性A的值以V結尾E[A*=V]所有名稱為E的標記,并且屬性A的值包含V
           
          3、css3基本選擇器中可細分出層次選擇器
          通過DOM元素之間的層次關系來獲取特定元素,例如后代元素,子元素,相鄰元素和同輩元素等。
          $("ancestor descendant"):選取ancestor元素里的所有descendant元素。
          例:$("div span")選取<div>里的所有的<span>元素。
          $("parent>child")選取parent元素下的child元素,與$("ancestor descendant")的區別是$("ancestor descendant")選取的是后代元素。
          例:$("div >span")選取<div>下元素名是<span>的子元素。
          $("prev+next")選取緊接在prev元素后面的next元素。
          例:$(".one+div")選取class為one的下一個<div>同輩元素。
          $("prev~siblings")選取prev元素之后的所有siblings元素。
          例:$("#two~div")選取id為two的元素后面所有<div>同輩元素。
          注意:
          jquery中next()來代替$("prev+next")選擇器。
          jquery中nextAll()來代替$("prev~siblings")選擇器。
          $("prev~siblings")和jquery中siblings()的區別:
          $("prev~siblings")只能選中"prev"后面的同輩<div>元素。
          siblings()與前后位置無關,只有是同輩節點就都能匹配。
          CSS位置選擇器
          目的:基于元素的位置選擇元素,又不局限于此。
          語法:jQuery的位置選擇器借鑒了css中偽類的語法,即選擇器以冒號(:)開始,可以看做是CSS為類的一種擴展。
          jQuery支持的CSS3位置選擇器選擇器說明:first第一個元素,例如div p:first選中頁面中所有p元素的第一個,且該p元素是div的子元素:last最后一個元素,例如div p:last選中頁面中所有p元素的最后一個,且該p元素是div的子元素:first-child第一個子元素,例如ul:first-child選中所有的ul元素,且該ul元素是其父元素的第一個子元素:last-child最后一個子元素,例如ul:last-child選中所有的ul元素,且該ul元素是其父元素的最后一個子元素:only-child 所有沒有兄弟的子元素,例如p:only-child選中所有的p元素,如果該p元素是其父元素的唯一子元素:nth-child(n)第n個子元素,例如li:nth-child(3)選中所有li元素,且該li元素是其父元素的第3個子元素(從1開始計數):nth-child(odd|even)所有的奇數號或偶數號的子元素:nth-child(nX+Y)利用公式來計算子元素的位置,例如:nth-child(5n+1)選中第5n+1個子元素(n從0開始計數,即1,6,11,...):odd或:even 對于整個頁面而言,選中奇數或偶數號元素,例如p:even為頁面中所有排在偶數位的p元素(從0開始計算):eq(n)頁面中第n個元素,例如p:eq(4)為頁面中第5個p元素:gt(n)頁面中第n個元素之后的所有元素(不包括第n個元素):lt(n)頁面中第n個元素之前的所有元素(不包括第n個元素)
           
          過濾選擇器(自定義選擇器)
          目的:處理更復雜的選擇,是jQuery自定義的,不是CSS3中的選擇器。
          語法:jQuery的過濾選擇器借鑒了css中偽類的語法,即選擇器以冒號(:)開始。
          jQuery常用的過濾選擇器
          選擇器說明:animated 所有處于動畫中的元素:button所有按鈕,包括input[type=button]、input[type=submit]、input[type=reset]和<button>標記:checkbox所有復選框,等同于input[type=checkbox]:checked選擇被選中的復選框或單選框:contains(characters)選擇所有包含了文本"characters"的元素:disabled頁面中被禁用了的元素:enabled頁面中沒有被禁用的元素:file表單中的文件上傳元素,等同于input[type=file]:header選中所有標題元素,例如<h1>~<h6>:hidden匹配所有的不可見元素,例如設置為display:none的元素或input元素的type屬性為“hidden”的元素:image表單中的圖片按鈕,等同于input[type=image]:input表單輸入元素,包括<input>、<select>、<textarea>、<button>:not(filter)反向選擇:parent選擇所有擁有子元素(包括文本)的元素,即除空元素外的所有元素:password表單中的密碼域,等同于input[type=password]:radio表單中的單選按鈕,等同于input[type=radio]:reset表單中的重置按鈕,等同于input[type=radio]和button[type=reset]:selected下拉菜單中的被選中項:submit表單中的提交按鈕,包括input[type=submit]和button[type=submit]:text表單中的文本域,等同于input[type=text]:visible頁面中的所有可見元素
           
          jQuery 選擇器
          選擇器
          實例
          選取
           
           .class.class
          $(".intro.demo")
          所有 class="intro" 且 class="demo" 的元素
           
           
           
          :first
          $("p:first")
          第一個 <p> 元素
          :last
          $("p:last")
          最后一個 <p> 元素
          :even
          $("tr:even")
          所有偶數 <tr> 元素
          :odd
          $("tr:odd")
          所有奇數 <tr> 元素
           
           
           
          :eq(index)
          $("ul li:eq(3)")
          列表中的第四個元素(index 從 0 開始)
          :gt(no)
          $("ul li:gt(3)")
          列出 index 大于 3 的元素
          :lt(no)
          $("ul li:lt(3)")
          列出 index 小于 3 的元素
          :not(selector)
          $("input:not(:empty)")
          所有不為空的 input 元素
           
           
           
          :header
          $(":header")
          所有標題元素 <h1> - <h6>
          :animated
           
          所有動畫元素
           
           
           
          :contains(text)
          $(":contains('W3School')")
          包含指定字符串的所有元素
          :empty
          $(":empty")
          無子(元素)節點的所有元素
          :hidden
          $("p:hidden")
          所有隱藏的 <p> 元素
          :visible
          $("table:visible")
          所有可見的表格
           
           
           
          s1,s2,s3
          $("th,td,.intro")
          所有帶有匹配選擇的元素
           
           
           
          [attribute]
          $("[href]")
          所有帶有 href 屬性的元素
          [attribute=value]
          $("[href='#']")
          所有 href 屬性的值等于 "#" 的元素
          [attribute!=value]
          $("[href!='#']")
          所有 href 屬性的值不等于 "#" 的元素
          [attribute$=value]
          $("[href$='.jpg']")
          所有 href 屬性的值包含以 ".jpg" 結尾的元素
           
           
           
          :input
          $(":input")
          所有 <input> 元素
          :text
          $(":text")
          所有 type="text" 的 <input> 元素
          :password
          $(":password")
          所有 type="password" 的 <input> 元素
          :radio
          $(":radio")
          所有 type="radio" 的 <input> 元素
          :checkbox
          $(":checkbox")
          所有 type="checkbox" 的 <input> 元素
          :submit
          $(":submit")
          所有 type="submit" 的 <input> 元素
          :reset
          $(":reset")
          所有 type="reset" 的 <input> 元素
          :button
          $(":button")
          所有 type="button" 的 <input> 元素
          :image
          $(":image")
          所有 type="image" 的 <input> 元素
          :file
          $(":file")
          所有 type="file" 的 <input> 元素
           
           
           
          :enabled
          $(":enabled")
          所有激活的 input 元素
          :disabled
          $(":disabled")
          所有禁用的 input 元素
          :selected
          $(":selected")
          所有被選取的 input 元素
          :checked
          $(":checked")
          所有被選中的 input 元素
          

          主站蜘蛛池模板: 国产精品日韩欧美一区二区三区| 丰满岳妇乱一区二区三区| 国产在线精品一区二区高清不卡 | 精品欧洲av无码一区二区14| 免费在线视频一区| 国模无码一区二区三区| 精品无码日韩一区二区三区不卡| 久久一区二区三区99| 日本免费一区二区三区最新 | 亚洲一区二区成人| 国产午夜精品一区二区三区不卡| 国产综合视频在线观看一区| 亚洲精品色播一区二区| 3d动漫精品成人一区二区三| 久久亚洲一区二区| 国产一区二区三区不卡AV| 三上悠亚亚洲一区高清| 一区二区高清视频在线观看| 一区二区三区无码高清视频| 日本一区午夜爱爱| 一区二区在线视频观看| 精品国产不卡一区二区三区| 亚洲AV永久无码精品一区二区国产| 国产成人精品一区二三区| 波多野结衣一区在线观看| 国产一区内射最近更新| 日韩一区二区三区在线精品| 一区二区视频在线免费观看| 国产成人精品一区二三区在线观看| 日本免费精品一区二区三区| 亚洲片一区二区三区| 中文字幕亚洲乱码熟女一区二区| 超清无码一区二区三区| 久久精品一区二区三区不卡| 亚洲AV成人一区二区三区AV| 亚洲综合色一区二区三区| 国内精自品线一区91| av在线亚洲欧洲日产一区二区| 狠狠色成人一区二区三区| 熟妇人妻AV无码一区二区三区| 亚洲日本乱码一区二区在线二产线|