基本选择器

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. nodejs上传图片模块做法;

    服务端代码: var express = require('express'); var swig = require('swig'); //1.引入multer模块 var multer = req ...

  2. IOS开发环境更换后重新制作Provisioning Profile证书详解

    新换了台Macbook,又折腾了一遍Provisioning Profile证书,苹果的证书繁锁复杂,每次制作都相当麻烦,而且Provisioning Profile证书是与设备绑定的,所以更换开发环 ...

  3. 【九】注入框架RoboGuice使用:(Your First Injected Service and BroadcastReceiver)

    上一篇我们简单的介绍了一下RoboGuice的使用([八]注入框架RoboGuice使用:(Your First Injected Fragment)),今天我们来看下服务(Service)和广播接受 ...

  4. Couldn't load libPassword from loader:NDK开发中C文件编译成cpu对应的so类库时,找不到类库报错的原因之一

    LogCat输出: 03-03 12:42:32.665: E/AndroidRuntime(32432): FATAL EXCEPTION: main03-03 12:42:32.665: E/An ...

  5. Win10下Genymotion无法正常使用的解决方法

    原Win7下安装配置的genymotion正常使用,Eclipse的Genymotion插件也可以正常运行.系统升级后,忽然就不work了. 折腾了一天试了各种方式,网上的例子也五花八门.最后还是找到 ...

  6. Android学习笔记_点九绘图与软键盘和事件传递

    最近项目里遇到的几个小问题,以前只是用吗没有深入看过,现在总结到一起,防止以后这种小问题占用太多时间.还是通过网上别人总结的很多博客学习了,挑选出最易懂明了的. 还有leader很小的问题都不放过,亲 ...

  7. JavaSE复习日记 : 实例化对象/构造方法和this关键字

    /* * 实例化对象/对象的构造方法/this关键字 */ /* * 实例化对象 * * 就是实例化某一个类; * 从不同角度去理解的话就是: * 1. 从人的认知角度: * 就是具体化某个东西; * ...

  8. 怎样从一个DLL中导出一个C++类

    原文作者:Alex Blekhman    翻译:朱金灿 原文来源: http://www.codeproject.com/KB/cpp/howto_export_cpp_classes.aspx 译 ...

  9. POJ 3061 Subsequence(Two Pointers)

    [题目链接] http://poj.org/problem?id=3061 [题目大意] 给出S和一个长度为n的数列,问最短大于等于S的子区间的长度. [题解] 利用双指针获取每一个恰好大于等于S的子 ...

  10. openStack icehouse for centos6.4 production Env 实战

    production Env brief Overview: Management Node:  controller.cc 10.114.100.115 Neutron Network Node:  ...