详解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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
用JQuery调用Session的实现代码
Oct 29 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
js实现转动骰子模型
Oct 24 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 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中的流(streams)浅析
2015/07/02 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Javascript 对象(object)合并操作实例分析
2019/07/30 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
Python异常处理操作实例详解
2018/05/10 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python打开windows应用程序的实例
2019/06/28 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python使用Geany编辑器配置方法
2020/02/21 Python
python中数据库like模糊查询方式
2020/03/02 Python
Python新手学习标准库模块命名
2020/05/29 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
Java如何格式化日期
2012/08/07 面试题
J2EE模式面试题
2016/10/11 面试题
自荐信格式的六要素
2013/09/21 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
小学运动会加油稿
2015/07/22 职场文书