JQUERY的属性选择符和自定义选择符使用方法(二)_jquery

例子:给链接中含用“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的元素。

时间: 2025-01-21 20:02:34

JQUERY的属性选择符和自定义选择符使用方法(二)_jquery的相关文章

jQuery 绑定事件到动态创建的元素上的方法实例_jquery

在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay,想法很简单,逻辑似乎也无错.具体我们来看一下现实到底能不能实现. 1.页面构造个表单,放上几个输入框.代码看起来是这样子的. 复制代码 代码如下: <form action="/" method="post">        <table>  

JQuery的$和其它JS发生冲突的快速解决方法

 本篇文章主要是对JQuery的$和其它JS发生冲突的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点.   然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件.它们也使用$.所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题.现在我们来看看如何解决这个冲突问题.请看下文:   我们都知道J

JQuery实现带排序功能的权限选择实例

  本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 7

深入理解计算机系统-之-内存寻址(三)--分段管理机制(段描述符,段选择子,描述符表)

逻辑地址-=>线性地址-=>物理地址 前面我们提到了当使用80x86微处理器时,有三种不同的地址: 逻辑地址(logical address):包含在机器语言指令中用来指定一个操作数或一条指令的地址.这个寻址方式在80x86著名的分段结构中表现得尤为具体,它促使MS-DOS或Windows程序员把程序分成若干段.每一个逻辑地址都由一个段(segment)和偏移量(offset或displacement)组成,偏移量指明了从段开始的地方到实际地址之间的距离. 线性地址(linear addres

JQuery实现带排序功能的权限选择实例_jquery

本文实例讲述了JQuery实现带排序功能的权限选择.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JS中attr和prop属性的区别以及优先选择示例介绍_基础知识

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties).只是,window或document中使用.attr()方法在jQuery1.6之前不能正常运行,因为window和document中不能有attributes.prop应运而生了. 既然我们想知道他们两的区别,最好就看看他们的源代码,不要被代码长度所吓到,我们只看关键的几句: attr: function( elem, name, value, pass )

Jquery选择器中使用变量实现动态选择例子_jquery

例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

“子选择符”与“后代选择符”的区别

很多朋友把分不清"子选择符"和"后代选择符"的区别.其实它们的差别还是蛮大的."后代选择符"IE6,甚至更低IE版本,就已经支持了.也许你 已经被这些"拗口"."深奥"的名词搞迷糊了.到底什么"后代选择符"呢?其实大家都用过,看看下面的例子就明白了. 现在无论是FireFox还是IE7,对于"子选择符"的支持还都存在一定的问题. <!DOCTYPE html p

jQuery实现复选框成对选择及对应取消的方法

 这篇文章主要介绍了jQuery实现复选框成对选择及对应取消的方法,实例分析了jQuery中change方法的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery实现复选框成对选择及对应取消的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1