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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
学习ExtJS TextField常用方法
Oct 07 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
JavaScript定时器常见用法实例分析
Nov 15 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面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python新手学习函数默认参数设置
2020/06/03 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
table不让td文字溢出操作方法
2022/12/24 HTML / CSS