getElementsByAttribute
作者:司徒正美 来源:Ruby's Louvre 发布时间:2009-10-27 12:13:00
标签:JQuery,选择符,getElementsByAttribute
这个可以说属性选择符的JS版,用来遴选元素是适合不过。在开始之前,我们复习一下CSS2的属性选择符,JQuery高手可以跳过。
属性选择符:
名称 | 语法 | 描述 | 例子 |
---|---|---|---|
Simple Attribute Selector | [Attr] 或者tagName[Attr] | 选择具有此属性的元素 | blockquote[title] { color: red } |
Attribute Value Selector | [Attr="value"] 或者tagName[Attr="value"] | 选出属性值精确等于给出值的元素 | h2[align="left"] { cursor: hand } |
"Begins-with" Attribute Value Selector | [Attr^="value"] 或者tagName[Attr^="value"] | 选出属性值以给出值开头的元素 | h2[align^="right"] { cursor: hand } |
"Ends-with" Attribute Value Selector | [Attr$="value"] 或者tagName[Attr$="value"] | 选出属性值以给出值结尾的元素 | div[class$="vml"]{behavior: url(#VMLRender)} |
Substring-match Attribute Value Selector | [Attr*="value"] 或者tagName[Attr*="value"] | 选出属性值包含给出值的元素 | div[class*="grid"]{float:left} |
One-Of-Many Attribute Value Selector | [Attr~="value"] 或者tagName[Attr~="value"] | 原元素的属性值为多个单词,给出值为其中一个。 | li[class~="last"]{padding-left:2em} |
Hyphen Attribute Value Selector | [Attr|="value"] 或者tagName[Attr|="value"] | 原元素的属性值等于给出值,或者以给出值加“-”开头 | span[lang|="en"]{color:green} |
反选属性值选择器 | [Attr!="value"] 或者tagName[Attr!="value"] | 非标准,jQuery中出现的 | span[class!="red"]{color:green} |
当然属性值不定要用双引号,也可以用单引号,或干脆不写。属性值可以是字母,数字,或者gb2312等编码的文字,总之,平时怎样命名变量,也应该怎样命名此属性值。如,我们可以用中文来命名变量,因此同样的事出在属性值上也没有问题。如果属性值是"#"就肯定所错,因为变量名也不能这样用。不过建议尽量用英文单词。
好了,是getElementsByAttribute的表演时间了,比网上的同名函数强大得多了。传入两个参数,第一个是字符串,必选,就是CSS2的属性选择符,由于是字符串,里面就不要加双引号与单引号了,我也懒得匹配它。第二个是元素节点,可选,从来加快查找速度,默认是document。不过自从IE8等支持querySelector与querySelectorAll后,jQuery的选择器基本只剩下半条命,也只能在IE6,IE7这些要啥没啥的非标准浏览器作威作福罢了。因此,如果检测到浏览器支持querySelectorAll,就调用该原生方法,否则就全文档遍历匹配。
最后切记,如果要使用到属性值,不要把属性值用引号引起来,直接放到等于号后面即可。放一些测试页面,让大家看看如何使用此函数。
0
投稿
猜你喜欢
- 下面的例子演法了怎么样从协程里返回一个值:import asyncioasync def coroutine(): print(
- 条件判断计算机之所以能做很多自动化的任务,因为它可以自己做条件判断。比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if
- 1.介绍DeLorean是一个Python的第三方模块,基于 pytz 和 dateutil 开发,用于处理Python中日期时间的格式转换
- 有这么一个题目,说bt其实也不bt,为了重点突出其中的意图,特意加上了括号:var a = (++Math.P
- 今日需求其实就是把Word中的表格转到Excel中,顺便做一个调整。这个需求在实际工作中,很多人还是经常碰到的!如果单单是两个表格,那只要简
- 其实各大深度学习框架背后的原理都可以理解为拟合一个参数数量特别庞大的函数,所以各框架都能用来拟合任意函数,Pytorch也能。在这篇博客中,
- 我们将研究一种判别式分类方法,其中直接学习评估 g(x)所需的 w 参数。我们将使用感知器学习算法。感知器学习算法很容易实现,但为了节省时间
- pyecharts是一个封装百度开源图表库echarts的包,使用pyecharts可以生成独立的网页,也可以在flask、django中集
- Python的for循环十分灵活,使用for循环我们可以很轻松地遍历一个列表,例如:a_list = ['z', '
- 经典鼠标控制左右滚动,图片间隔无缝滚动,悬停滚动,图片控制左右滚动JavaScript代码<!DOCTYPE html PUBLIC
- 目录1 标准化2 归一化3 正则化4 离散化5 白化 机器
- 在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜。现在我们只用JavaScript结合CSS语言也可以轻易做出这个效果
- 前言最近开始学习深度学习相关的内容,各种书籍、教程下来到目前也有了一些基本的理解。参考Keras的官方文档自己做一个使用applicatio
- 引言with 语句是从 Python 2.5 开始引入的一种与异常处理相关的功能(2.5 版本中要通过 from __future__ im
- 目录一.准备工作二.预览1.主界面2.翻译3.支持多种语言哦三.源代码3.1 My_Translator-v2.0.py3.2 Transl
- 在过去的十年中,MySQL已经成为广受欢迎的数据库,而WordPress博客使用的是MySQL数据库,虽然使用插件可以解决一些问题,但是实现
- 这篇文章主要介绍了python global和nonlocal用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- 本文实例讲述了Django框架用户注销功能实现方法。分享给大家供大家参考,具体如下:HttpResponse()里有个delete_cook
- 在目前的工作中需要解决复制整个SqlServer数据库的问题,复制的内容包括数据库大纲、数据库中的存储过程、函数、表结构、主外键关系以及表中
- 本文实例为大家分享了javascript自定义加载loading效果的具体代码,供大家参考,具体内容如下加载中图片,底色为白色(看不到)效果