JQuery(选择器)
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:
<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(选择器)相关推荐
- 【jquery】jquery选择器
知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...
- JQuery——选择器分类
JQuery选择器 1 什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2 JQuery选择器分类 2.1 基本选择器 CSS选择器 层级选择器 表单域选择器 ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- jQuery选择器回顾,IE8还需要你发光发热
2019独角兽企业重金招聘Python工程师标准>>> 今天又把jQuery的选择器看了一下,感觉有好几个一直都没有用过.现在有这么多模板双向绑定之类先进思想的前端框架,也不知道jq ...
- [翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
- Jquery 选择器大全 【转载】
选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写 ...
- JQuery 选择器。
• #id • element • .class • .class.cl ...
- 使用HTML5的自定义数据属性的jQuery选择器
本文翻译自:jQuery selectors on custom data attributes using HTML5 I would like to know what selectors are ...
- 认识jQuery及jQuery选择器
记录自己平时要注意的,如您看到哪里错误,望指正 认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...
最新文章
- spell_picture二次升级版
- 教你快速撸一个免费HTTPS证书
- Win10 插入耳机无声问题 解决办法
- [转]opensuse 更新源
- 史上最详尽的NLP预处理模型汇总
- 设置windows网络连接别名和linux网络连接别名
- Get value from agent failed:cannot connect to [[192.168.121.128]:10050]:[111Connection refused]]
- PAT (Basic Level) Practice1030 完美数列
- Sharepoint创建List
- 数据库系统基础教程一:关系数据库与关系代数
- 跟着杨中科学习asp.net之dom
- STM32串口通信简介
- 使用计算机录制声音10,Win10如何录制电脑内部声音?Windows10电脑自身录音的方法...
- 我的十年十念 ——十年工作感言
- Android字符小写转大写,大写转小写
- 【颜纠日记】如何清除cookie方法,保护你的隐私。
- 第 4-4 课:Spring Boot 中使⽤ Cache 缓存的使⽤
- 3dmark压力测试 linux,拷机还用Furmark? 瞧瞧3DMark压力测试怎样玩
- 飞凌嵌入式FETMX6Q-C
- 从微软下载Windows11操作系统镜像