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 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
JavaScript Prototype对象
2009/01/07 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
jQuery知识点整理
2015/01/30 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
深入理解Python装饰器
2016/07/27 Python
关于python的list相关知识(推荐)
2017/08/30 Python
Python实现邮件的批量发送的示例代码
2018/01/23 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Python如何实现爬取B站视频
2020/05/20 Python
python如何输出反斜杠
2020/06/18 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
图书室管理制度
2014/01/19 职场文书
微信营销策划方案
2014/02/24 职场文书
大学军训感言400字
2014/03/11 职场文书
三严三实对照检查材料
2014/09/22 职场文书
项目合作协议书
2014/09/23 职场文书
信息合作协议书
2014/10/09 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript