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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
VueJS实现用户管理系统
May 29 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
DIY实用性框形天线
2021/03/02 无线电
php 什么是PEAR?
2009/03/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
Thinkphp中数据按分类嵌套循环实现方法
2014/10/30 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
PHP函数超时处理方法
2016/02/14 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
使用tensorflow实现线性回归
2018/09/08 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
工会换届选举方案
2014/05/21 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
大学生实习介绍信
2015/05/05 职场文书
付款证明模板
2015/06/19 职场文书