1:选择器一般前面是$(something),$()内部会自动使用loop寻找参数指定的元素

Selector type     CSS         jQuery                 What it doesTag name       p{}          $('p')           selects all 'p' in the documentID       #some-id {}     $('#some-id')         selects the single element in the document that has as ID of some-idClass     .some-class {}  $('.some-class')        selects all elements in the document that have a class of some-class

2:CSS selectors:

$('#some-ID')$('.some-Class')$('selected-plays > li').addClass('horizontal')$('#selected-plays li:not(.horizontal)').addClass('sub-level')

3:Attribute selector:

$('img[alt]') $('a[href^="mailto"]').addClass('mailto')$('a[href$=".pdf"]').addClass('pdflink')$('a[href^="http"] [href*="henry"]')

4:Custom selector: high draw call

  • eq, nthchild, first-chile, contains
$('div.horizontal:eq(1)') //这个是JS选择器,所以select the second item from a set of <div> elements with class of horizontal //JS selector is zero-based, CSS selector is one-based
$('div:nth-child(1)')//这个是css选择器,所以Select all div selectors that are the first child of their parent$('div:first-child')//可以用JS选择器代替

$('td:contains(Henry)').addClass('highlight');
//contains() selector 是case sensitive

  • odd & even:
View Code

 <h2>Shakespeare's Plays</h2><table><tr><td>As You Like It</td><td>Comedy</td><td> </td></tr><tr><td>All's Well that Ends Well</td><td>Comedy</td><td>1601</td></tr><tr><td>Hamlet</td><td>Tragedy</td><td>1604</td></tr><tr><td>Macbeth</td><td>Tragedy</td><td>1606</td></tr><tr><td>Romeo and Juliet</td><td>Tragedy</td><td>1595</td></tr><tr><td>Henry IV, Part I</td><td>History</td><td>1596</td></tr><tr><td>Henry V</td><td>History</td><td>1599</td></tr></table><h2>Shakespeare's Sonnets</h2><table><tr><td>The Fair Youth</td><td>1–126</td></tr><tr><td>The Dark Lady</td><td>127–152</td></tr><tr><td>The Rival Poet</td><td>78–86</td></tr></table>

$('tr:even').addClass('alt');

$('tr:even')一般用于table,按基偶格来选择,注意JS是zero-base的,所以选择器写even(偶数),实际上选择了table的基数行,因为第一行在JS中是0,第二行实际是1。

发现上面的tr选择在第二段(Shakespeare)不对,所有的行都按照一个顺序下来,这里用tr:nth-child(odd)来代替,记得nth-child是CSS选择器,这里要换成odd

6:Form selector:

当对form进行选择的时候JQuery提供给我们更直接的选择器

Selector      Match

:input      Input, textarea, select

:button     Button elements and input elements with type attribute equal to button

:enabled    Form elemnts that are enabled

:disabled    Form elemnts that are disabled

:checked    Radio buttons or checkboxed that are checked

:selected    Option elements that are selected

$('input[type="radio"] : checked')
//select all checked radio buttons but not checkboxes
$('input[type="password"], input[type="text"] : disabled')
//select all password input and disabled text input

7:DOM traversal methords:

  • .filter()
$('tr').filter(':even').addClass('alt');$('a').filter(function(){return this.hostname && this.hostname != location.hostname;
}).addClass('external');
//filter the a tag
//must have href attribute with a domain name(this.hostname)
//the domain name that they link to must not match the domian name of the current page(location.hostname)

  • .next(), .nextAll(), .prev(), .prevAll()
$('td:contains(Henry)').next().next().addClass('highlight');//后面的后面

$('td:contains(Henry)').nextAll().addClass('highlight');  //全部Herny后面的cell
$('td:contains(Henry)').next().addClass('highlight');//only very next sibling

  • .siblings()

select all other elments at same DOM level, regardless of whether they come before or after the previously elected element

选中同一排cell的方法

$('td:contains(Henry)').nextAll().andSelf().addClass('highlight');
//select all nextAll of Herny tag and itself
//mean all the row

$('td:contain(Henry)').parent().children().addClass('highlight');
//select every cell in each row where at least one of the cells contains Henry

转载于:https://www.cnblogs.com/shawnzxx/archive/2013/02/12/2910183.html

JQuery(选择器)相关推荐

  1. 【jquery】jquery选择器

    知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...

  2. JQuery——选择器分类

    JQuery选择器 1    什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2   JQuery选择器分类 2.1   基本选择器 CSS选择器 层级选择器 表单域选择器 ...

  3. jQuery选择器实现隔行变色和使用javaScript实现隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...

  4. jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)

    第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...

  5. jQuery选择器回顾,IE8还需要你发光发热

    2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...

  6. [翻译]帮助文档-jQuery 选择器

    jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...

  7. Jquery 选择器大全 【转载】

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...

  8. JQuery 选择器。

    •                 #id •                 element •                 .class •                 .class.cl ...

  9. 使用HTML5的自定义数据属性的jQuery选择器

    本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...

  10. 认识jQuery及jQuery选择器

    记录自己平时要注意的,如您看到哪里错误,望指正 认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...

最新文章

  1. spell_picture二次升级版
  2. 教你快速撸一个免费HTTPS证书
  3. Win10 插入耳机无声问题 解决办法
  4. [转]opensuse 更新源
  5. 史上最详尽的NLP预处理模型汇总
  6. 设置windows网络连接别名和linux网络连接别名
  7. Get value from agent failed:cannot connect to [[192.168.121.128]:10050]:[111Connection refused]]
  8. PAT (Basic Level) Practice1030 完美数列
  9. Sharepoint创建List
  10. 数据库系统基础教程一:关系数据库与关系代数
  11. 跟着杨中科学习asp.net之dom
  12. STM32串口通信简介
  13. 使用计算机录制声音10,Win10如何录制电脑内部声音?Windows10电脑自身录音的方法...
  14. 我的十年十念 ——十年工作感言
  15. Android字符小写转大写,大写转小写
  16. 【颜纠日记】如何清除cookie方法,保护你的隐私。
  17. 第 4-4 课:Spring Boot 中使⽤ Cache 缓存的使⽤
  18. 3dmark压力测试 linux,拷机还用Furmark? 瞧瞧3DMark压力测试怎样玩
  19. 飞凌嵌入式FETMX6Q-C
  20. 从微软下载Windows11操作系统镜像

热门文章

  1. Novas Verdi、Debussy ,Synopsys VCS,Candence NC-Verilog,Mentor Graphics工具介绍
  2. linux显示磁盘使用情况命令,Linux显示磁盘使用率信息(iostat)
  3. 新建一个spyder窗口
  4. pip在windows下安装配件/宏包
  5. 小米MixPath复现之旅
  6. 遗传和基因突变对神经网络训练的好处
  7. 属于链路状态路由选择协议,
  8. 修改PHP上传文件大小限制的方法
  9. nagios配置安装
  10. 开源Gis简介(转)