jQuery选择器_动力节点Java学院整理


Posted in jQuery onJuly 05, 2017

选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')

为什么jQuery要发明选择器?回顾一下DOM操作中我们经常使用的代码:

// 按ID查找:
var a = document.getElementById('dom-id');
// 按tag查找:
var divs = document.getElementsByTagNames('div');
// 查找<p class="red">:
var ps = document.getElementsByTagNames('p');
// 过滤出class="red":
// TODO:
// 查找<table class="green">里面的所有<tr>:
var table = ...
for (var i=0; i<table.children; i++) {
  // TODO: 过滤出<tr>
}

这些代码实在太繁琐了,并且,在层级关系中,例如,查找<table class="green">里面的所有<tr>,一层循环实际上是错的,因为<table>的标准写法是:

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

很多时候,需要递归查找所有子节点。

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

按ID查找

如果某个DOM节点有id属性,利用jQuery查找如下:

// 查找<div id="abc">:
var div = $('#abc');

注意,#abc以#开头。返回的对象是jQuery对象。

什么是jQuery对象?jQuery对象类似数组,它的每个元素都是一个引用了DOM节点的对象。

以上面的查找为例,如果id为abc的<div>存在,返回的jQuery对象如下:

[<div id="abc">...</div>]

如果id为abc的<div>不存在,返回的jQuery对象如下:

[]

总之jQuery的选择器不会返回undefined或者null,这样的好处是你不必在下一行判断if (div === undefined)。

jQuery对象和DOM对象之间可以互相转化:

var div = $('#abc'); // jQuery对象
var divDom = div.get(0); // 假设存在div,获取第1个DOM元素
var another = $(divDom); // 重新把DOM包装为jQuery对象

通常情况下你不需要获取DOM对象,直接使用jQuery对象更加方便。如果你拿到了一个DOM对象,那可以简单地调用$(aDomObject)把它变成jQuery对象,这样就可以方便地使用jQuery的API了。

按tag查找

按tag查找只需要写上tag名称就可以了:

var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

按class查找

按class查找注意在class名称前加一个.:

var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>

通常很多节点有多个class,我们可以查找同时包含red和green的节点:

var a = $('.red.green'); // 注意没有空格!
// 符合条件的节点:
// <div class="red green">...</div>
// <div class="blue green red">...</div>

按属性查找

一个DOM节点除了id和class外还可以有很多属性,很多时候按属性查找会非常方便,比如在一个表单中按属性来查找:

var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">

当属性的值包含空格等特殊字符时,需要用双引号括起来。

按属性查找还可以使用前缀查找或者后缀查找:

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"
这个方法尤其适合通过class属性查找,且不受class包含多个名称的影响:
var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM
// 例如: class="icon-clock", class="abc icon-home"

组合查找

组合查找就是把上述简单选择器组合起来使用。如果我们查找$('[name=email]'),很可能把表单外的<div name="email">也找出来,但我们只希望查找<input>,就可以这么写:

var emailInput = $('input[name=email]'); // 不会找出<div name="email">

同样的,根据tag和class来组合查找也很常见:

var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>

多项选择器

多项选择器就是把多个选择器用,组合起来一块选:

$('p,div'); // 把<p>和<div>都选出来
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来

要注意的是,选出来的元素是按照它们在HTML中出现的顺序排列的,而且不会有重复元素。例如,<p class="red green">不会被上面的$('p.red,p.green')选择两次。

jQuery 相关文章推荐
jQuery操作之效果详解
May 19 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 #jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 #jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
jquery拖动改变div大小
Jul 04 #jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 #jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 #jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 #jQuery
You might like
基于php iconv函数的使用详解
2013/06/09 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
Vue2.5通过json文件读取数据的方法
2018/02/27 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python 二维数组90度旋转的方法
2019/01/28 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
django的autoreload机制实现
2020/06/03 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
化工专业个人的求职信范文
2013/11/28 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android