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 相关文章推荐
列表内容的选择
Jun 30 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
js评分组件使用详解
Jun 06 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 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可逆加密/解密函数分享
2012/09/25 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
一些Solaris面试题
2015/12/22 面试题
安全月活动总结
2014/05/05 职场文书
大学生心理活动总结
2014/07/04 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
单位接收函格式
2015/01/30 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技