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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
Knockoutjs快速入门(经典)
Dec 24 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
基于zTree树形菜单的使用实例
Dec 25 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定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
清空上传控件input file的值
2010/07/03 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
测试工程师职业规划书
2014/02/06 职场文书
优秀团队获奖感言
2014/02/19 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL