JQuery中根据属性或属性值获得元素(6种情况获取方法)


Posted in Javascript onJanuary 17, 2013

根据属性获得元素

1.比如要获取页面p标签中属性有id的元素

$("p[id]").css("color","red");

根据属性值获得元素
1.$。在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下:
HTML代码
<input name="newsletter" /> 
<input name="milkman" /> 
<input name="jobletter" />

jQuery 代码:
$("input[name$='letter']")

结果:
[ <input name="newsletter" />, <input name="jobletter" /> ]

2.!。选择器:[attribute!=value],匹配所有不含有指定的属性,或者属性不等于特定值的元素,此选择器等价于:not([attr=value])。
例子说明一下:
HTML代码

<input type="checkbox" name="newsletter" value="Hot Fuzz" /> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:
$("input[name!='newsletter']").attr("checked", true);

结果:
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

3.*。选择器:[attribute*=value],匹配给定的属性是以包含某些值的元素。举个例子说明一下:
HTML 代码:

<input name="man-news" /> 
<input name="milkman" /> 
<input name="letterman2" /> 
<input name="newmilk" />

jQuery 代码:
$("input[name*='man']")

结果:
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

4.@。匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即
可。

5.^。选择器:[attribute^=value],匹配给定的属性是以某些值开始的元素,下面举个例子来说明一下:
HTML 代码:

<input name="newsletter" /> 
<input name="milkman" /> 
<input name="newsboy" />

jQuery 代码:
$("input[name^='news']")

结果:
[ <input name="newsletter" />, <input name="newsboy" /> ]

6 获取指定属性且设定值中有指定字符串的元素
HTML 代码:

<input type="checkbox" name="newsletter" value="Hot Fuzz"/> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery代码:
$("input[name$='letter'][value$='zz']").attr("checked","true");支持多条件操作

当然了,也可以根据id属性或其他属性来获取,如$("input[id=id1]").css("color",red);
在jquery中,当使用$(”input[name='metaId']“).val()不能直接获得被选择的radio的值,只是获得 radio标签的第一个值,这可能jquery使用xpath语言了进行查找有关,而我们通常是想获得被选中的radio的值,有以下几种方法:
1,使用$(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名
2,使用$(”:radio:checked”).val()获得 //限制页面只有一组radio标签
Javascript 相关文章推荐
javascript测试题练习代码
Oct 10 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
js给table赋值的实例代码
Oct 13 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
js 函数性能比较方法
Aug 24 Javascript
JavaScript控制Session操作方法
Jan 17 #Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 #Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 #Javascript
jquery选择器的选择使用及性能介绍
Jan 16 #Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 #Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 #Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 #Javascript
You might like
PHP实现加强版加密解密类实例
2015/07/29 PHP
PDO::query讲解
2019/01/29 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
在python3中实现更新界面
2020/02/21 Python
Python实现疫情地图可视化
2021/02/05 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
香港时尚女装购物网站:ZAFUL
2017/07/19 全球购物
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
犯错检讨书
2014/02/21 职场文书
购房意向书范本
2014/04/01 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS