基本选择器

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. css之float

    在 HTML中的所有对象,默认分为两种:块元素(block element).内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素. 其实C ...

  2. nodejs中使用递归案例

    var http = require('http'); //1.正常逻辑第一步正常请求,动作进行一次的方法: function seqRequest(i,limit){ var req = http. ...

  3. Let the Balloon Rise(map)

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  4. zoj 3665 Yukari's Birthday(枚举+二分)

    Yukari's Birthday Time Limit: 2 Seconds       Memory Limit: 32768 KB Today is Yukari's n-th birthday ...

  5. TCP的流量控制

    TCP协议作为一个可靠的面向字节流的传输协议,其可靠性和流量控制由滑动窗口协议保证,而拥塞控制则由控制窗口结合一系列的控制算法实现. 要区分TCP的流量控制和拥塞控制: 流量控制是发送方的发送数据的速 ...

  6. Date对象需要注意的点

    var today=new Date(); Date对象取得了PC内部时钟的一个快照,并同时返回一个Date对象实例. 注意静态Date对象和Date对象实例的差别,后者包含一个实际的日期值.毫秒为单 ...

  7. Thread-safety with regular expressions in Java

    As mentioned in our introduction to the Pattern and Matcher classes, the Java regular expression API ...

  8. Module中引用Module中的Activity时报错了,错误是找不到R文件中的id引用

    1.好像库modul和主modul不能有相同名字和layout文件 2.资源文件名冲突导致的

  9. linux下解压iso文件

    .iso文件的格式是iso9660,iso9660是cd上的一种文件系统, 也就是说是 是数据在cd上的组织形式: 它的一些限制是: 1.最多8级子目录(可以用RockRidge Extension增 ...

  10. JWPlayer 使用小记

    最后的效果 1.从官网下载JWPlayer 下载后的文件,标红部分是必要的文件. 2.Jquery可以使用1.6以上版本 <html><head> <title>G ...