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

选择器是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')选择两次。

赞 (0)

相关推荐

  • 详解jquery选择器的原理

    详解jquery选择器的原理 html部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/minijquery.js"></script> </head> <body>

  • easyui-datagrid特殊字符不能显示的处理方法

    easyui-datagrid特殊字符不能显示的处理方法

    在easyui中datagrid.combobox.tree等组件都不能显示含有html标签的特殊字符,因为这些字符会被当作html标签被解析掉.这里给出了一个处理方案,希望对大家有帮助. 以datagrid为例: 找到jquery.datagrid.js文件,在其中添加如下方法: function escapeHtml(s) { if (s === undefined) { return s; } else { s = String(s === null ? "" : s); ret

  • js控制文本框禁止输入特殊字符详解

    在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')": this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')

  • jQuery选择器实例应用

    jQuery选择器实例应用

    刚学完jQuery选择器,闲来无事,照着书上的范例敲了一段代码(HTML和CSS抄自书上),自己试着写了写jQuery的代码,感觉相当轻便啊. 显示效果: 功能说明: 1.点击上边的图书分类一栏,实现向下的伸缩扩展,可以控制分类的显示状态: 2."简化"功能点击后实现分类显示菜单数量的简化,简化后,简化字样变成"展开": 3.页面中的两个红色箭头图标均为显示状态的图标,每次点击后都会变换相应的状态效果. 代码实现: <html> <head>

  • JS 验证密码 不能为空，必须含有数字、字母、特殊字符,长度在8-12位

    废话不多说了,直接给大家贴代码了,具体代码如下所示: checkpassword = function(v){ var numasc = 0; var charasc = 0; var otherasc = 0; if(0==v.length){ return "密码不能为空"; }else if(v.length<8||v.length>12){ return "密码至少8个字符,最多12个字符"; }else{ for (var i = 0; i &

  • jQuery选择器特殊字符与属性空格问题

    一.选择器中含有特殊符号的注意事项 1．选择器中含有"."."#"."("或"]"等特殊字符 根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. <div id="id#b">bb</div> <

  • 详解jQuery选择器

    详解jQuery选择器

    大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档

  • 常用jQuery选择器汇总

    学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. j s获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, getElementsByClassName和getElementById).那么jQuery是如何获取呢? 通过标签获取:$('tag') 通过类名获取:$('.className') 通过id获取:$('#id') 除了上面个三个最基本最简单的,还有下面几个cs

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

    选择器是jQuery的核心.一个选择器写出来类似$('#dom-id'). 为什么jQuery要发明选择器?回顾一下DOM操作中我们经常使用的代码: // 按ID查找: var a = document.getElementById('dom-id'); // 按tag查找: var divs = document.getElementsByTagNames('div'); // 查找<p class="red">: var ps = document.getElement

  • jQuery扩展_动力节点Java学院整理

    当我们使用jQuery对象的方法时,由于jQuery对象可以操作一组DOM,而且支持链式操作,所以用起来非常方便. 但是jQuery内置的方法永远不可能满足所有的需求.比如,我们想要高亮显示某些DOM元素,用jQuery可以这么实现: $('span.hl').css('backgroundColor', '#fffceb').css('color', '#d85030'); $('p a.hl').css('backgroundColor', '#fffceb').css('color', '

  • jQuery事件_动力节点Java学院整理

    因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件.如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用. 由于不同的浏览器绑定事件的代码都不太一样,所以用jQuery来写代码,就屏蔽了不同浏览器的差异,我们总是编写相同的代码. 举个例子,假设要在用户点击了超链接时弹出提示框,我们

  • jQuery简介_动力节点Java学院整理

    江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery.鉴于它如此流行,又如此好用,所以每一个入门JavaScript的前端工程师都应该了解和学习它. jQuery这么流行,肯定是因为它解决了一些很重要的问题.实际上,jQuery能帮我们干这些事情: 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码: 简洁的操作DOM的方法:写$('#test')肯定比document.getElementById('test')来得简洁: 轻松实现

  • Java异常继承结构解析_动力节点Java学院整理

    Java异常继承结构解析_动力节点Java学院整理

    Java异常类层次结构图: 异常的英文单词是exception,字面翻译就是"意外.例外"的意思,也就是非正常情况.事实上,异常本质上是程序上的错误,包括程序逻辑错误和系统错误.比如使用空的引用.数组下标越界.内存溢出错误等,这些都是意外的情况,背离我们程序本身的意图.错误在我们编写程序的过程中会经常发生,包括编译期间和运行期间的错误,在编译期间出现的错误有编译器帮助我们一起修正,然而运行期间的错误便不是编译器力所能及了,并且运行期间的错误往往是难以预料的.假若程序在运行期间出现了错误

  • Nginx简介_动力节点Java学院整理

    1.什么是Nginx Nginx来自俄罗斯的Igor Sysoev在为Rambler Media(http://www.rambler.ru/)工作期间,使用C语言开发了Nginx.Nginx作为Web服务器,一直为俄罗斯著名的门户网站Rambler Media提供着出色.稳定的服务. Igor Sysoev将Nginx的代码开源,并且赋予其最自由的2-clause BSD-like license许可证.由于Nginx使用基于事件驱动的架构能够并发处理百万级别的TCP连接,高度模块化的设计和自

  • web压力测试工具_动力节点Java 学院整理

    web压力测试工具_动力节点Java 学院整理

    0. Grinder –  Grinder是一个开源的JVM负载测试框架,它通过很多负载注射器来为分布式测试提供了便利. 支持用于执行测试脚本的Jython脚本引擎HTTP测试可通过HTTP代理进行管理.根据项目网站的说法,Grinder的 主要目标用户是"理解他们所测代码的人--Grinder不仅仅是带有一组相关响应时间的'黑盒'测试.由于测试过程可以进行编码--而不是简单地脚本 化,所以程序员能测试应用中内部的各个层次,而不仅仅是通过用户界面测试响应时间. 1. Pylot -Pylot 是

  • 深入理解Java中的final关键字_动力节点Java学院整理

    Java中的final关键字非常重要,它可以应用于类.方法以及变量.这篇文章中我将带你看看什么是final关键字?将变量,方法和类声明为final代表了什么?使用final的好处是什么?最后也有一些使用final关键字的实例.final经常和static一起使用来声明常量,你也会看到final是如何改善应用性能的. final关键字的含义? final在Java中是一个保留的关键字,可以声明成员变量.方法.类以及本地变量.一旦你将引用声明作final,你将不能改变这个引用了,编译器会检查代码,如

  • Java线程安全的常用类_动力节点Java学院整理

    线程安全类 在集合框架中,有些类是线程安全的,这些都是jdk1.1中的出现的.在jdk1.2之后,就出现许许多多非线程安全的类. 下面是这些线程安全的同步的类: vector:就比arraylist多了个同步化机制(线程安全),因为效率较低,现在已经不太建议使用.在web应用中,特别是前台页面,往往效率(页面响应速度)是优先考虑的. statck:堆栈类,先进后出 hashtable:就比hashmap多了个线程安全 除了这些之外,其他的集合大都是非线程安全的类和接口. 线程安全的类其方法是同步

  • Java中HashSet和HashMap的区别_动力节点Java学院整理

    Java中HashSet和HashMap的区别_动力节点Java学院整理

    什么是HashSet? HashSet实现了Set接口,它不允许集合中有重复的值,当我们提到HashSet时,第一件事情就是在将对象存储在HashSet之前,要先确保对象重写equals()和hashCode()方法,这样才能比较对象的值是否相等,以确保set中没有储存相等的对象.如果我们没有重写这两个方法,将会使用这个方法的默认实现.. public boolean add(Object o)方法用来在Set中添加元素,当元素值重复时则会立即返回false,如果成功添加的话会返回true. 什

随机推荐