JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器。

ID选择器 $('#one')      ( '#'代表ID )
CLASS选择器 $('.two')        ( '.'代表类 )
元素选择器

$('ul')        ( 选取'ul'标签 )    

$('#one>span')

属性选择器

$('[class]')        ( 所有具有'class'属性的元素 )

$('li[class]')             ( 选中'li'下的具有'class'属性的元素 )

$('li[class="aaa"]')  ( 选中'li'下'class'为'aaa'的元素 )

$('h3[class^="n"]')    ( 选中'class'属性以"n"开头的 )

$('h3[class$="e"]')     ( 选中class属性以"e"结尾的 )

查找匹配的元素

$('li:first')                       ( 选取第一个出现的li元素 )

$('li:last')                     ( 选取最后一个出现的li元素 )

$(':header')                 ( 查找所有标题元素h1~h6 )

$('li:contains(小三)')     ( 查找li中文本有'小三'的元素 )

$('li:first-child')             ( 选取所有的第一个li   注:与:first不同 )

$('li:last-child')             ( 选取所有的最后一个li   注:与:last不同 )

$('li:nth-child(n)')         ( 选取第n个li元素    注: n>=1 )

$('ul li:only-child')         ( 选取ul中只有一个li子元素的这个li元素 )

$(':input')                     ( 匹配所有的 input/textarea/select/button )

$result = $('li').hasClass('adsasa');       ( 检查当前的元素是否含有某个特定的类,如果有,则返回true )

$('ul li').filter('.three,.seven')                ( 找出有类.three,.seven的元素 注:筛选出与指定表达式匹配的元素集合 )

$('li').is('.five122313')                          ( 检测有无指定的元素 返回布尔 注:不可用is检测给元素添加样式 )

$('p').has('span')                                  ( 检测p元素里有无指定元素 注:可以给其添加样式 )

$('li').not('li:contains(上)')                     ( not检测 选择li元素里除了文本包含'上'的元素 )

slice(n,m)                                             ( n和m为下标,选择下标为0开始 到 m之前结束(不包括m)的元素 )

$('#one').children('li:first').css( )            ( 给元素的指定子元素添加样式 )

$('.one').parent( ).css( )                         ( 给元素的父元素添加样式 )

$('.one').parents( ).css( )                       ( 给元素所有祖先元素添加样式 )

$('.one').parents('ul').css( )                    ( 给元素指定的父元素添加样式 )

$('.five').siblings( ).css()                         ( 同级相邻兄弟节点 siblings( ) )

var $res = $('li').map(function(){ 
  return $(this).attr('class');
});
console.log($res);                                  ( map( ) 查找所有的li并返回它们的属性值 返回一个数组 )

$('#one').find('li[class$=e]').css( )          ( 查找指定元素下匹配的元素 返回找到的元素 )

排除选择器

$('li:not(.b)')                                          ( 选择除了类名为b的元素 )

$('li:not(#one,#two,.aaa)')                     ( 同时排除多个 )

奇偶选择器

$('li:even')                                             ( 选取偶数 注:下标为0开始 )

$('li:odd')                                               ( 选取奇数 )

大于小于等于

$('li:gt(0)')                      ( 选取下标大于0的li元素 )

$('li:lt(3)')                       ( 选取下标小于0的li元素 )

$('li:eq(0)')                      ( 选取下标等于0的li元素 )

注:不包括本身。

可见选择器

$(':visible')                     ( 选取所有可见的元素 )

$('input:hidden')              ( 选取input表单为hidden的元素 )

关系选择器

$('.two').next( )                ( 选中下面一个相邻元素 )

$('.two').nextAll( )            ( 选中元素下面的所有相邻元素 )

$('.five').prev( )                ( 选取元素上一个相邻元素 )

$('.five').prevAll( )             ( 选取元素上面全部相邻元素 )

$('.five').prevUntil('.two')   ( 选取.five上面(不包括.five)到.two(不包括.two)的元素 )

