基本选择器

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');
});

层叠选择器: 
$("form input") 选择所有的form元素中的input元素 
$("#main > *") 选择id值为main的所有的子元素 
$("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 
$("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 
 
过滤选择器
基本过滤选择器: 
 
$("tr:first") 选择所有tr元素的第一个 
$("tr:last") 选择所有tr元素的最后一个 
$("input:not(:checked) + span") 过滤掉:checked的选择器的所有的input元素 
 
$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) 
 
$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素 
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素 
$("td:gt(4)") 选择td元素中序号大于4的所有td元素 
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素 
 
内容过滤选择器: 
 
$("div:contains('John')") 选择所有div中含有John文本的元素 
$("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组 
$("div:has(p)") 选择所有含有p标签的div元素 
$("td:parent") 选择所有的以td为父节点的元素数组 
 
可视化过滤选择器: 
 
$("div:hidden") 选择所有的被hidden的div元素 
$("div:visible") 选择所有的可视化的div元素 
 
 
属性过滤选择器: 
 
$("div[id]") 选择所有含有id属性的div元素 
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素 
 
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 
 
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素 
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素 
$("input[name*='man']") 选择所有的name属性包含'news'的input元素 
 
$("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 
 
 
子元素过滤选择器: 
 
$("div span:first-child") 返回所有的div元素的第一个子节点的数组 
$("div span:last-child") 返回所有的div元素的最后一个节点的数组 
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器: 
 
$(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button 
$(":text") 选择所有的text input元素 
$(":password") 选择所有的password input元素 
$(":radio") 选择所有的radio input元素 
$(":checkbox") 选择所有的checkbox input元素 
$(":submit") 选择所有的submit input元素 
$(":image") 选择所有的image input元素 
$(":reset") 选择所有的reset input元素 
$(":button") 选择所有的button input元素 
$(":file") 选择所有的file input元素 
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 
 
 
表单元素过滤选择器: 
 
$(":enabled") 选择所有的可操作的表单元素 
$(":disabled") 选择所有的不可操作的表单元素 
$(":checked") 选择所有的被checked的表单元素 
$("select option:selected") 选择所有的select 的子元素中被selected的元素

下面拿张表给大家参考

jQuery selector 选择器的更多相关文章

  1. jQuery Custom Selector JQuery自定义选择器

    什么是JQuery的选择器呢,详见JQuery中的Selector: http://docs.jquery.com/Selectors 比如 $("div:contains('John')& ...

  2. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第2章 jQuery 基础选择器

    1.#id选择器 jquery能使用CSS选择器来操作网页中的标签元素.如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id") 其中#my_id ...

  4. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  5. jQuery各种选择器总结

    首先介绍几个简单的: id选择器 $('#p1').html('<font color='red'>nihao</font>); 类选择器:表示页面上所有应用了a样式的标签 $ ...

  6. jquery selector

    jquery的选择器功能 1 :lt(index) selector 一组元素选择index之前的元素,若index<0 则倒着选过来 http://api.jquery.com/lt-sele ...

  7. 【转】jQuery on()选择器函数

    on()函数用于为指定元素的一个或多个事件绑定事件处理函数. 此外,你还可以额外传递给事件处理函数一些所需的数据. 从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统 ...

  8. Golang 网络爬虫框架gocolly/colly 二 jQuery selector

    Golang 网络爬虫框架gocolly/colly 二 jQuery selector colly框架依赖goquery库,goquery将jQuery的语法和特性引入到了go语言中.如果要灵活自如 ...

  9. python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

随机推荐

  1. 面向对象程序设计-C++_课时13初始化列表

    构造函数设置成员初值方法有两种:一种是在函数体内赋值,另一种是采用初始化列表的形式. 初始化列表BETTER 函数体内赋值 类名::类名(形参1,形参2,...形参n) { 数据成员1=形参1; 数据 ...

  2. cocos2d-x创建场景

    今天开始学习Cocos2d-x,使用的版本是2.1.4,这个版本比较老,对应的参考资料也比较齐全. 在mac/xcode环境下,代码是写在Classes文件夹下的,和iOS应用类似,程序从AppDel ...

  3. a simple erlang process pool analysis

    a simple erlang process pool analysis 这是一个简单的erlang进程池分析,是learn you some erlang for Great Good 里面的一个 ...

  4. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  5. 一步一步学c#(四):继承

    继承 1·继承的类型 在面向对象的编程中,有两种截然不同的继承类型,实现继承和接口继承. 实现继承:表示一个类型派生于一个基类型,它拥有该基类型的所有成员字段和函数. 接口继承:表示一个类型只继承了函 ...

  6. JavaScript引用类型之Array数组的排序方法

    数组中已经存在两个JavaScript给我们定义好的重排序的方法:reverse()和sort()方法,下面来简单分析下: 1.reverse()    用于反转数组项的顺序,代码如下: <sc ...

  7. oracle归档日志

    前几天因为导入大的东西,弄得很久都没动静,一看最后才发现是归档满了.但是很多的命令还是很是很不熟悉,所以看了下,百度了下.整理下这个. 1.查看归档日志大小及使用情况 select * from v$ ...

  8. 【转载】谈谈Cookie

    0×00 引言 在Web技术的发展史上,Cookie技术的出现是一次重大的 变革.但是, Cookie技术又是一项非常有争议的技术,从它诞生之日起就成了广大网络用户和Web开发人员的一个争论焦点,原因 ...

  9. 算法学习笔记(LeetCode OJ)

    ================================== LeetCode的一些算法题,都是自己做的,欢迎提出改进~~ LeetCode:http://oj.leetcode.com == ...

  10. 大数据技术 vs 数据库一体机[转]

    http://blog.sina.com.cn/s/blog_7ca5799101013dtb.html 目前,虽然大数据与数据库一体机都很火热,但相当一部分人却无法对深入了解这两者的本质区别.这里便 ...