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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
基于Vue实现拖拽效果
Apr 27 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 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判断指定时间段的2个方法
2014/03/14 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
[原创]图片分页查看
2006/08/28 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
js实现简单的选项卡效果
2017/02/23 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
wxPython中文教程入门实例
2014/06/09 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
python编写分类决策树的代码
2017/12/21 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
类的核心特性有哪些
2014/01/01 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
客服部工作职责范本
2014/02/14 职场文书
保密协议书范本
2014/04/22 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
信用卡收入证明范本
2015/06/12 职场文书