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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jquery实现购物车基本功能
Oct 25 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
document.createElement()用法
2013/03/13 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python API len函数操作过程解析
2020/03/05 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
端午节演讲稿
2014/05/23 职场文书
总经理人事任命书
2014/06/05 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
赡养老人协议书范本
2015/08/06 职场文书
怎样写好工作计划
2019/04/10 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python