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 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
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配置php-fpm启动参数及配置详解
2013/11/04 PHP
ThinkPHP模型详解
2015/07/27 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vuex实现购物车功能
2020/06/28 Javascript
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
应届生船舶驾驶求职信
2013/10/19 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
房屋租赁意向书
2014/04/01 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
追悼会悼词大全
2015/06/23 职场文书
老干部座谈会主持词
2015/07/03 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
教师节随笔
2015/08/15 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers