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 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
简单实现js浮动框
Dec 13 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 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_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
php防止sql注入的方法详解
2017/02/20 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
Oracle性能调优原则
2012/05/03 面试题
《槐乡五月》教学反思
2014/04/25 职场文书
医院信息公开实施方案
2014/05/09 职场文书
中国梦口号
2014/06/13 职场文书
竞聘自述材料
2014/08/25 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers