【深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器】的更多相关文章

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容 简单属性选择器 [attribute] [attribute]选择器选择拥有该属性的元素,返回集合元素 //选择拥有title属性的所有元素 $('[title]') //选择拥有title属性的所有span元素 $('span[title]') //…

深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

× 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index)') $(':eq(index)')选择器选择索引等于index的元素(index从0开始),返回单个元素 索引 [注意]索引选择器的索引和子元素选择器的索引有明显的不同 [1]索引选择器索引从0开始,而子元素选择器索引从1开始 [2]索引选择器的索引是指定元素的索引,而子元素选择器的索引是所有子元…

深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态 前面的话 过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当前获得焦点的元素 <div> <button>btn1</button> <button>btn2</button> <button>btn3</button> </div> <script> docu…

深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

× 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上 :contains(text) :contains(text)选择器选择含有文本内容为'text'的元素,返回集合元素 //返回所有文本内容包含'test'的元素 $(':contains("test")') //返回所有文本内容包含'test…

深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器

× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的jQuery>一书中,nth-of-type()选择器参照CSS中的nth-of-type选择器,于1.9版本新增,本文将详细介绍该内容 通用形式 :nth-of-type() 个人认为,:nth-of-type()选择器不应该归类于子元素选择器,也不完全等同索引选择器,因为其索引是指特定元素的索引,但…

深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为出彩的一部分.以CSS结构伪类选择器为基础,jQuery过滤选择器增加了很多扩展功能.本文先从与CSS选择器最相近的子元素过滤选择器开始说起 通用形式 $(':nth-child(index)') $(':nth-child(index)')选择每个父元素的第index个子元素(index从1算起)…

jQuery选择器之属性选择器Demo

测试代码: 06-属性选择器.html <!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"> <head> <meta http-…

html 选择器之属性选择器

属性选择器的主要作用个人的理解就是对带有指定属性的元素设置css样式. 使用css3的属性选择器,可以指定元素的某个属性,也可以指定某个属性和这个属性所对应的值. css3的属性选择器主要包括下面几种 E[attr]:只使用属性名,但没有确定任何属性值: E[attr="value"]:指定属性名,并指定了该属性的属性值: E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号…

晨读笔记：CSS3选择器之属性选择器

一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^="h_"]{ color:rted; } 2.E[foo$="bar"]:选取属性以bar结尾的元素,如: //所有以名称_h结尾的div的边框宽度为2pxdiv[name$="h_"]{ border:2px; } 3.E[foo*="bar&quo…

CSS3选择器之属性选择器

一.属性选择器 1.E[foo^="bar"]:该属性选择器描述的是选择属性以bar开头的元素,如: //所有以名称g_开头的div的字体颜色为红色div[name^="h_"]{ color:rted; } 2.E[foo$="bar"]:选取属性以bar结尾的元素,如: //所有以名称_h结尾的div的边框宽度为2pxdiv[name$="h_"]{ border:2px; } 3.E[foo*="bar&quo…