`
wx1569618008
  • 浏览: 75281 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

【转载】jQuery选择器

 
阅读更多

JQuery知识快览之一—选择器

阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增。对于熟悉1.4版想学1.10版的请直接搜索"新增"。

 

JQuery是一个JavaScript库,它提供了很多有用的API,简化了我们使用JavaScript的方式。

JQuery由JQuery.com提供,你可以在该网站上下到最新的

有两种类型的JQuery,一种是未压缩的,便于你学习其源代码,另一种是压缩的,不易阅读但是更节约流量。

现在有两个版本的JQuery,V1.x支持ie6,7,8,V2.x开始不支持ie6,7,8了。

现在1.x的最新版本是1.10.2

如果你不愿意在自己的计算机上存放JQuery库,你可以连接到以下的一些CDN.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

 使用CDN的好处,用户已经访问了包含这些资源的网站的话,在访问你的网站时就不用重复下载资源了。

 

本文主要介绍JQuery选择器,这可以说是JQuery的亮点之一,JQuery提供了有丰富功能的选择器,可以方便的获取页面中的元素。

使用选择器注意事项

1.选择器对元素,属性,值的大小是不敏感的

2.对于!"#$%&'()*+,./:;<=>?@[\]^`{|}~等特殊符号,需要用//转义

基础选择器

1.选择所有的元素

$("*")

2.根据元素Id选择

$("#myid")

注意一个页面的id都是唯一的,这个只能选择第一个match的

3.根据元素的名称选择

$("div")

4.根据元素的css类选择

$(".myclass")

注意:一个元素可以有多个css类,只要其中一个匹配就会被选择

5.复合选择器

