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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
Node.js静态服务器的实现方法
Feb 28 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
Vue实现计算器计算效果
Aug 17 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
微信小程序用户登录和登录态维护的实现
Dec 10 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
2021年最新CPU天梯图
2021/03/04 数码科技
Adodb的十个实例(清晰版)
2006/12/31 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
jquery自定义函数的多种方法
2014/01/09 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Python开发编码规范
2006/09/08 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python网络编程详解
2017/10/31 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
pandas取出重复数据的方法
2019/07/04 Python
pymysql模块的操作实例
2019/12/17 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
python能在浏览器能运行吗
2020/06/17 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Java程序员面试题
2016/09/27 面试题
18岁生日感言
2014/01/12 职场文书
事业单位鉴定材料
2014/05/25 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript