本文是jQuery选择器系列之属性过滤(Attribute Filters).
属性过滤(Attribute Filters)的内容就是html元素中的属性,例如 name, id, class, 但是不是指的其值,是指属性本身.我在每篇文章里面都讲一下自己对这个选择器系列的理解,原因其一是方便理解其含义并记忆,其二就是”混个脸熟”,即便记不住,在以后用到的时候也可以很快的查找api并应用上.
其包括以下几个选择器:
- [attribute]
- [attribute=value]
- [attribute!=value]
- [attribute^=value]
- [attribute$=value]
- [attribute*=value]
- [attributeFilter1][attributeFilter2][attributeFilterN]
[attribute]
用法: $(“div[id]“) ;
说明: 匹配包含给定属性的元素.注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可.是的,新版必须去掉@符号,这个改变相信使用老版本的童鞋会习惯的.例子中是选取了所有带”id”属性的div标签.
[attribute=value]
用法: $(“input[name='newsletter']“).attr(“checked”, true);
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素.
[attribute!=value]
用法: $(“input[name!='newsletter']“).attr(“checked”, true);
说明: 匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).嗯,之前看到的 :not 派上了用场.
[attribute^=value]
用法: $(“input[name^='news']“) ;
说明: 匹配给定的属性是以某些值开始的元素.嗯,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!
[attribute$=value]
用法: $(“input[name$='letter']“) ;
说明: 匹配给定的属性是以某些值结尾的元素.
[attribute*=value]
用法: $(“input[name*='man']“) ;
说明: 匹配给定的属性是以包含某些值的元素.
[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(“input[id][name$='man']“) ;
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
通过属性过滤(Attribute Filters)的学习,可以看出来,jQuery的选择器用法是微妙的,得细致而为之.让我想起来了那个因为一个小数点导致什么宇宙飞船爆炸还是什么的事了.有点耸人听闻,但是等我们使用的非常非常多了以后,自然就很容易分开区别了.
转载请注明: 出自 FlexHome
原文链接:http://flex.desizen.com/jquery-selectors-attributefilters/
相关推荐
在 jQuery 中,属性选择器是用于根据元素的特定属性来选取元素的重要工具。本文将深入探讨如何利用属性选择器来提高你的前端开发效率。** ### 一、属性选择器的基本语法 jQuery 提供了多种属性选择器,每种都有其...
综上所述,jQuery属性选择器是实现基于属性选择元素的高效方法,它使我们能够进行精确的DOM操作,并且可以灵活地结合各种选择器实现复杂的元素选择需求。通过本文的实例,相信读者已经对jQuery属性选择器有了较深入...
一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: 代码如下: <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> [removed][removed] <style type=”...
接下来,让我们详细探讨一下jQuery属性选择器的用法和实例。 属性选择器按照属性值的不同匹配类型,可以分为如下几个类别: 1. 等于选择器:选择属性值完全等于特定值的元素。 语法:$('[attribute=value]') ...
首先,`element[attribute*='value']`是jQuery中的一种属性选择器,它用于选取具有指定属性,并且该属性的值包含给定子字符串的所有元素。例如,如果你有多个链接`<a>`,并且其中某些链接的`href`属性值包含了字符串...
jQuery 属性选择器是 jQuery 选择器的一种,用于根据元素的特定属性来选取 HTML 元素。这在处理页面上的动态内容或者需要针对特定属性执行操作时非常有用。以下是对属性选择器的详细说明: 1. **基础用法**: - `...
#### 四、Jquery属性选择器 属性选择器可以根据元素的属性及其值来选取元素。 - **`$("[attribute]")`**:选择具有指定属性的所有元素。 - **`$("[attribute=value]")`**:选择具有指定属性和值的所有元素。 - **`...
**jQuery 属性选择器详解** 在前端开发中,jQuery 是一个强大的 JavaScript 库,它极大地简化了 DOM 操作,其中包括选择元素。属性选择器是 jQuery 提供的一种高级选择器,用于根据元素的属性及其值来定位和操作...
2. **jQuery 属性选择器**: - **属性存在选择器**:`$("[href]")` 选取所有具有 "href" 属性的元素。 - **属性值等于选择器**:`$("[href=#]")` 选取所有 "href" 属性值等于 "#" 的元素。 - **属性值不等于选择...
本资源"jquery仿淘宝SKU选择商品属性代码.rar"提供了一种利用jQuery实现的解决方案,用于模拟淘宝网上的商品属性选择功能。以下是对这个代码实现的详细解析: 1. **jQuery框架基础**:jQuery是一个轻量级的...
让我们看几个使用jQuery属性选择器的例子: ```javascript // 选取所有class属性含有"example"的元素 $('.example') // 选取id属性为"myID"的元素 $('#myID') // 选取type属性为"button"的元素 $('input[type=...
2. `tj.gif`无需加引号:在CSS和jQuery的属性选择器中,如果你在属性值中使用的是纯字符(而不是特殊字符或变量),通常不需要引号。所以`src*=tj.gif`是正确的,表示查找`src`属性包含`tj.gif`的元素。 整个代码的...
1. **选择器**:jQuery提供了丰富的CSS选择器,如ID选择器(#id),类选择器(.class),以及更复杂的属性选择器,用于精准地选取网页中的DOM元素。在商品查询功能中,我们可以用选择器定位到筛选条件(如颜色、尺寸等)...
**jQuery属性选择器** jQuery还允许使用XPath表达式来选取具有特定属性的元素,如: - `$("[href]")` 选取所有含有`href`属性的元素。 - `$("[href='#']")` 选取所有`href`值为`"#"`的元素。 **jQuery CSS选择器**...
2. **jQuery属性选择器**: - `$("[href]")` 选择所有具有`href`属性的元素。 - `$("[href='#']")` 选择`href`值为`#`的元素。 - `$("[href!='#']")` 选择`href`值不等于`#`的元素。 3. **jQuery CSS选择器**: ...
本教程将深入探讨如何使用jQuery库来创建一个简单的商品属性选择表单,以提升用户体验并简化前端交互逻辑。 首先,jQuery是一个高效、简洁的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果的实现。...
### jQuery 属性选择器 jQuery 还支持XPath表达式来选取具有特定属性的元素,如 `$("[href]")` 选取所有带有`href`属性的元素,`$("[href='#']")` 选取所有`href`属性值为`#`的元素。 ### jQuery CSS选择器 ...