擊“了解更多”獲取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。有關實現自定義菜單篩選的可運行示例演示了如何:
<!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 是一款優秀的JavaScript框架,它是一個輕量的JS庫,它兼容CSS3,還兼容各種瀏覽器(IE6.0+,火狐1.5+,谷歌,safari2.0+等),使用Jquery讓web開發變得更簡單,例如:文檔操作、文檔選擇、制作動畫、事件處理、AJAX的使用以及其他的功能。
JS框架就是對JS各種功能的封裝和抽象,使我們在開發的時候具有簡便性和更好的兼容性,并且可以擴展框架的內容。
Jquery 、 phototype、Mootools
YUI(yahoo user interface 雅虎的)
Kissy(淘寶自己的框架)
JX(騰訊自己的框架)
Tangram(百度自己的框架)
ExtJs(后臺開發前端框架,全部都是AJAX操作,性能不是太好)
所謂的庫就類似于一個工具箱,我們在做項目的時候需要用這些工具來完成我們要的前端效果。
所謂的框架就是別人已經封裝好的效果我們直接拿過來使用即可。
使用庫我們可以快速做出自己想要的效果。
框架具有選擇性如果沒有給我們封裝那個效果我們同樣要自己來寫。
開源(源碼開放)
輕量級,代碼非常小巧
完善的學習資源,語法簡練、語義易懂、學習快速、豐富文檔
出色的瀏覽器兼容
出色的dom操作
插件豐富,除了 jQuery 自身帶有的一些特效外,可以通過插件實現更多功能
官方網站: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)版本
?JS操作
語法:JS對象.style.CSS屬性轉化為JS后的名稱=屬性的值
JS設置背景色:
對象.BackgroundColor=’red’;
CSS設置背景色:
background-color: red;
?缺點:
需要將CSS的寫法轉換成JS的寫法
一次只能設置一個樣式
?Jquery操作
語法:
$().css(‘屬性名’); //獲取樣式屬性的值
$().css(‘屬性名’,’屬性值’);//設置樣式的屬性和值
$().css(json對象)//設置樣式的多個屬性
說明:json對象的鍵=>值(‘屬性名’=>’屬性值’)
例如:設置背景為紅色,字符30px;
所謂選擇器就是用來查找定位DOM元素的工具
獲取和選擇:
HTML中的標簽元素
JS中的DOM節點
JS中的對象
簡單選擇器的對比
靈感來源于CSS選擇器
語法:$(‘#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操作庫
語法:$(‘.類名’)
作用:選擇頁面指定類名稱的元素,返回JQ對象
說明:相當于JS中document.getElementsByClassName
$('.em1').css({'color':'blue','font-size':'30px'});
語法:$(‘標簽名稱’);
作用:選定頁面指定標簽的名稱
說明:相當于JS中的getElemetsTagName()
【HTML】
3.使用標簽選擇器將【<span>O!NO!</span>】變成<span>黃色</span>,
【JS】
$('span').css('color','red');
?腳下留心:是將頁面中所有的span標簽字體顏色全部改變。
語法:$(*)
作用:選擇頁面所有的標簽元素,返回JQ對象
//通配符選擇器
$('*').css('color','blue');
語法:$(‘選擇器1,選擇器2,選擇器3...’);
作用:選擇頁面同時指定多個標簽元素,返回JQ對象
?特點:
可以選擇多個選擇器,多個之間使用,號隔開
可以執行相同的操作
$('div,p').css('color','red');
語法:$(‘選擇器1 選擇器2 選擇器..n’);
作用:選擇指定父級元素下的所有子元素
特點:
給所有的子孫增加樣式
多個選擇器使用逗號分隔開來
//父親下面的所有的子孫
$('#id1 span,#id2 span').css('color','blue');
語法:$(‘選擇器1>選擇器2’)
作用:選中父級下的兒子選擇器
特點:選中父級下的兒子但是不包含孫子
$('#id1 > span').css('color','red');
?思考:后代選擇器和子元素選擇器有什么區別?
后代選擇器:會選中父級下的所有標簽元素
子元素選擇器:只會選中父級下的所有子元素
【+】緊鄰同輩
語法:$(‘選擇器1+選擇器2’)
作用;選中指定對象的下一個兄弟元素
特點:
只是選擇一個和其緊鄰的下一個元素(緊鄰同輩元素)
//選擇緊挨p元素的下一個元素
$('#id3 p+span').css('color','red');
【~】相鄰同輩
語法:$(‘選擇器1~選擇器2’)
作用:選中指定對象的下的所有兄弟元素
特點:
從對象下面開始找,所有指定的兄弟元素
//選擇相鄰p元素的下一個元素
$('#id4 p~span').css('color','red');
?: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設置圖片來代替單選和復選框
案例代碼:
<!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’)
作用:匹配選中所有標題標簽元素
:contains
語法:$(‘選擇器:contains(內容)’)
作用: 匹配選中標簽中是否存在指定內容
例如:
:has
語法:$(‘選擇器1:has(標簽名稱)’)
作用:匹配指定選擇器中的指定標簽。
案例:
:empty
語法:$(‘選擇器:empty’)
作用:匹配指定選擇器內容為空的元素
說明:如果有子元素就不為空
:parent
語法:$(‘選擇器:parent’)
作用:和empty相反,匹配指定選擇器內容不為空的元素
?包含屬性[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>
和簡單并且選擇器做比較
?第一個子: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’)
作用:如果當前元素為父元素的唯一元素則匹配
?: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 元素
*請認真填寫需求信息,我們會在24小時內與您取得聯系。