jQuery学习笔记之jQuery选择器的使用


Posted in Javascript onDecember 22, 2010

一.基本选择器:

  • #id   :选择给定ID名的元素 如:$("#id1")为选择id为id1的元素
  • .class   :选择给定类名的元素
  • element   :选择给定元素名的所有原色
  • *  :匹配所有元素
  • selector1,selector2,......   :选择这些名称的元素,以逗号隔开,可以是类或id名

二.层次选择器:

  • $("ancestor  descendant") :选择ancestor元素下的所有descendant(后代)元素
  • $("parent>child") :选择parent下的所有child(子)元素
  • $('prev+next') :选择紧跟prev后面的第一个next元素
  • $('prev~siblings') :选择prev后面的所有siblings元素

      $('prev+next') 和$(.prev).next("next")作用一样

      $('prev~siblings')和$(.prev).nextAll("siblings")作用一样

 

三.过滤选择:

  • :first    选择第一个元素  如:$("div:first")为选择第一个div元素
  • :last   选择最后一个元素
  • :not(selector)  选择不是selector的元素
  • :even  选择偶数索引的元素
  • :odd  选择所有奇数索引的元素
  • :eq(index)  选择索引等于index的元素
  • :gt(index)  选择索引大于index的元素
  • :lt(index)  选择索引小于index的元素
  • :header  选择所有<H>元素
  • :animanted  选择所有动画元素

四。内容过滤:

  • :contains(text)  选择含有text文本的元素 如:$("div:contains('hello')")为选择含有hello字符的div元素
  • :empty 选择所有不含字符的元素
  • :has(selector)  选择含有selector元素的元素
  • :parent 选择含有子元素的元素

五。可见性过滤:

  • :hidden 选择所有可见元素
  • :visible 选择所有不可见元素

六。属性过滤:

  • [attribute]  选择拥有此属性的元素 如$("div[id]")选择包含id属性的div元素
  •  [attribute=value] 选择attribute属性等于value值的元素
  •  [attribute!=value]  选择attribute属性不等于value值的元素
  •  [attribute^=value]   选择attribute属性等于value值的元素
  •  [attribute$=value]  选择attribute属性值以value值开始的元素
  •  [attribute*=value]  选择attribute属性值含有value值的元素
  • [selector1][selector2]....满足这些条件的元素(组合)

七。子元素过滤选择器

  • :nth-child(index/even/odd/eqation)选择父元素下的[索引/偶/奇]的子元素
  • :first-child 选择父元素的第一个子元素
  • :last-child选择父元素的最后一个子元素
  • :only-child 选择父元素下是唯一的子元素

八。表单属性过滤

  • :enabled 选择所有可见元素 如:$("#form1:enabled")是选择表单id为form1的所有可以用元素
  • :disable 选择所有不可见元素
  • :checked 选择所有被选择的元素
  • :selected 选择所有被选中的选项元素

九.表单对象过滤

  • :input  选择所有<input><textarea><select><button>元素
  • :text 选择所有单行文本款,下面的都是这个格式
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden
     
Javascript 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
Javascript事件实例详解
Nov 06 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 #Javascript
jQuery学习笔记之Helloworld
Dec 22 #Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
一个轻量级的javascript库 pj介绍
Dec 19 #Javascript
JavaScript Date对象 日期获取函数
Dec 19 #Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 #Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 #Javascript
You might like
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
php json相关函数用法示例
2017/03/28 PHP
javascript 节点遍历函数
2010/03/28 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
js编写简易的计算器
2020/07/29 Javascript
python开发之list操作实例分析
2016/02/22 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
快速了解Python相对导入
2018/01/12 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python实现双人五子棋(终端版)
2020/12/30 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
创优争先心得体会
2014/09/11 职场文书
小学教师师德整改措施
2014/09/29 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js