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 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
javascript文本模板用法实例
Jul 31 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
node.js基础知识小结
Feb 26 Javascript
p5.js临摹旋转爱心
Oct 23 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
netbeans7安装python插件的方法图解
2013/12/24 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
影视制作岗位职责
2013/12/04 职场文书
企事业单位求职者的自我评价
2013/12/28 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
十岁生日答谢词
2015/01/05 职场文书
2015年小学开学寄语
2015/02/27 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
nginx服务器的下载安装与使用详解
2021/08/02 Servers
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技