jquery 选择器的用法
类别:Web前端 浏览量:1079
时间:2013-11-7 jquery 选择器的用法
jquery 选择器的用法jquery中选择器分为如下几种:
基本选择器
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元素和li元素的margin设为0 $('p, li').css('margin', '0'); });
层叠选择器:
$(
"form input"
) 选择所有的form元素中的input元素
$(
"#main > *"
) 选择id值为main的所有的子元素
$(
"label + input"
) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$(
"#prev ~ li"
) 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的li标签
过滤选择器
基本过滤选择器:
$(
"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元素
内容过滤选择器:
$(
"li:contains('John')"
) 选择所有li中含有John文本的元素
$(
"td:empty"
) 选择所有的为空(也不包括文本节点)的td元素的数组
$(
"li:has(p)"
) 选择所有含有p标签的li元素
$(
"td:parent"
) 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$(
"li:hidden"
) 选择所有的被hidden的li元素
$(
"li:visible"
) 选择所有的可视化的li元素
属性过滤选择器:
$(
"li[id]"
) 选择所有含有id属性的li元素
$(
"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结尾的元素
子元素过滤选择器:
$(
"li span:first-child"
) 返回所有的li元素的第一个子节点的数组
$(
"li span:last-child"
) 返回所有的li元素的最后一个节点的数组
$(
"li button:only-child"
) 返回所有的li中只有唯一一个子节点的所有子节点的数组
表单元素选择器:
$(
":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 淡入淡出
- jquery中animate
- jquery.ajax error 如何调试错误
- JQuery中serialize与serializeArray
- jquery中unbind、bind
- jquery实现微信中长按识别二维码
- jquery插件写法
- jQuery实现tab切换
- jquery使用data缓存数据
- Uncaught TypeError: jQuery.handleError is not a function
- jquery滚动固定插件在哪(jquery 步骤进度轴插件的实现代码)
- jQuery里$(this)和this的区别有哪些
- 链式编程jquery(实例详解jQuery的链式编程风格)
- jquery 选择器的用法
- jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
- jquery ajax详细教程(jquery+Ajax实现简单分页条效果)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
- 宋轶除了演过于曼丽,原来还演过一个青楼女子(宋轶除了演过于曼丽)
- 赵丽颖第一部当女主的戏,主角配角个个都是实力演员(赵丽颖第一部当女主的戏)
- 乾隆为何这么喜爱白塔原因是什么(乾隆为何这么喜爱白塔原因是什么)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
- 今日大雪,大雪养生这样做,一年都有好气色(大雪养生这样做)
热门推荐
- nginx跳转规则配置上下文(基于nginx实现上游服务器动态自动上下线无需reload的实现方法)
- 申请云服务器后需要做哪些(云服务器网站承载量一般有多大?一个云服务器能够放几个网站?)
- mysql读写分离怎么做(MySQL读写分离,写完读不到问题如何解决)
- html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)
- dedecms怎么修改模板(DedeCMS新建模型字段中附件样式的修改方法)
- sql 如何拆分字符串(SQL Server实现将特定字符串拆分并进行插入操作的方法)
- python将txt数据写入excel(Python将列表数据写入文件txt, csv,excel)
- csstable元素设置(CSS设置table下tbody的滚动条的实现)
- Service Unavailable解决方法
- html5开发图片(HTML5开发动态音频图的实现)