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 自定义的联动下拉框
Feb 07 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 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页面实现定时跳转的方法
2014/10/31 PHP
php生成图片验证码
2015/06/09 PHP
php实现的递归提成方案实例
2015/11/14 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
Node.js Addons翻译(C/C++扩展)
2016/06/12 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
vscode 远程调试python的方法
2017/12/01 Python
django中send_mail功能实现详解
2018/02/06 Python
pandas取出重复数据的方法
2019/07/04 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
浅析Python 序列化与反序列化
2020/08/05 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
护士自我鉴定范文
2013/10/06 职场文书
施工工地安全标语
2014/06/07 职场文书