伪类选择器

$('*:focus')                        ( 获取所有聚焦的元素 )

$(':selected')                      ( 获取下拉列表选中的元素 )

$(':checked+span')             ( 获取选中的元素 )

表单选择器

$(':input')                          ( 匹配所有的input textarea select button )

$(':text')                            ( 匹配单行文本框 )

$(':password')                     ( 密码匹配器 )

$(':radio')                           ( 单选框选择器 )

$(':checkbox+span')            ( 复选框选择器 )

$(':button')                         ( 按钮选择器 )

JQ基础之选择器的更多相关文章

  1. jQuery基础之选择器

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

  2. HTML&CSS基础-属性选择器

    HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  4. JQ表单选择器和CSS3表单选择器

    JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...

  5. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  6. jQuery源代码解析(1)—— jq基础、data缓存系统

    闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...

  7. CSS基础和选择器

    什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...

  8. 《锋利的JQ》摘抄(一) jq基础篇

    前言:第一次写博客有点紧张233333,我会在博客里放一下在赌这本书过程中遇到的一些有用的知识点,希望等帮助到大家.好了正题开始(只要是我不知道该说啥了= =)  一,资源(在w3cfuns资源中可以 ...

  9. jQuery基础---常规选择器

    内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名. ...

随机推荐

  1. 修改HTML5 input placeholder 颜色及修改失效的解决办法

    input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写,有些显示不需要,但是在编辑器webstorm中该属性不被识别 */ ::-webkit- ...

  2. ECS Win2008 远程时提示"要登录到此远程计算机,您必须被授予允许通过终端登录登录的权限"的解决方法

    问题描述 ECS Windows 2008 远程登陆时提示"要登录到此远程计算机,您必须被授予允许通过终端登录登录的权限",如下图所示: 问题分析 组策略中做了设置不允许管理员组成 ...

  3. Javascript刷题 》 查找数组元素位置

    找出元素 item 在给定数组 arr 中的位置 输出描述: function indexOf(arr, item) { ..... } 如果数组中存在 item,则返回元素在数组中的位置,否则返回 ...

  4. 在微软伪静态处理机制下action导致伪静态的地址重现的问题

    伪静态前的地址:/sc/ProductList.aspx?pClass=0&descType=2&minPrice=1&maxPrice=11 伪静态后的地址:/product ...

  5. js中用tagname和id获取元素的3种方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Web APi之认证(Authentication)两种实现方式后续【三】(十五)

    前言 之前一直在找工作中,过程也是令人着实的心塞,最后还是稳定了下来,博客也停止更新快一个月了,学如逆水行舟,不进则退,之前学的东西没怎么用,也忘记了一点,不过至少由于是切身研究,本质以及原理上的脉络 ...

  7. WordPress上传含有中文文件出现乱码

    最近打算学习安装配置WordPress,当然同时也在学习PHP+MySQL,希望以后能做一些关于WordPress定制和二次开发,包括主题和插件.在成功安装WordPress3.5中文版之后,就测试了 ...

  8. JavaScript之自我总结篇

    最近在看汤姆大叔的"深入理解JavaScript系列",写得真的不错,对于我而言特别是12章到19章,因为大叔研究的点,就主要是从底层来研究JavaScript为什么会出现钟种特有 ...

  9. 塞翁失马,焉知非福:由 Styles.Render 所引发 runAllManagedModulesForAllRequests="true" 的思考

    最近在使用 MVC 开发的时候,遇到一个对我来说"奇怪的问题",就是使用 BundleTable 进行 CSS.JS 文件绑定,然后使用 Styles.Render.Scripts ...

  10. 表空间基于时间点的恢复(TSPITR)

    环境:RHEL 6.4 + Oracle 11.2.0.4 准备模拟环境 1. 验证表空间的依赖性 2. 确定执行TSPITR后会丢失的对象 3. 自动执行TSPITR Reference 准备模拟环 ...