做多种选择器的和,比如$("#myid,div,.myclass)相当于$("#myid").add("div").add(".myclass")

 

层次选择器

1.选择选择器1中所选元素的所有符合选择器2条件的直接子节点

$("body > div")

2.选择选择器1中所选元素的所有符合选择器2条件的所有子孙节点

$("body div")

3.选择选择器1中所选元素后面的一个符合选择器2条件的节点,选择器2所选元素和选择器1所选元素要在同一节点下。

$("#myid + li")

4.选择选择器1中所选元素后面的所有符合选择器2条件的节点,选择器2所选元素和选择器1所选元素要在同一节点下。

$("#myid ~ li")

 

表单选择器

用表单选择器要注意两点,一点是最好和input一起用,比如$("input:submit")。另一点是大多数选择器都不属于css规范,无法用其优化功能。最好是先做别的选择,再用表单选择器过滤。

1.匹配所有按钮

$(":button")

匹配所有的<button>mybutton</button>和<input type="button" value="mybutton" />

 

2.匹配提交按钮

$(":submit")

匹配所有的<button>mybutton</button>,<button type="submit">mybutton</button>和<input type="submit" value="提交" />

 

3.匹配所有文本

$(":text")

匹配所有的<input type="text" >

注意:从版本1.5.2开始,<input>也能被匹配。

 

4.匹配当前焦点

$(":focus")

这是1.6版新增的,能获取当前获得焦点的元素

 

5.获取被选择状态的元素

$(":checked")

注意:它适用于checkbox,radio button和select列表。

 

6.其他的一些,很容易理解的。

$(":selected")

$(":reset")

$(":password")

$(":input")

$(":image")

$(":file")

$(":enabled")

$(":disabled")

 

属性选择器

1.有某属性

$("[attribute]")

如$("div[id]")选择有id属性的div

2.属性为某值

$("[attribute='value']")

3.属性为某值或‘某值-’打头的值

$("[attribute|='value']")

4.属性的值中含有某值

$("[attribute*='value']")

5.属性含有某值

$("[attribute~='value']")

注意:一个属性可以有多个值,每个值之间用空格分开,这个选择器正好能处理多个值中包含给定值就被选择的情况

6.属性的值以某值打头

$("[attribute^='value']")

7.属性的值以某值结尾

$("[attribute$='value']")

8.不含某属性或有该属性但是属性不为某值

$("[attribute!='value']")

注意:该选择器不属于css规范,无法用其优化功能。最好是先做别的选择,再用该选择器过滤。

9.复合属性选择器

$("[attributeFilter1][attributeFilter2][attributeFilterN]")

 

基本过滤器

1.获取当前选择器中给定位置的元素,从0开始计数

$("selector:first")

$("selector:last")

$("selector:even")偶数位

$("selector:odd")奇数位

$("selector:eq(index)")等于给定索引值的元素

$("selector:gt(index)")所有大于给定索引值的元素

$("selector:lt(index)")所有小于给定索引值的元素

注意:从1.8版开始,给定索引值可以为负数,表示从尾部开始索引。

2.去除与给定选择器匹配的元素

$(":not(selector)")

最好用.not()函数

3.选择h1,h2等header标签

$(":header")

4.选择给定语言的元素

1.9版新增

对于<div></div>

用$("div:lang(en)")可以匹配所有lang属性为en或en-打头的元素

5.获取根元素

1.9版新增

$(":root")获取<html>元素

6.获取文档URI所指向的元素。

比如有个URI是http://example.com/#foo,$("p.target")会获取<p id="foo">元素

7.获取当前正在动画的对象

$(":animated")

 

内容过滤器

1.匹配包含给定文本的元素

$(":contains(text)")

2.匹配所有不包含子元素或者文本的空元素

$(":empty")

3.匹配所有包含子元素或者文本的元素

$(":parent")

注意:所有的p都认为非空

4.匹配含有选择器所匹配的元素的元素.

$(":has(selector)")

注意:被匹配的元素可以是其孙子元素

 

子元素过滤器

1.获取在父元素中给定位置的元素,从1开始计数,对每个父元素分别计数。

需要注意的是如果选择器中的元素有n个在一个父元素中,但是这n个并不在父元素中的给定位置处,这样这n个元素都不会被选择。

$(":first-child")

$(":last-child")

$(":nth-child(index/even/odd/equation)")

equation的写法如:

$(":nth-child(3n+2)")

 

$(":nth-last-child(index/even/odd/equation)")  1.9版新增

2.选择在其父元素中是唯一元素的元素

$(":only-child")

3.获取在父元素中给定位置的元素,从1开始计数,对每个父元素分别计数。

针对原有的:nth-child等选择器对位置的判断是针对父元素中所有的元素的情况,1.9版新增了一些选择器,其对位置的判断变为针对父元素中所有在选择器中的元素来计数。

$(":first-of-type")

$(":last-of-type")

$(":nth-of-type(index/even/odd/equation)")

$(":nth-last-of-type(index/even/odd/equation)")

4.选择在选择器中是父元素唯一元素的元素

$(":only-of-type")

这个也是1.9版新增的

 

可见性过滤器

只有两个

$(":hidden")和$(":visible")

下面这些元素被认为是hidden的:

1.CSS的display属性为none

2.type="hidden"

3.元素的长或宽被设置为0

4.祖先为hidden,则元素为hidden

注意:不在document中的元素无法判断是否可见。

visibility:hidden或opacity:0被认为是可见的,因为它们仍会消耗布局空间。



原作者:Jingle Guo
出处:http://www.cnblogs.com/studynote/


转载于:https://my.oschina.net/u/1266623/blog/350794

分享到:
评论

相关推荐

    jQuery表单验证 转载

    jQuery的核心是选择器,通过选择器可以轻松地获取DOM元素并进行操作。对于表单验证,我们通常需要获取表单元素(如输入框、下拉框等),然后对这些元素的值进行检查。例如,我们可以使用`$("#elementId").val()`来...

    【转载】去掉jquery menu plugin 的“No back link”

    这可能涉及到对jQuery选择器、方法和事件的理解,如`$(selector).click()`用于绑定点击事件,`$(this).parent()`用于获取当前元素的父级等。 "工具"标签可能意味着博客中提到的解决方法可能涉及到使用其他辅助工具...

    15天学会JQuery(转载)

    1. **选择器**: jQuery的选择器是其强大功能之一,它允许我们基于元素的ID、类名、属性等快速选取DOM元素。例如,`$("#elementID")`选取ID为`elementID`的元素,`$(".className")`选取所有类名为`className`的元素。...

    带收藏转载的jquery瀑布流.zip

    itemSelector: '.item', // 匹配的元素选择器 columnWidth: function(containerWidth) { // 列宽计算方法 return containerWidth / 4; // 假设每列4个元素 }, percentPosition: true // 使用百分比位置 }); }...

    《锋利的jQuery(第2版)》(清晰版).zip

    《锋利的jQuery》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点...

    (转载文章)jquery日期显示中文

    4. 使用jQuery操作DOM:将格式化后的日期插入到HTML元素中,可以使用jQuery的选择器找到对应的元素,并用`.html()`或`.text()`方法更新其内容。 5. 插件使用:也可以选择使用已有的jQuery日期插件,如jQuery UI的...

    04-javaWeb-jQuery.7z

    选择器——表单对象属性过滤选择器 案例5-左右移动 总结 ———————————————— 版权声明:本文为CSDN博主「oooola」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

    JQuery应用实例学习(强烈推荐)转载.doc

    例如,通过 ID、类或者属性选择器,可以迅速定位到页面上的特定元素。jQuery 提供了一系列方法,如 `$(selector)` 用于选择元素,`.html()` 用于修改元素的内容,`.append()` 和 `.prepend()` 用于添加内容,`.hide...

    《锋利的jQuery》(高清扫描版).pdf

    《锋利的jQuery》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点...

    jquery的经典资料

    - **选择器**:jQuery提供了强大的选择器语法,类似于CSS选择器,用于定位DOM中的元素。 - **事件处理**:通过事件方法如`.click()`、`.hover()`等可以轻松绑定事件处理器。 ##### 4. 使用 AJAX - **异步请求**:...

    jQuery源码分析-04 选择器-Sizzle-工作原理分析

    在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: “div &gt; p” 块表达式: “div” “p” 并列选择器表达式: “div, p” 块分割器: ...

    杨洋疯狂C#第一期 Jquery相关代码

    2. **ch1_24JqueryUI.html**:这可能涉及到jQuery UI库的应用,包括各种交互式组件和视觉效果的实现,如对话框、滑块、日期选择器等。 3. **ch1_4.html**:可能讲解了jQuery中的事件绑定,如$(element).click()或$...

    Jquery源码(包含Jq用到的所有函数体)

    根据这个基本流程,对于上面“更好用”的疑问,我们就有了一个初步的比较具体的答案了:“更好用”指的是“更好的元素选择器”和“更好的功能方法集”。好了,到了这里,我们的需求就更加清晰了: ————————...

    layui-progress+element+jquery+js设计一个动态进度条

    例如,可以设置定时器模拟任务的进度,然后使用jQuery选择器找到对应的layui-progress元素并调整其进度值。 在实际应用中,动态进度条可以用于文件上传、数据加载、计算过程等多种场景。例如,当用户发起一个大文件...

    jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下; 一、JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察。 不使用...

    暴风影音jQuery焦点图

    1. **jQuery选择器**:jQuery的选择器允许开发者轻松地选取页面上的HTML元素,如`$("#id")`选择ID为指定值的元素,`$(".class")`选择所有类名为指定值的元素。 2. **事件绑定**:`$(element).on("event", function...

    jQuery源码分析-03构造jQuery对象-源码结构和核心函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,... 构造jQuery对象 3.1 源码结构 先看看总体结构,再做分解: 代码如下: (function( window, undefined ) { var jQuery = (function() {

    Easyui 去除jquery-easui tab页div自带滚动条的方法

    具体的选择器是针对ID为“tabs”的Tabs容器下的子元素,其中包括面板(panel)以及面板内容区域(panel-body)。 其中,`.panel-body` 类代表了Tab内容区域的容器,通过设置它的`overflow`属性为`hidden`,隐藏了该...

Global site tag (gtag.js) - Google Analytics