对jQuary选择器的全面总结


Posted in Javascript onJune 20, 2016

jQuary基础选择器

$("div*")获取div下面的所有元素

$(".red,.green").html("怎么") // 需要注意的是要把两个选择前写在同一个引号内 (需要同时选择多个选择器的时候用)

$("ance desc") //ancestor祖先选择器 descendant子孙选择器

$(“parent > child”) //只包含子辈选择器 不包含孙辈选择器

$(“prev + next”) // "+"表示一种上下级的关系,prev元素最紧邻的下一个元素是next,选择器返回的并且只返回唯一的元素 

$("p+label").css("background-color","red"); 给紧邻着的邻居加个背景颜色

$(“prev ~siblings”) //获取prev后面所有的相邻元素(相邻只包含同一个父级元素内的)

jQuary的过滤性选择器

:first $(“li:first”)获得一组相同标签中的第一个元素 是一个元素不是一个集合

:last 最后一个元素

:eq(index) 按照索引查找元素 

$("li:eq(2)") 索引从零开始 获取li标签中的第三个元素

:contains(text) 按照内容查找元素 

$(“li:contains('张三')”) 获取到内容包含张三的所有li元素 张三为什么必须加单引号呢?因为它是一个字符串,而不是一个变量,所以不加单或双引号的话是会报错的。

:has(slector) 按照元素获取 

$("li:has('p')")获取了包含<p>元素的全部<li>元素

:hidden 获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。$("li:hidden")获取li 下面所有display:none的元素或者是hidden的元素

:visible 获取的是全部可见的元素,只要不将元素的display属性值设置为“none”,都可以通过该选择器获取。 

$("p:visible")获取可见的<p>元素

[attribute=value] 获取属性名等于属性值的元素 

$("li[title='小超人']") 加了li是确定了范围如果不加li则选择的是全部的

[attribute!=value] 获取属性名不等于属性值的元素

[attribute*=value] 获取属性值中包含指定内容的全部元素

$("li[title*='新']")获取了属性值中包含“新”的li元素

:first-child 获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。

$("li:first-child")获取了所有个<ul>父元素中的第一个<li>元素

:last-child 获取父元素总的最后一个子元素 常用多个集合数据的选择处理

表单选择器

:input 获取表单全部元素 返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和

<button>标记的表单元素,它选择的表单元素是最广的

:text 获取表单中全部单行的文本输入框 对textarea不起作用

:password 获取表单中全部的密码输入文本框元素

:radio 获取表单中的全部单选按钮元素。

:checkbox 获取表单中的复选框元素。()

:submit 获取表单中的提交按钮元素。(一般一个表单中只有一个type属性是“submit”的按钮) 如果button没有定义会默认是

submit的提交按钮

:image 获取当“input元素的type属性是image时,这个元素就是一个图像域”这个类下的元素

:image 选择器只能获取<input>图像域,而不能获取<img>格式的图像元素

:button 选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

:checked 获取处于选中状态的全部元素。

:selected 只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

以上这篇对jQuary选择器的全面总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
javascript String 对象
Apr 25 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
js实现二级联动简单实例
Jan 11 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 #Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 #Javascript
javascript js 操作数组 增删改查的简单实现
Jun 20 #Javascript
浅谈JavaScript中数组的增删改查
Jun 20 #Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 #Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 #Javascript
javascript实现随机生成DIV背景色
Jun 20 #Javascript
You might like
关于时间计算的结总
2006/12/06 PHP
PHP 时间日期操作实战
2011/08/26 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
微信小程序实现订单倒计时
2020/11/01 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
聊聊Python中的pypy
2018/01/12 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
房屋继承公证书
2014/04/10 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
单位委托书
2014/10/15 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
离职证明范本
2015/06/12 职场文书
行政复议答复书
2015/07/01 职场文书
高中语文教学反思范文
2016/02/16 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技