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 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
vue select 获取value和lable操作
Aug 28 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(5) 类和对象
2010/02/16 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
优化PHP程序的方法小结
2012/02/23 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
php实现源代码加密的方法
2015/07/11 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
javascript背投广告代码的完善
2008/04/08 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
JS 仿腾讯发表微博的效果代码
2013/12/25 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
2014/01/22 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python编程之Re模块下的函数介绍
2017/10/28 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
协议书样本
2014/04/23 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
爱的承诺书
2015/01/20 职场文书
入党介绍人考察意见
2015/06/01 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
linux目录管理方法介绍
2022/06/01 Servers
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS