`
oo-java
  • 浏览: 3500 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

css选择器

阅读更多

 

         jQuery的选择器就是基于css选择器的规范的,所以掌握了css选择器,jQuery的选择器就搞定了啦。其实document对象也支持了css选择如document.querySelector,但并不是所有浏览器都支持的。

 

一  上下文

 

       选择必须得有上下文,不然选择就无从谈起。原生的dom选择操作有选择函数的调用者作为选择的上下文。如:

//上下文是文档对象
var oForm = document.getElementById("form1");
//上下文oForm元素
var oInputs = oForm.getElementsByTagName("input");

 

       在使用jQuery中上下文可以是作为待查找的 DOM 元素集、文档或 jQuery 对象,一般都是忽略这个参数。默认为document.

$("#radio_id1","#div_id2");
$("#radio_id1",document);
$("#radio_id1",$("#div_id2"));
$("#radio_id1");

       jQuery的每次选择都作为下次任何操作的上下文,而它的上下文就是一些匹配结果的DOM集合。以后的操作都是针对这个上下文。需要清楚的是jQuery返回的还是jQuery对象而不是DOM对象。

 

二  4种元素 选择器

 

       4种元素选择器是最基本的选择器,如下:

序号 选择器 含义
1. * 通用元素选择器,匹配任何元素
2. E 标签选择器,匹配所有使用E标签的元素
3. .info class选择器,匹配所有class属性中包含info的元素
4. #footer id选择器,匹配所有id属性等于footer的元素

     id选择器返回的永远只有一个元素。

 

三  层次 选择器

 

        正是引入了层次选择器才使选择变的如此简单。层次选择器将上次选择的结果作为上下文根据用户给出的层次关系进行进一步筛选。关系如下:

1. 祖孙关系

2. 父子关系

3. 之后兄弟关系

4. 并列关系

//祖孙关系,匹配所有div下面的id为form1的元素
$("div #form1");
//之后兄弟关系, 匹配所有紧随id为div_id1的元素之后的同级并且标签tag为input的元素
$("#div_id1 + table");
//父子关系,只匹配id为div_id1的元素的儿子元素中的input
$("#div_id1 > input");
//并列关系
$("#div_id1 , #div_id2");
//混合写法,每次选择作为下次的上下文
$("#div_id1 , #div_id2 form > input");

 

三 属性筛选器

 

      上面都是通过基本选择器进行选择,而属性可以对上下文进行筛选。有如下几种形式:

//具有title属性
$("input[title]");
//title属性的值为123
$("input[title='123']");
//title属性的值不为123,没有title属性的也算
$("input[title!='123']");
//以123开头
$("input[title^='123']");
//以123结尾
$("input[title$='123']");
//包含123
$("input[title*='123']");

 

四   :筛选器

 

      :筛选器类似于属性筛选器,有些也可以用属性筛选器代替。有些更像一个函数操作比如位置筛选。

 

有些属性可以取true,false值,这样一般就可以用:筛选器了

$("option:selected");
$("input:disabled");
$(".radiocls:checked");

 

     还有些位置选择器,这些操作更像个函数筛选器,位置从0开始计算

//第一个tr			
$("tr:first");
//最后一个tr			
$("tr:last");
//第2个tr
$("tr:eq(1)");
//第3个tr之前的tr
$("tr:lt(2)");
//第3个tr之后的tr
$("tr:gt(2)");
//奇数
$("tr:odd");
//偶数
$("tr:even");
 

当然还有一些选择规则啦,但是常用的也就这么几个了。附一个学习时实现上诉功能的firefox基本可以用的

 

分享到:
评论

相关推荐

    CSS选择器.pdf

    在CSS选择器的体系中,存在多种不同类型的选择器,每种都有其特定的用途和使用场景。 首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中...

    react-React组件的css选择器

    在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...

    CSS选择器-.pdf

    此外,CSS 还提供了分组选择器,可以将多个选择器分组在一起,并应用同样的样式。例如: ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起,对此...

    scrapy爬虫之CSS选择器(比前面两个更全)

    相比XPath或其他方法,CSS选择器往往更简洁、直观,对于前端开发者来说尤其友好。 在Scrapy中,`Selector`类提供了对文档进行解析和提取数据的功能,而CSS选择器就是其主要的数据定位手段。使用CSS选择器,你可以像...

    css选择器的应用

    ### CSS选择器的应用 #### CSS概述与引入方式 CSS(层叠样式表)是一种用于定义HTML文档中元素样式的语言。它允许开发者控制网页布局、颜色、字体等外观特性,从而增强网页的表现力。CSS可以通过多种方式引入: -...

    树使用css选择器优化代码(IE7+,firefox3,opera9,chrom下可用)

    在前端开发中,CSS选择器是用于选取网页元素并应用样式的重要工具。高效的CSS选择器能够提高页面渲染速度,优化用户体验,特别是在处理大型或者复杂的页面结构时显得尤为重要。本篇文章将探讨如何使用CSS选择器来...

    前端必须掌握的css选择器方法

    下面是前端开发中经常使用的 30 个 CSS3 选择器,包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...

    CSS选择器详细介绍

    常用选择器是 CSS 选择器中最基本的选择器,包括三种类型:ID 选择器、类选择器和标签选择器。 * ID 选择器:根据元素的 ID 来选择元素,例如 `#demoDiv{color:#FF0000;}`。在 HTML 中,元素可以定义一个 ID 属性,...

    CSS选择器的介绍和使用.pdf

    CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。

    CSS选择器和jQuery选择器

    ### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中,选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作,选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...

    前端css选择器练习diner.zip

    "前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包,名为"css-diner"。 在"css-diner"这个练习中,你可以深入理解并掌握各种CSS选择器的用法,从而提升你的前端开发技能。以下是一些关于CSS选择...

    css选择器 的概要介绍与分析

    CSS选择器的灵活性和多样性是CSS强大之处的关键因素之一。下面是一些关于CSS选择器的资源描述。 ### CSS选择器资源描述 #### 1. **官方文档与教程** - **MDN Web Docs**:Mozilla提供的MDN Web Docs是学习CSS选择...

    scrapy爬虫下的CSS选择器使用

    在这个主题“Scrapy爬虫下的CSS选择器使用”中,我们将深入探讨如何利用CSS选择器在Scrapy中提取网页数据。 首先,CSS(Cascading Style Sheets)选择器是用于选取HTML或XML文档中元素的工具,其在网页设计中广泛...

    让ie兼容css选择器

    标题"让ie兼容css选择器"指的是通过引入外部JavaScript文件,如ie7.js、ie8.js和ie9.js,来增强这些旧版IE浏览器对CSS选择器的支持,使它们能够理解和应用更先进的CSS规则。这些JavaScript库通常会模拟缺失的功能,...

    四大类CSS选择器的使用说明

    ### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型:标签(元素)选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**:用于选取文档中的特定HTML标签。例如: `...

    css选择器介绍

    本文将深入探讨CSS选择器的种类、用法及其在实际开发中的应用。** 首先,我们要了解CSS选择器的基本分类: 1. **类型选择器**:基于元素的标签名进行选择,如`h1`,`p`等。 2. **类选择器**:使用`.`前缀,匹配...

    CSS选择器.docx

    以下是对CSS选择器的详细介绍: 一、基本选择器 通用选择器(*): 匹配HTML或XML文档中的所有元素。 例如:* { margin: 0; padding: 0; } 将所有元素的外边距和内边距设置为0。 元素(标签)选择器(E): 通过...

Global site tag (gtag.js) - Google Analytics