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的元素。

赞 (0)

相关推荐

  • jQuery代码优化 选择符篇

    本文就从选择符的角度简单探讨一下优化jQuery代码的问题. Sizzle的运行机制 jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎.当我们把一个选择符表达式(比如"#id".".class".":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度.以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述

  • jQuery入门第一课 jQuery选择符

    jQuery入门第一课 jQuery选择符

    选择符可以认为是一个增强版的getElementById方法.getElementById方法返回的是一个HTML元素,jQuery选择符返回的是HTML元素的一个包装.利用这个包装集,jQuery赋予了HTML元素更多的可以操作的方法.在JQuery中,处于核心地位的一个函数就是$.对,它就是一个函数,名字有点古怪.这个函数就是选择函数,其一般用法是 var obj=$(selector); 其中selector是一个字符串,就是下面要着重介绍的选择符.返回的是元素的包装集合.事实上,JQue

  • jQuery 关于伪类选择符的使用说明

    jQuery 关于伪类选择符的使用说明

    jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符 :nth-child的用法         nth-child是一个css3伪类选择符,在jQuery中被实现了,在Jquery API中对nth-child的定义是:"匹配其父元素下的第N个子或奇偶元素".读着感觉有点绕口,下面让我们通过例子来说明: 复制代码 代码如下: <div>    <ul>    <l

  • 初窥JQuery(一)jquery选择符 必备知识点

    本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始. CSS选择符包括通配选择符.ID选择符.属性选择符.包含选择符.类选择符等,他们的基本格式为: 通配选择符:$("#ID *") 表示该元素下的所有元素. ID选择符:$("#ID") 表示获得指定ID的元素. 属性选择符:$("input[type=text]") 表示type属性为text的

  • jquery选择符快速提取web表单数据示例

    jquery选择符快速提取web表单数据示例

    本人比较懒,在做web时,当遇到要重复多次同样的事时,就想找一种省时省力的方法. 以前在web提交表单并且需要验证用户输入时,在提取用户输入信息时,都要在js用到document.getElementById(),这样一个两个表单域还行,但有很多时(我就遇到过有十几个的情况)看看都眼花,所以个人就比较反感这种方式,不过还好,我自己瞎琢磨,利用jquery找到了一种方便的方法. 我给需要提交数据每个表单域添加了一个额外的属性,用自己额外定义的属性"_postField"代替原来的name

  • jQuery 选择符详细介绍及整理

    jQuery 选择符 CSS选择符, 如: $('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li). $('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项. jQuery库支持XPath选择符. 如: $('a[@title]')为取得所有带title属性的链接.也可以不用@符号. 如: $('div[ol]')为取得所以包含一个ol属性的div元素.当然,还允

  • JQUERY的属性选择符和自定义选择符使用方法（二）

    例子:给链接中含用"wangorg"字符的链接文字加粗 css: 复制代码 代码如下: .abold{ font-weight:bold; } html: 复制代码 代码如下: $('document').ready(function(){ $('a[href*=wangorg]').addClass('abold'); }) 属性选择也可以用组合方式: $('a[href^=http] [href*=wangorg]').addClass('abold') 自定义选择符是JQUERY

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

    众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.js 等其它比较好的插件.它们也使用$.所以有时候同时使用这个两个JS插件的时候,就会出现$的使用权冲突问题.现在我们来看看如何解决这个冲突问题.请看下文: 我们都知道JQuery有一个函数,jquery.noConflict() 它的作用是讲$的控制权转让出去.然后我们可以通过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">

  • jQuery+SpringMVC中的复选框选择与传值实例

    jQuery+SpringMVC中的复选框选择与传值实例

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked"); $("#cb1").attr("checked",true); 对应的jQuery函数,主要完成三个功能: 1.第一个复选框选中或取消选中,则下面的复选框为全选或取消全选: 2.当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个

  • Vue.js 中制作自定义选择组件的代码附演示demo

    定制 select 标签的设计非常困难.有时候,如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本,那是不可能的.在本文中,你将学习如何构建使用完全自定义 CSS 设置样式的 Vue.js 组件. Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd HTML <template> <div class="custom-select" :tabindex=&

  • WPF自定义选择年月控件详解

    WPF自定义选择年月控件详解

    本文实例为大家分享了WPF自定义选择年月控件的具体代码,供大家参考,具体内容如下 封装了一个选择年月的控件,XAML代码: <UserControl x:Class="SunCreate.CombatPlatform.Client.DateMonthPicker" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.micr

  • iOS自定义选择框代码分享

    iOS自定义选择框代码分享

    本文实例为大家分享了iOS自定义选择框的具体代码,供大家参考,具体内容如下 效果图: 工程图: 代码: RootViewController.h #import <UIKit/UIKit.h> #import "CYCustomMultiSelectPickerView.h" @interface RootViewController : UIViewController <CYCustomMultiSelectPickerViewDelegate> { CYC

  • 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/

  • jQuery模拟实现的select点击选择效果【附demo源码下载】

    jQuery模拟实现的select点击选择效果【附demo源码下载】

    本文实例讲述了jQuery模拟实现的select点击选择效果.分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修

  • Android 中TabLayout自定义选择背景滑块的实例代码

    Android 中TabLayout自定义选择背景滑块的实例代码

    TabLayout是Android 的Material Design包中的一个控件,可以和V4包中的ViewPager搭配产生一个联动的效果.这里我自定义了一个滑块能够跟随TabLayout进行滑动选择的SliderLayout.效果见下图(白色方框): 下面是SliderLayout的源码: import android.content.Context; import android.content.res.TypedArray; import android.graphics.drawabl

随机推荐