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 相关文章推荐
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
js中settimeout方法加参数
Feb 28 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
详解Puppeteer 入门教程
May 09 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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错误日志 display_errors与log_errors的区别
2012/10/09 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python中请不要再用re.compile了
2019/06/30 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
美国马匹用品和骑马配件购物网站:Horse.com
2018/01/08 全球购物
任命书范本大全
2014/06/06 职场文书
环境日宣传活动总结
2014/07/09 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
趵突泉导游词
2015/02/03 职场文书
党员违纪检讨书
2015/05/05 职场文书
工作证明书
2015/06/15 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang