码迷,mamicode.com
首页 > Web开发 > 详细

JQuery选择器总结

时间:2018-07-07 11:23:15      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:偶数   size   奇数   head   简单的   文本   执行   idv   parent   

JQery选择器写法简单,能够支持CSS1至CSS3选择器并且具有完善的处理机制。是我们常用的选择器。今天就JQuery选择器我们做简单的总结。

JQuery选择器分类

1、基本选择器

2、层次选择器

3、过滤选择器

  3.1、基本过滤选择器

  3.2、内容过滤选择器

  3.3、可见性过滤选择器

  3.4、属性过滤选择器

  3.5、子元素过滤选择器

  3.6、表单对象属性过滤选择器

4、表单选择器

JQuery选择器详解

1、JQuery基本选择器

选择器 相关描述 返回 选择器示例
#id  根据指定的id匹配元素 单个元素 $("#main")选择id=main的元素
.class 根据类匹配元素 集合元素 $(".main")选择class=main的元素
* 匹配所有元素 集合元素 $("*")选择所有的元素
Element 根据元素名匹配元素 集合元素 $("div")选择所有的div元素
E1,E2,E3 分组匹配元素 集合元素 $("div,span,.old)选择所有的idv.span,class=old的元素

应该注意的是:

      $("E1+E2")可以用$(E1).next(E2)代替

      $("E1~E2")可以用$(E1).nextAll(E2)代替

2、Jquery层次选择器

 选择器 描述  返回值 选择器用例
 $("E1 E2")  选择E1下所有的E2  集合元素  $("div span")选择div下面的所有span元素
  $("E1>E2")  选择E1下的子E2,不包含E2下满足的元素  集合元素

 $("div>span")选择div下面的span元素,不包含span中的span元素

  $("E1+E2")  选择E1后紧相邻的E2  集合元素  $(".one+div")选择class=one的下一个div元素
  $("E1~E2")  选择E1之后的所有E2  集合元素  $("#one~div")选择id为one后的所有div元素

 

3、JQuery过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素,过滤规则与css中的伪类选择器语法相同,即过滤选择器都是以冒号(:)开头

3.1、基本过滤选择器

选择器 描述 返回值 选择器用例
:first  选择第一个元素  单个元素 $("div:first”)选择第一个div元素
:last 选择最后一个元素 单个元素 $("div:last”)选择最后一个div元素
:not(E1) 去除所有E1选择器匹配的元素 集合元素 $("div:not(.my)")选择所有的class不是my的div元素
:even 选择所有索引号为偶数的元素,索引从0开始  集合元素 $("tr:even")选择表格中所有的偶数行
:odd 选择所有索引为奇数的元素,索引从0开始 集合元素 $("tr:odd")选择表格中所有的奇数行
:eq(index) 选择索引值为Index的元素,Index从0开始 单个元素 $("tr:eq(1)")选择所有索引值为1的行
:gt(index) 选择所有索引值大于index的元素,index从0开始 集合元素 $("tr:gt(1)")选择所有索引值大于1的行
:lt(index) 选择所有索引值小于index的元素,index从0开始 集合元素 $("tr:lt(1)")选择所有索引值小于1的行
:header 所取所有标题元素 h1-h6 集合元素 $(".header")选择网页中所有的<h1>\<h2>
:animated 选择当前正在执行动画的元素 集合元素 $("div:animated") 选择正在执行动画的div元素

 

 3.2、JQuery内容过滤选择器

选择器 描述 返回值 选择器用例
:contains(text) 选择包含text文本内容的元素 集合元素 $(“div:contain(‘好‘)”)选择内容包含好的所有div
:empty  选择不包含元素或者文本的空元素 集合元素 $("div:empty")选择不包含子元素的所有div元素
:has(E1) 选择包含有(E1选择器匹配到的元素)的所有元素   集合元素 $("div:has(p)")选择含有P元素的所有div元素
:parent 选择含有子元素或者文本的元素 集合元素 $("div:parent")选择用于子元素的所有div元素

 

 

 3.3、可见性过滤选择器

选择器 描述 返回值 选择器用例
:hidden 选择所有不可见元素 集合元素

$(“.hidden”)选择所有不可见元素

包括:<input type="hidden"/>

<div style="display:none">

<div style="visibility:hidden">

:visibke 选择所有可见元素 集合元素 $("div:visible")选择所有的div元素

 

JQuery选择器总结

标签:偶数   size   奇数   head   简单的   文本   执行   idv   parent   

原文地址:https://www.cnblogs.com/chongzixing/p/9276622.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!