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中的var_dump函数实现代码
Sep 07 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
如何判断微信内置浏览器(通过User Agent实现)
Sep 01 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 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下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
Python用GET方法上传文件
2015/03/10 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
致跳高运动员广播稿
2014/01/13 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
医学求职信
2014/05/28 职场文书
总经理检讨书
2014/09/15 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS