选择器

利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为。jQuery的行为规则都必须在获取到元素后才能生效。

【jQuery选择器的优势】

(1)简洁的写法;

(2)支持CSS1到CSS3选择器;

(3)完善的处理机制;

【jQuery选择器】

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

基本选择器:是jQuery最简单的选择器,通过id、class和标签名等来查找DOM元素。在网页中,id名称只能使用一次,class允许重复使用。详细介绍在《锋利的jQuery》p32。

层次选择器:通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等。

过滤选择器:通过特定的过滤规则来筛选出所需的DOM元素,选择器都已冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

表单选择器:能极其方便地获取到表单的某个或某类型的元素。

【利用jQuery改写事例】

给网页中所有的<p>元素添加onclick事件。

$("p").click(function(){//获取页面中所有的p元素添加单击事件
//do something
})

使一个特定的表格隔行变色

$("#tb tbody tr:even").css("backgroundColor","#888");
/*获取id为tb的元素,然后寻找它下面的tbody标签,再寻找tbody下索引值是偶数的tr元素,改变它的背景颜色。css("property","value"):用来设置jQuery对象的样式*/

对多选框进行操作,输出选中的多选框的个数。

$("#btn").click(function(){
//先使用属性选择器,然后用表单对象属性过滤,最后获取jQuery对象的长度
var items=$("input[name='check']:checked");
alert("选中的个数为:"+item.length);
});

【选择器中的一些注意事项】

含有特殊符号的注意事项

(1)选择器含有“.”、“#”、“(”或“]”等特殊字符。

不能含有,解决此类错误的方法是使用转义符转义。

(2)属性选择器的@符号问题。

不需要在属性前添加@符号,去掉@符号即可。

【其他选择器】

jQuery提供的选择器的扩展

(1)MoreSelectors for jQuery:用于增加更多的选择器。

(2)Basic XPath:可以让让用户使用基本的XPath。

jQuery(2)——选择器的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  8. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  9. jQuery的选择器中的通配符[id^=&#39;code&#39;] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

  10. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. maven 详解

    Maven是基于项目对象模型(POM)的,可以通过一小段描述信息来管理项目构建,报告和文档的软件项目管理工具,是一种全新的项目构建方式,让我们的开发更加简单,高效.Maven主要做的是两件事: 开发规 ...

  2. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  3. RequireJS加载ArcGIS API for JavaScript

    1.在main.js中配置ArcGIS API for JavaScript require.config({ paths : { //arcgisJS "esri": " ...

  4. 智能指针(一):STL auto_ptr实现原理

    智能指针实际上是一个类(class),里面封装了一个指针.它的用处是啥呢? 指针与内存 说到指针自然涉及到内存.我们如果是在堆栈(stack)中分配了内存,用完后由系统去负责释放.如果是自定义类型,就 ...

  5. 偏最小二乘回归分析建模步骤的R实现(康复俱乐部20名成员测试数据)+补充pls回归系数矩阵的算法实现

    kf=read.csv('d:/kf.csv') # 读取康复数据kfsl=as.matrix(kf[,1:3]) #生成生理指标矩阵xl=as.matrix(kf[,4:6]) #生成训练指标矩阵x ...

  6. Java进阶篇(六)——Swing程序设计(上)

    Swing是GUI(图形用户界面)开发工具包,内容有很多,这里会分块编写,但在进阶篇中只编写Swing中的基本要素,包括容器.组件和布局等,更深入的内容会在高级篇中出现.想深入学习的朋友们可查阅有关资 ...

  7. Exception in thread &quot;main&quot; java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenCli : Unsupported major.minor version 51.0

    原因:JDK版本不兼容.运行的Java Class文件采用高版本的JDK编译,然后在低版本的JRE环境中运行,有时会报此错误. 解决:1)升级JDK 2)调整Eclipse中Java Compiler ...

  8. C# 之 索引器

    索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 ...

  9. OneZero第三周第四次站立会议(2016.4.7)

    1. 时间: 18:35--18:50 共计15分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http: ...

  10. vue2 如何操作dom

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template> <div> <div id ...