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 相关文章推荐
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
详解微信小程序中组件通讯
Oct 30 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
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基础陷阱题(变量赋值)
2012/09/12 PHP
PHP eval函数使用介绍
2013/12/08 PHP
linux下编译安装memcached服务
2014/08/03 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
python实现报表自动化详解
2017/11/16 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
详解python-图像处理(映射变换)
2019/03/22 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
生物制药自我鉴定
2014/01/25 职场文书
消防安全宣传口号
2014/06/10 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
领导干部失职检讨书
2015/05/05 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
golang语言指针操作
2022/04/14 Golang
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL