详解jQuery选择器


Posted in Javascript onDecember 21, 2016

大致介绍

终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery

jQuery是什么?

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设 计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。(来自百度-_-)

jQuery对象和DOM对象

我们在编写脚本时,可能会同时用到原生JavaScript和jQuery,那么这时就会存在一些问题。要解决这些问题就先得认识jQuery对象和DOM对象

DOM对象:通过例如getElementById方法获取到DOM树中的元素就是DOM对象

jQuery对象:通过jQuery包装DOM对象后产生的对象

注意:jQuery对象和DOM对象不能使用对方的任何方法

// 错误
 $('div').innerHTML;
 // 错误
 document.getELementsByTagName('div')[0].html(); 

jQuery对象和DOM对象是可以互相转化的

jQuery对象转成DOM对象有两种方法:

1、[index]

var $div = $('div');//jQuery对象
 var div = $div[0];//DOM对象

2、get(index)

var $div = $('div');//jQuery对象
 var div = $div.get(0);//DOM对象

DOM对象转成jQuery对象有一种方法:$(DOM对象)

var div = document.getELementsByTagName('div')[0];//DOM对象
 var $div = $(div);//jQuery对象

jQuery选择器

jQuery中的选择器完全继承了CSS的风格

详解jQuery选择器

逐一来看

基本选择器

改变id为div1的所有div的背景色

$('#div1').css('background','#bbffaa');

改变所有p标签和class为one的div的背景色

$('p,.one').css('background','#bbffaa');

层次选择器

选取div里的所有span元素

$('div span');

选取div下元素名是span的子元素

$('div > span');

选取class是one的下一个<div>同辈元素

$('.one + div');

选取class是one的后面的所有的<div>同辈元素

$('.one ~ div');

过滤选择器

1、基本过滤选择器

选取所有<div>元素中第一个<div>元素

$('div:first');

选取class不是one的<div>元素

$('div:not(.one)');

选取索引是偶数的的<div>元素

$('div:even');

选取索引等于2的<div>元素

$('div:eq(2)');

选取索引大于2的<div>元素

$('div:gt(2)');

选取所有标题元素,例如h1、h2等

$(':header');

选取当前正在执行动画的所有元素

$(':animated');

选取获取当前焦点的元素

$(':focus');

2、内容过滤选择器

选取含有文本“坚持”的<div>元素

$('div:contains('坚持')');

选取不包含子元素或者文本的<div>元素

$('div:empty');

选取含有<p>元素的<div>元素

$('div:has(p)');

选取含有子元素或者文本的元素

$('div:parent');

3、可见性过滤选择器

选取所有不可见的元素。包括<input type="hidden" />,<div style="display:none">和<div style="overflow:hidden">

$(':hidden');

选取所有可见的<div>元素

$('div:visible');

4、属性过滤选择器

选取有id属性的元素

$('div[id]');

选取id等于myId的<div>元素

$('div[id="myId"]');

选取id值不等于myId的<div>元素

$('div[id!="myId"]');

选取id值以my开头的<div>元素

$('div[id^="my"]');

选取id值以my结尾的<div>元素

$('div[id$="my"]');

选取id值含有my的<div>元素

$('div[id*="my"]');

选取属性title等于en或者以en为前缀(en后跟一个连字符'-')的元素

$('div[title|="en"]');

选取属性title中用空格分隔的值中包含字符en的<div>元素

$('div[title~="en"]');

选取拥有属性id并且属性title以en为前缀的<p>元素

$('p[id][title|="en"]');

5、子元素过滤器

选取每个class为one的<div>父元素下的第2个子元素

$('div.one :nth-child(2)');

选取每个class为one的<div>父元素下的第1个子元素

$('div.one :first-child');

选取<ul>中是唯一子元素的<li>元素

$('ul li:only-child');

6、表单对象属性过滤选择器

选取id为"form1"表单内的所有可用元素

$('#form1:enabled');

选取id为"form1"表单内的所有不可用元素

$('#form1:disabled');

选取所有被选中的<input>元素

$('input:checked');

选取所有被选中的选项元素

$('select option:selector');

表单选择器

选取所有的<input>、<textarea>、<select>和<button>元素

$(':input');

选取所有的单行文本框

$(':text');

选取所有的不可见的元素

 $(':hidden');

其余的选择方法都可以通过单词了解到意思(例如 :submit 就是选择所有的提交按钮)就不再赘述。

参考资料:锋利的jQuery(第二版) https://3water.com/books/92918.html

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

 

Javascript 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
浅谈js的异步执行
Oct 18 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 #Javascript
js实现可输入可选择的select下拉框
Dec 21 #Javascript
详解handlebars+require基本使用方法
Dec 21 #Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 #Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 #Javascript
js querySelector() 使用方法
Dec 21 #Javascript
简单实现Vue的observer和watcher
Dec 21 #Javascript
You might like
php函数指定默认值方法的小例子
2013/12/04 PHP
php基于CodeIgniter实现图片上传、剪切功能
2016/05/14 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
javascript放大镜效果的简单实现
2013/12/09 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
Django实现学生管理系统
2019/02/26 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
如何用python批量调整视频声音
2020/12/22 Python
struct与class的区别
2014/02/03 面试题
《唯一的听众》教学反思
2014/02/20 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
党员批评与自我批评发言
2014/10/02 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