JQuery中$之选择器用法介绍


Posted in Javascript onApril 05, 2011

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" /> ]

在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 相关文章推荐
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 #Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 #Javascript
Ajax 数据请求的简单分析
Apr 05 #Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 #Javascript
jQuery的运行机制和设计理念分析
Apr 05 #Javascript
jQuery JSON的解析方式分享
Apr 05 #Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 #Javascript
You might like
php ajax 静态分页过程形式
2011/09/02 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
详解jQuery选择器
2016/12/21 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
初中三年学生的学习自我评价
2013/11/13 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
企业门卫岗位职责
2013/12/12 职场文书
公司周年庆活动方案
2014/08/25 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python