对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小数计算出现近似值的解决办法
Feb 06 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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
Symfony2之session与cookie用法小结
2016/03/18 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
简单的js分页脚本
2009/05/21 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
原生js实现放大镜
2017/02/20 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
js读取本地文件的实例
2017/12/22 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
2018/11/30 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python打印输出数组中全部元素
2018/03/13 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
python实现根据文件格式分类
2019/10/31 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
迟到检讨书900字
2014/01/14 职场文书
大型活动组织方案
2014/05/10 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL