一、基本选择器

1. id选择器(指定id元素)

将id="one"的元素背景色设置为黑色。(id选择器返单个元素)

$(document).ready(function () {
$('#one').css('background', '#000');
});

2. class选择器(遍历css类元素)

将class="cube"的元素背景色设为黑色

$(document).ready(function () {
$('.cube').css('background', '#000');
});

3. element选择器(遍历html元素)

将p元素的文字大小设置为12px

$(document).ready(function () {
$('p').css('font-size', '12px');
});

4. * 选择器(遍历所有元素)

$(document).ready(function () {
// 遍历form下的所有元素,将字体颜色设置为红色
$('form *').css('color', '#FF0000');
});

5. 并列选择器

$(document).ready(function () {
// 将p元素和div元素的margin设为0
$('p, div').css('margin', '0');
});

二、 层次选择器

1. parent > child(直系子元素)

2. prev + next(下一个兄弟元素,等同于next()方法)

3. prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法)

三、 过滤选择器

1. 基本过滤选择器

——1.1 :first和:last(取第一个元素或最后一个元素)

——1.2 :not(取非元素)

——1.3 :even和:odd(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数)

——1.4 :eq(x) (取指定索引的元素)

——1.5 :gt(x)和:lt(x)(取大于x索引或小于x索引的元素)

——1.6 :header(取H1~H6标题元素)

2. 内容过滤选择器

——2.1 :contains(text)(取包含text文本的元素)

——2.2 :empty(取不包含子元素或文本为空的元素)

——2.3 :has(selector)(取选择器匹配的元素)

——2.4 :parent(取包含子元素或文本的元素)

3. 可见性过滤选择器

——3.1 :hidden(取不可见的元素)

——3.2 :visible(取可见的元素)

4. 属性过滤选择器

——4.1 [attribute](取拥有attribute属性的元素)

——4.2 [attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素)

——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value](attribute属性值以value开始,以value结束,或包含value值)

在属性选择器中,^$符号和正则表达式的开始结束符号表示的含义是一致的,*模糊匹配,类似于sql中的like '%str%'。

——4.4 [selector1][selector2](复合型属性过滤器,同时满足多个条件)

5. 子元素过滤选择器

——5.1 :first-child和:last-child

:first-child表示第一个子元素,:last-child表示最后一个子元素。

需要大家注意的是,:fisrst和:last返回的都是单个元素,而:first-child和:last-child返回的都是集合元素。举个例子:div:first返回的是整个DOM文档中第一个div元素,而div:first-child是返回所有div元素下的第一个元素合并后的集合。

——5.2 :only-child

当某个元素有且仅有一个子元素时,:only-child才会生效。

——5.3 :nth-child

看到这个就想起英文单词里的,fourth, fifth, sixth……,nth表示第n个,:nth-child就表示第n个child元素。要注意的是,这儿的n不像eq(x)、gt(x)或lt(x)是从0开始的,它是从1开始的,英文里好像也没有zeroth这样的序号词吧。

:nth-child有三种用法:

1) :nth-child(x),获取第x个子元素 
2) :nth-child(even)和:nth-child(odd),从1开始,获取第偶数个元素或第奇数个元素 
3) :nth-child(xn+y),x>=0,y>=0。例如x = 3, y = 0时就是3n,表示取第3n个元素(n>=0)。实际上xn+y是上面两种的通项式。(当x=0,y>=0时,等同于:hth-child(x);当x=2,y=0时,等同于nth-child(even);当x=2,y=1时,等同于:nth-child(odd))

6. 表单对象属性过滤选择器

——6.1 :enabled和:disabled(取可用或不可用元素)

:enabled和:diabled的匹配范围包括input, select, textarea。

——6.2 :checked(取选中的单选框或复选框元素)

——6.3 :selected(取下拉列表被选中的元素)


四、表单选择器

1. :input(取input,textarea,select,button元素)

:input元素这里就不再多说了,前面的一些例子中也已经囊括了。

2. :text(取单行文本框元素)和:password(取密码框元素)

这两个选择器分别和属性选择器$('input[type=text]')、$('input[type=password]')等同。

3. :radio(取单选框元素)

:radio选择器和属性选择器$('input[type=radio]')等同

4. :checkbox(取复选框元素)

:checkbox选择器和属性选择器$('input[type=checkbox]')等同

5. :submit(取提交按钮元素)

:submit选择器和属性选择器$('input[type=submit]')等同

6. :reset(取重置按钮元素)

:reset选择器和属性选择器$('input[type=reset]')等同

7. :button(取按钮元素)

:button选择器和属性选择器$('input[type=button]')等同

8. :file(取上传域元素)

:file选择器和属性选择器$('input[type=file]')等同

9. :hidden(取不可见元素)

jQuery的一些选择器的更多相关文章

  1. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  2. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  3. JQuery:JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  4. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  5. jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...

  6. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  7. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  8. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  9. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  10. jQuery简单过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <!--jQuery选择器详解 根据所获 ...

随机推荐

  1. TensorFlow高层次机器学习API (tf.contrib.learn)

    TensorFlow高层次机器学习API (tf.contrib.learn) 1.tf.contrib.learn.datasets.base.load_csv_with_header 加载csv格 ...

  2. Reroute Unassigned Shards——遇到主shard 出现的解决方法就是重新路由

    Red Cluster! 摘自:http://blog.kiyanpro.com/2016/03/06/elasticsearch/reroute-unassigned-shards/ There a ...

  3. 【转】IIS初始化(预加载),解决第一次访问慢,程序池被回收问题

    原地址:http://www.debugrun.com/a/mpyWXwg.html 读在最前面: 1.本文以IIS8,Windows Server 2012R2做为案例 2.IIS8 运行在 Win ...

  4. MEF基本概念

    基本概念: Managed Extensibility Framework 或 MEF 是一个用于创建可扩展的轻型应用程序的库,在.NET 4.0发布 Container:容器,使用Compositi ...

  5. Edge 浏览器

    Edge浏览器设计理念 无法播放:https://edgewelcomecdn.microsoft.com/site/images/tabs/rs3/tabs_screen.acd367a2.mp4 ...

  6. What's new in Safari 11.0

    导语: Safari 11.0 的亮点 网络会议.使用WebRTC标准实现对等会议. 开发调试工具增强.使用用于测量代码和网络性能的新工具来测试代码. WebAssembly.当使用新的WebAsse ...

  7. JS基本功 | JavaScript专题之数组 - 方法总结

    Array.map() 1.   map() 遍历数组 语法: let new_array = arr.map(function callback(currentValue, index, array ...

  8. 解决win8.1下sql配置iis的问题

    在配置iis8.5时,ISAPI和CGI限制中没有ASP.NET v4.0.30319, 所以要注册.net 4.0 注册方法为在“运行”中输入cmd,然后在命令行中输入: C:\WINDOWS\Mi ...

  9. c#学习0217

    1 继承 继承 1 子类是否继承了父类的构造函数 答案:子类并没有继承父类的构造函数 但是子类或默认调用父类的无参数的构造函数 在子类中创建父类对象 这样子类才可以使用父类的成员 如果在父类中声明了有 ...

  10. HDU 1171 Big Event in HDU【01背包】

    题意:给出n个物品的价值和数目,将这一堆物品分给A,B,问怎样分使得两者的价值最接近,且A的要多于B 第一次做的时候,没有思路---@_@ 因为需要A,B两者最后的价值尽可能接近,那么就可以将背包的容 ...