• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery获取css中的选择器(实例讲解)

jquery获取css中的选择器(实例讲解)

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jquery,css选择器等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

开始写之前先复习一下元素和节点的区别:

元素是W3C文档对象模型(DOM)当中使用最广泛的节点之一。

元素拥有关联的“属性”。

XmlElement类拥有许多方法来访问它的“属性”(GetAttribute, SetAttribute, RemoveAttribute, GetAttributeNode, 等等)。

你也可以使用“Attributes”属性来返回一个支持“名字”或者“序号”访问的“XML属性集”。

那么,从XmlElement类的解释来看,我们很容易就知道XmlNode和XmlElement类的区别了:

XmlElement类是只拥有“属性”的一个节点,而XmlNode则是不仅拥有“属性”,还拥有“子节点”的一个节点。

所以,我们在使用它们的时候,如果你需要获取或者设置节点中的innerText或者innerXml,那么你就需要用XmlNode;而如果你需要获取或者设置节点本身的属性(参数)的时候,你就需要用XmlElement,当然,你也可以用(XmlElement)对XmlNode进行转换得到。

下面开始进入正题

在javascript中,除了对id的选择器比较好取一些,其他的都不是很好取,jquery在这一块要比它优秀多了,提供了很多的获取方法主要包括

1、基础选择器(主要包括标签选择器,id选择器,类选择器,通用选择器,组选择器)

$("#divId") 获取ID为divId的元素
 $("a") 获取所有<a>元素

$(".bgRed") 获取所用CSS类为bgRed的元素

$("*")获取页面所有元素

$("#divId, a, .bgRed")获取三个满足条件的选择器

2、层级选择器(主要包括子元素选择器、后代元素选择器、紧邻同辈元素选择器、相邻同辈元素选择器)

2.1   子元素选择器>  ===============选择儿子元素

2.2   后代选择器 直接用空格表示 不仅包括儿子还包括孙子........===============选择后代元素

4、基本过滤器主要包括

名称 说明 举例
:first 匹配找到的第一个元素 查找表格的第一行:$("tr:first")
:last 匹配找到的最后一个元素 查找表格的最后一行:$("tr:last")
:not(selector) 去除所有与给定选择器匹配的元素 查找所有未选中的 input 元素: $("input:not(:checked)")
:even 匹配所有索引值为偶数的元素,从 0 开始计数 查找表格的1、3、5...行:$("tr:even")
:odd 匹配所有索引值为奇数的元素,从 0 开始计数 查找表格的2、4、6行:$("tr:odd")
:eq(index) 匹配一个给定索引值的元素
注:index从 0 开始计数
查找第二行:$("tr:eq(1)")
:gt(index) 匹配所有大于给定索引值的元素
注:index从 0 开始计数
查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)")
:lt(index) 选择结果集中索引小于 N 的 elements
注:index从 0 开始计数
查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)")
:header 选择所有h1,h2,p一类的header标签. 给页面内所有标题加上背景色: $(":header").css("background", "#EEE");
:animated 匹配所有正在执行动画效果的元素 只有对不在执行动画效果的元素执行一个动画特效:

$("#run").click(function(){
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});


5、内容过滤器(主节点的子节点为文本节点)

名称 说明 举例
:contains(text) 匹配包含给定文本的元素 查找所有包含 "John" 的 div 元素:$("div:contains('John')")
:empty 匹配所有不包含子元素或者文本的空元素 查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector) 匹配含有选择器所匹配的元素的元素 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");
:parent 匹配含有子元素或者文本的元素 查找所有含有子元素或者文本的 td 元素:$("td:parent")

6、可见性过滤器  Visibility Filters

:hidden

:visible

7、属性过滤器 Attribute Filters

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jQuery原理系列-css选择器的简单实现
  • 使用jQuery给input标签设置默认值
  • Jquery效果大全之制作电脑健康体检得分特效附源码下载
  • jQuery提交多个表单的小例子
  • jQuery图片加载显示loading效果
  • BootStrap 可编辑表Table格
  • jquery 的 $("#id").html() 无内容的解决方法
  • 使用jquery实现select添加实现后台权限添加的效果
  • JQuery模板插件 jquery.tmpl 动态ajax扩展
  • jQuery学习笔记之jQuery中的$

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery实现标签支持图文排列带上下箭头按钮的选项卡
    • 使用jquery hover事件实现表格的隔行换色功能示例
    • 基于jQuery的让非HTML5浏览器支持placeholder属性的代码
    • jQuery使用deferreds串行多个ajax请求
    • 使用jQuery将多条数据插入模态框的实现代码
    • jQuery Validate表单验证插件 添加class属性形式的校验
    • JQuery从头学起第二讲
    • 原生JS和jQuery版实现文件上传功能
    • jQuery过滤选择器经典应用
    • JQuery动画animate的stop方法使用详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有

名称 说明 举例
[attribute] 匹配包含给定属性的元素 查找所有含有 id 属性的 div 元素:
$("div[id]")
[attribute=value] 匹配给定的属性是某个特定值的元素 查找所有 name 属性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);
[attribute!=value] 匹配给定的属性是不包含某个特定值的元素 查找所有 name 属性不是 newsletter 的 input 元素:
$("input[name!='newsletter']").attr("checked", true);
[attribute^=value] 匹配给定的属性是以某些值开始的元素 $("input[name^='news']")
[attribute$=value] 匹配给定的属性是以某些值结尾的元素 查找所有 name 以 'letter' 结尾的 input 元素:
$("input[name$='letter']")
[attribute*=value]

匹配给定的属性是以包含某些值的元素

查找所有 name 包含 'man' 的 input 元素:
$("input[name*='man']")

[attributeFilter1][attributeFilter2][attributeFilterN] 复合属性选择器,需要同时满足多个条件时使用。 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的:
$("input[id][name$='man']")