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中如何得到中英文混合字符串的长度
Jan 17 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
jQuery使用经验小技巧(推荐)
May 31 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
小程序自定义日历效果
Dec 29 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
原生js实现日历效果
Mar 02 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小偷程序)
2014/08/23 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
文件上传插件SWFUpload的使用指南
2016/11/29 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python生成随机数的方法
2014/01/14 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python实现微信机器人的方法
2019/09/06 Python
python图形用户接口实例详解
2019/12/16 Python
Python lambda表达式原理及用法解析
2020/08/18 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
运动会领导邀请函
2014/02/05 职场文书
公司承诺书范文
2014/05/19 职场文书
春节慰问简报
2015/07/21 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python