整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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 元素

在线咨询
上一篇：14个HTML5实现的效果合集
下一篇：零基础学习HTML之html框架内嵌框架和head头信息设置

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 琅琊区 千山区 九原区 民丰县 湘乡市 师宗县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服