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入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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 Google的translate API代码
2008/12/10 PHP
PHP安全上传图片的方法
2015/03/21 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
TypeError document.getElementById(...) is null错误原因
2015/05/18 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现获取网站PR及百度权重
2015/01/21 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python实现俄罗斯方块游戏
2020/03/25 Python
python看某个模块的版本方法
2018/10/16 Python
python实现键盘控制鼠标移动
2020/11/27 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
大学生村官典型材料
2014/01/12 职场文书
英语教学随笔感言
2014/02/20 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
我的老师教学反思
2014/05/01 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
采购内勤岗位职责
2015/04/13 职场文书
小学数学教师研修日志
2015/11/13 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL