Jquery实战_读书笔记2 选择器

基本的CSS选择器
熟悉web开发的人员一定对css的选择功能相当的了解,通过css选择功能,我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制,使jQuery的元素选择能力易常强大。
a——选择所有<a>元素
#specialID——选择匹配id为specialID的元素
.specialClass——选择匹配拥有css类sepcialClass的元素
a#specialID.specialClass——选择匹配id为specialID、有用css类specialClass的<a>元素
p a.specialClass——匹配拥有css类specialClass、在<p>元素内的<a>元素
除了支持传统的css选择器,Jquery还支持CSS3选择功能。

子节点选择器
$("p > a") 选择元素<p> 的直接子节点的<a>元素,非直接子节点的<a>元素将不会被选择到

特性选择器
特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素
如我们需要做如下的选择:匹配所有指向本网站之外地址的链接,我们可以这样选择
$("a[href^=http://")  该选择器选择具有href属性,且href属性值以http://开始的链接元素
特性选择的语法是:
选择具有某特性(属性)的元素
form[method]
选择具有某特性,且属性值为指定值的元素
input[type=text]
选择匹配特性以特定字符开头的元素
div[title^=my]  ——选择匹配title特性值已my开头的所有div元素
选择匹配特性以特定字符结束的元素
a[href$=.pdf] ——选择引用了pdf文件的所有链接元素
其他
a[href*=jquery.com]选择引用jQuery网站的所有链接元素

过滤符
通过过滤符选择器可以在已选择的元素中过滤出需要的元素,上面的特性选择器也属于过滤符,另外还有“:”字符
如:
li:has(a)—— 选择匹配包含<a>元素的所有<li>元素

1. 基础过滤符:
:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象
:not(selector):匹配去除了not后面选择符中内容的项,not中的selector只能是过滤选择器,不能是查找选择器
:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个
:eq(index):匹配某一下表的单独某元素
:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素
:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6
:animated:匹配所有有动画效果的元素
2. 内容过滤符:
:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
:empty:匹配所有没有子元素的对象
:has(selector):匹配所有至少含有一个子选择符的对象
:parent:匹配元素,这些元素包含子元素(包括文本元素)
3. 可见性过滤符:
:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象
4. 子过滤符:
:nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征  nth-child过滤器,从1开始计数,这主要是与css标准兼容。
:first-child:匹配第一个子元素
:last-child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
:only-child:如果一个父元素只有一个子元素,就匹配这个子元素
5. 表单过滤符
:input  :匹配表单内input元素
:text  :匹配表单内input type为text的元素
:password  :匹配表单内input type为password的元素
:radio  :匹配表单内input type为radio的元素
:checkbox  :匹配表单内input type为checkbox的元素
:submit  :匹配表单内input type为submit的元素
:image  :匹配表单内image的元素
:reset  :匹配表单内input type为reset的元素 
:button  :匹配表单内input type为button的元素
:file  :匹配表单内input type为file的元素.
:hidden  :匹配表单内input type为hidden的元素或者hidden区域
:enabled  :匹配所有启用元素
:disabled  :匹配所有非启用元素
:checked  :匹配所有选中元素
:selected  :匹配所有下拉列表选中元素

查找选择器和筛选选择器的概念区别
为了能灵活的使用jQuery,认清查找选择器、筛选选择器之间的区别是非常重要的。筛选选择器,通过对元素应用更高的选择标准(如过滤特性或或其他相关值),缩小正在匹配的元素的集合;查找选择器,比如后代选择器(空格)、子节点选择器(>)以及兄弟节点选择器(+)等,则查找与已选择元素具有某种关系的其他元素,而不是通过把标准应用于已匹配元素来限制匹配范围。

(0)

相关推荐

  • Jquery实战_读书笔记2 选择器

    基本的CSS选择器熟悉web开发的人员一定对css的选择功能相当的了解,通过css选择功能,我们可以在css样式文件里轻松的将样式应用到选择的页面元素上.jQuery也正是采用了这样的机制,使jQuery的元素选择能力易常强大.a--选择所有<a>元素#specialID--选择匹配id为specialID的元素.specialClass--选择匹配拥有css类sepcialClass的元素a#specialID.specialClass--选择匹配id为specialID.有用css类spe

  • Jquery实战_读书笔记1—选择jQuery

    对比了多个javascript框架,不得不承认JQuery真的是个很优秀的框架.如果你还没有在你的框架中使用它,赶快扔掉那些臃肿.使用不方便的框架,这会给你的前端设计节约不少的代码. 为什么选择Jquery 我们在页面写javascript代码时,你可能会发现经常要遵循这样一种模式:选择一个元素或一组元素,然后以某种方式对其进行操作(如显示.隐藏元素,给元素添加css类,修改元素特性).而jQuery在这方面具有比其他框架更加优越的实现,使整个代码更加简洁. 页面和实现分离 就像css样式一样,

  • PHP读书笔记_运算符详解

    什么是运算符 什么是运算符?运算符是告诉PHP做相关运算的标识符号.例如,你需要计算123乘以456等于多少,这时候就需要一个符号,告诉服务器,你需要做乘法运算. PHP中的运算符有哪些?PHP运算符一般分为算术运算符.赋值运算符.比较运算符.三元运算符.逻辑运算符.字符串连接运算符.错误控制运算符. PHP中的算术运算符 算术运算符主要是用于进行算术运算的,例如:加法运算.减法运算.乘法运算.除法运算.在PHP中的常用的算术运算符对应下表: PHP中的赋值运算符 PHP的赋值运算符有两种,分别

  • PHP读书笔记整理_结构语句详解

    PHP结构语句顺序结构 顺序结构就像一条直线,按着顺序一直往下执行.我们编写的代码默认都是按照顺序结构执行的. 条件结构之if-else- 条件结构就像一个岔路口,可以向左走,也可以向右走.比如上洗手间,我们知道我们的性 别,这时候我们需要根据洗手间提供的条件,左边男洗手间,右边女洗手间,或者正好相反,其中性别就是这个条件结构的条件.再比如,现在的分数都流行使用 A.B.C来分级,假设考试成绩是93分,可以将其设置为等级A,考试成绩是87,可以将其设置为等级B,这里分数区间即为条件结构中的条件.

  • javascript框架设计读书笔记之种子模块

    1.命名空间: js里面的命名空间就是使用对象的属性来扩展的.比如,用户定义一个A对象,A对象下面有B属性和C属性,同时B属性和C属性又是对象.因此A={B:{},C:{}},这时用户就可以在B对象和C对象中定义一样的方法,属性了.因此B和C就属于不同的命名空间.我们调用B,C对象里面的方法,就可以通过A.B.like(),A.C.like()调用了.当然A属于window对象中的属性. 但是有一种情况,比如:boke.jsp页面引入了jquery.js以及prototype.js(他们都会在w

  • jQuery基础_入门必看知识点

    jQuery事件的因果关系是怎么样的一个格式: $("button").click(function(){ }) [正式接触jQuery] (1)jQuery的书写步骤: 1.引入jQuery文件: 2.新建一对script标签来书写jQuery: 3.用jQuery的方式进行代码分离: 4.按照jQuery用谁就选谁的原则去书写代码: [jQuery的css修改] alert()弹出一个警示框:弹出的信息可以写在小括号里面作为参数: css() 1.单属性获取,格式css("

  • MYSQL必知必会读书笔记第八章之使用通配符进行过滤

    mysql简介 MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. 使用通配符的技巧: 1.不要过度使用通配符.如果其他操作符能达到通配符相同的效果,应该优先的使用其他操作符 2.在确实需要使用通配符时,除非绝对有必要,否则不要把它们用在搜索模式的开始处.把通配符置于搜索模式的开始处,搜索起来是最慢的. 3.仔细注意通配符的位置,如果放错了地方,可能不会返回想要的结果 注意事项: 区分大小写:

  • InnoDb 体系架构和特性详解 (Innodb存储引擎读书笔记总结)

    后台线程 •Master Thread 核心后台线程,主要负责将缓冲池的数据异步刷新到磁盘.例如脏页的刷新,插入缓冲的合并,undo 页的回收等. 每秒一次的操作: 1.日志缓冲刷新到磁盘,即使该事务还没有提交.该操作总是会发生,这个就是为了再大的事务,提交时间都很短. 2.当IO压力很小时(1s内发生的IO次数小于5% innodb_io_capacity)合并5% innodb_io_capacity 的插入缓冲. 3.当脏页比例大于 innodb_max_dirty_pages_cnt,

  • MYSQL必知必会读书笔记第十和十一章之使用函数处理数据

     mysql简介 MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. 拼接字段 存储在数据库表中的数据一般不是应用程序所需要的格式.我们需要直接从数据库中检索出转换.计算或格式化过的数据:而不是检索出数据,然后再在客户机应用程序或报告程序中重新格式化. 计算字段(字段 = 列,不过数据库列一般称为列,而字段通常用于计算字段中)并不实际存在于数据库表中,计算字段是运行时在select语句内创建的

  • MYSQL必知必会读书笔记第六章之过滤数据

    mysql简介 MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进行数据库管理. where子句的位置,在同时使用ORDER BY 和WHERE子句时应该让ORDER BY 位于where之后,否则会产生错误. 1.不匹配检查 复制代码 代码如下: SELECT vend_id FROM products where vend_id <>1003 等同于 复制代码 代码如下: SELECT vend_id

随机推荐