JQUERY的属性选择符和自定义选择符使用方法(二)


Posted in Javascript onApril 07, 2011

例子:给链接中含用“wangorg"字符的链接文字加粗
css:

.abold{ 
font-weight:bold; 
}

html:
$('document').ready(function(){ $('a[href*=wangorg]').addClass('abold'); 
})

属性选择也可以用组合方式:
$('a[href^=http]
[href*=wangorg]').addClass('abold')

自定义选择符是JQUERY添加的独有的完全不同的选择符,语法与CSS中的伪类选择符语法相同,即选择符以一个冒号(:)开头。
如:从匹配的带有wangorg类的div集合中选择第2个项,则相应语法:$('div.wangor:eq(1)')
用CSS的选择符语法为$('div:nth-child(2)')
例子:将表格的偶数行的底色变为#ccc
CSS:

.alt{ 
backgroud-color:#ccc; 
}

HTML:
$('document').ready(function(){ $('tr:odd').addClass('alt') 
})

将网页中的所有表格都变以上效果:
$('document').ready(function(){ 
$('tr:nth-child(even)').addClass('alt'); 
})

将表格中含有“wangorg"字符串的表格的字体加粗
$('document').ready(function(){ 
$('tr:contains(wangorg)').addClass('abold'); 
})

相关选择器解释:
:eq(index)
结果集中位于给定索引之后(大于该索引)的元素 (从0开始)
:odd
结果集中所有奇数元素(从0开始)
:even 结果集中所有偶数元素(从0开始)
:nth-child(even)
作为其父元素第偶数个子元素的元素(从1开始计数)
:contains(text) 包含给定文本text的元素。
Javascript 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
Mar 05 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
微信小程序网络封装(简单高效)
Aug 06 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 #Javascript
jquery对表单操作2
Apr 06 #Javascript
jQuery对表单的操作代码集合
Apr 06 #Javascript
24款非常有用的 jQuery 插件分享
Apr 06 #Javascript
jquery常用技巧及常用方法列表集合
Apr 06 #Javascript
jQuery参数列表集合
Apr 06 #Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 #Javascript
You might like
随机头像PHP版
2006/10/09 PHP
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
jquery Form轻松实现文件上传
2017/05/24 jQuery
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python MD5加密实例详解
2017/08/02 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
机电一体化大学生求职信
2013/11/08 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
领导参观欢迎词
2015/01/26 职场文书
教研活动主持词
2015/07/03 职场文书
Python机器学习之逻辑回归
2021/05/11 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python