jQuery与CSS3的选择器

    jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结,方便对比使用。

      注:本文以jQuery1.9.1版本和CSS3为例进行说明,CSS在选择器方面存在 CSS 版本适应问题,请自行前往http://www.w3school.com.cn/cssref/css_selectors.asp 查看各选择器的 CSS 版本适应情况。

1 jQuery的版本

    jQuery 分 3 个系列版本 1.x 、 2.x与3.x,主要的区别:
        a、2.x与3.x版本不再兼容IE6、7、8 
        b、2.x与3.x版本为移动端做了优化
        c、2.x与3.x版本由于减少了一些代码,比 jQuery 1.x 更小且更快。(引用自:http://www.imooc.com/code/8066 涉及3.x的内容为本人添加)


    1.x的最新版本是1.12.4
    2.x的最新版本是2.2.4

    1.12 and 2.2 分支只会维护现有功能、不会再引入新功能,未来主流分支是3.x,目前最新版本是3.1.0 (引用自:http://blog.jquery.com/)

2 jQuery对象与DOM对象

类型 jQuery对象 DOM对象
定义 jQuery方法包装后的对象 DOM对象就是一个单独的DOM元素
产生 通过jQuery方法——即$()——包装后的对象,即是jQuery对象 通过标准JavaScript提供的原生方法得到的DOM元素就是DOM对象
相同点 都可以操作DOM元素
两者关系 jQuery对象是一个类数组的对象,这个对象里面其实是包含了DOM对象的信息的,然后封装了很多jQuery的操作方法

3 jQuery对象与DOM对象的转换

类型 jQuery对象转换为DOM对象 DOM对象转换为jQuery对象
方法一 $('div')[0].style.color = 'red' $(document.getElementsByTagName('div'))
方法二 $('div').get(0).style.color = 'red'
含义 利用数组下标或取到jQuery对象中的DOM对象(jQuery对象转化成DOM对象方法一,因为jQuery 对象是一个类数组结构,可以通过数组下标找到第N个子元素,这些子元素都是DOM对象);通过get方法获取到jQuery对象中的DOM对象转化成(jQuery对象转化成DOM对象二,get方法其实也是利用下标实现的) $()函数的参数如果是一个DOM对象,该方法就会把这个DOM对象给转换成一个新的jQuery对象

3 基本选择器

基本选择器包括:标签选择器、ID选择器、类选择器、通用选择器、群组选择器五类

类型 CSS JQuery 含义
标签选择器 div{} $(‘div’) 选择所有div元素
ID选择器 di{} $(‘#di’) 选择id=di的元素
类选择器 .di{} $(‘.di’) 选择所有class=di的元素
通用选择器 *{} $(‘*’) 选择所有元素
群组选择器 E,F{} $(‘E,F’) 选择所有E和F类型的元素



CSS代码示例请见:http://www.w3cplus.com/css3/basic-selectors

4 层级选择器

层级选择器用于处理节点与节点之间存在的父子、兄弟、祖孙关系

类型 CSS JQuery 含义
直接子元素选择器 parent>child $('parent>child') 选择parent元素下的第一级子元素child
后代元素选择器(空格) ancestor(空格)descendant $('ancestor descendant') 选择ancestor元素下的所有子孙元素descendant
直接相邻兄弟元素选择器 prev+next $('prev+next') 选择紧邻prev选择器之后的兄弟元素next
一般相邻元素选择器 prev~siblings $('prev~siblings') 选择prev选择器之后的所有兄弟元素
代码示例 .left > div{background-color: #ccc;} $('.left > div').css("backgroundColor", "#CCC"); 将.left 下的第一级子元素背景色设置为#CCC



示例代码如下:

 <style>
    .prev + div{
            background: #ccc;
        }
 </style>
 <body>
     <span class="prev">选择器span元素</span>
     <div>prev后第一个兄弟节点div</div>
     <script type="text/javascript">
            //一般相邻选择器,选取prev后面的所有的div兄弟节点
            $('.prev ~ div').css("border", "3px groove blue");
    </script>
</body>

5 属性选择器

用于根据属性筛选元素

类型 CSS JQuery 含义
E[att] E[att] $("E[att]") 选择E元素集合中 带有att属性的E元素
E[att=val] E[att=val] $("E[att=val]") 选择E元素集合中,属性att=val的E元素
E[att|=val] E[att|=val] $("E[att|=val]") 选择E元素集合中,属性att等于val或以val-为前缀的E元素
E[att~=val] E[att~=val] $("E[att~=val]") 选择E元素集合中,属性att等于val或以空格分隔的属性值中包含val的E元素
E[att^=val] E[att^=val] $('E[att^=val]') 选择E元素集合中,属性att的属性值是以val开头的E元素
E[att$=val] E[att$=val] $('E[att$=val]') 选择E元素集合中,属性att的属性值是以val结尾的E元素,注:这个比较区别大小写
E[att*=val] E[att*=val] $('E[att*=val]') 选择E元素集合中,属性att的属性值包含val字符串的E元素,如avalb即满足条件
E[att!=val] 无此用法 $("E[att!=val]") 选择E元素集合中,不存在属性att,或者属性att的属性值不等于val的E元素



CSS示例代码请见:http://www.w3cplus.com/css3/attribute-selectors

JQuery示例代码如下:

<body>
    <a href="xxx.pdf">我链接的是PDF文件</a>
    <a href="#" class="icon">我类名是icon</a>
    <a href="#" title="我的title是more">我的title是more</a>
    <script type="text/javascript">
    $(function(){
        $('a[class^=icon]').css("backgroundColor","green")
    })
        </script>
</body>

6 筛选选择器

伪类选择器/筛选选择器:选择html不存在的标签的选择器,或选择标签某种状态的选择器。均以冒号开头,冒号前须有具体元素(如没有元素则表示选择全部元素)。

筛选元素本身

第一组

类型 CSS JQuery 含义
:root :root{} $(“:root”) 选择所有元素的根元素,即<html>元素
:not E:not(p){} $(“E:not(p)”) 选择E元素(集合)中除了p之外的E元素
:first 无此用法 $(‘E:first’) 选择E元素(集合)中的第一个E元素
:last 无此用法 $(‘E:last’) 选择E元素(集合)中的最后一个E元素
:even 无此用法 $(‘E:even’) 选择E元素(集合)中的索引为偶数的E元素,n从0开始
:odd 无此用法 $(‘E:odd’) 选择E元素(集合)中的索引为奇数的E元素,n从0开始
:eq(n) 无此用法 $(‘E:eq(n)’) 选择E元素(集合)中的索引等于n的E元素,n从0开始
:lt(n) 无此用法 $(“E:lt(n)”) 选择E元素(集合)中索引小于n的E元素,n从0开始
:gt(n) 无此用法 $(“E:gt(n)”) 选择E元素(集合)中索引大于n的E元素,n从0开始
:header 无此用法 $(“:header”) 选择所有标题元素,像h1、h2、h3等
:animated 无此用法 $(“E:animated”) 选择E元素(集合)中,正在执行动画效果的E元素
:target E:target 无此用法 匹配页面的url的标志符(如href=#E)指定的id=E的元素


第二组

类型 CSS JQuery 含义
:first-child E:first-child $('E:first-child') 选择E元素集合中的那些E元素——当它们为其父元素中的第一个直接子元素
:last-child E:last-child $('E:last-child') 选择E元素集合中的那些E元素——当它们为其父元素中的最后一个直接子元素
:only-child E:only-child $('E:only-child') 选择E元素集合中的那些E元素——当它们为其父元素中的唯一一个直接子元素
:nth-child(n) E:nth-child(n) $('E:nth-child(n)') 选择E元素集合的那些E元素——当它们为其父级元素中的第n个直接子元素,n从1开始
:first-of-type E:first-of-type $('E:first-of-type') 选择E元素集合中那些E元素——当它们为其父元素中的第一个该类型的元素
:last-of-type E:last-of-type $('E:last-of-type') 选择E元素集合中那些E元素——当它们为其父元素中的最后一个该类型的元素
:only-of-type E:only-of-type $('E:only-of-type') 选择E元素集合中那些E元素——当它们为其父元素中的唯一一个该类型的元素
:nth-of-type(n) E:nth-of-type(n) $('E:nth-of-type(n)') 选择E元素集合中那些E元素——当它们为其父元素中的第n个该类型的元素,n从1开始


注 :first只匹配一个单独的元素,但:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1);last同理。

      其中,:not与:empty的示例代码如下:

<script type="text/javascript">
$(function(){                          $("div:not([class=demo])").css("backgroundColor","blue");
        $("div:empty").css("backgroundColor","blue");
    })
</script>
<div class="demo">
    这是一个div
    <!-- 空div -->
    <div></div>
</div>

      :target的示例代码如下:

<style>
    #brand:target p {
      background: orange;
      color: #fff;
    }
</style>
<div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>content for Brand</p>
</div>
<!-- 
1、触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码a元素中href="#brand"的#brand
2、:target就是用来匹配id=“brand”的元素,上面代码中是那个div元素。
 -->

根据可见性筛选元素

类型 CSS JQuery 含义
:visible 无此用法 $(‘E:visible’) 选择E元素集合中,可见的E元素
:hidden 无此用法 $(‘E:hidden’) 选择E元素集合中,不可见的E元素


jquery认为不可见的元素包括:设置了 display:none; 与 元素的宽度和高度都显式设置为0 的元素;

虽然如下代码也可以隐藏元素,但jquery中认为其是可见的。这是因为jquery中有一原则:

      如元素占据文档中一定的空间,则元素被认为是可见的。

所以元素的visibility: hidden 或 opacity: 0 被jquery认为是可见的,因为他们仍然占用空间布局。

 style="visibility:hidden;opacity:0";  

根据内容筛选元素

类型 CSS JQuery 含义
:empty E:empty $(“E:empty”) 选择E元素集合中 没有任何文本内容和子元素的E元素,哪怕是一个空格也没有
:parent E:parent $(“E:parent) 选择E元素集合中 包含任何文本内容或子元素的E元素
:contains 无此用法 $(‘E:contains(text)’) 选择E元素集合中 文本内容包含参数”text”的E元素,如果包含的文本在E元素的子孙元素中,该E元素也会被选中
:has 无此用法 $(‘E:has(selector)’) 选择E元素集合中 包含”selector”子孙元素的E元素


注::contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素

7 表单筛选选择器

筛选某类型的表单元素

类型 CSS JQuery 含义
:input 无此用法 $(':input') 选中所有 input, textarea, select 和 button 元素
:text 无此用法 $('E:text') 选择E元素集合中,其type属性等于text的E元素,等价于$('E[type=text]')
:password 无此用法 $('E:password') 选择E元素集合中,其type属性等于password的E元素,等价于$('E[type=password]')
:radio 无此用法 $('E:radio') 选择E元素集合中,其type属性等于radio(单选按钮)的E元素,等价于$('E[type=radio]')
:checkbox 无此用法 $('E:checkbox') 选择E元素集合中,其type属性等于checkbox(复选按钮)的E元素,等价于$('E[type=checkbox]')
:submit 无此用法 $('E:submit') 选择E元素集合中,其type属性等于submit(提交按钮)的E元素,等价于$('E[type=submit]')
:image 无此用法 $('E:image') 选择E元素集合中,其type属性等于image(图像按钮)的E元素,等价于$('E[type=image]')
:button 无此用法 $('E:button') 选择E元素集合中,其type属性等于button(按钮)的E元素,等价于$('E[type=button]')
:reset 无此用法 $('E:reset') 选择E元素集合中,其type属性等于reset(重置按钮)的E元素,等价于$('E[type=reset]')
:file 无此用法 $('E:file') 选择E元素集合中,其type属性等于file(文件按钮)的E元素,等价于$('E[type=file]')


注:除了input筛选选择器(即:input),几乎每个表单筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

示例代码如下:

<script type="text/javascript">
        $('input:text').css("backgroundColor", "#A2CD5A");
        $(':submit').css("backgroundColor", "#A2CD5A");
</script>

筛选某属性的表单元素

类型 CSS JQuery 含义
:enabled E:enabled $('E:enabled') 选择E元素集合中,被启用(即未被禁用)的E元素,等价于$('E[enabled=true]')
:disabled E:disabled $('E:disabled') 选择E元素集合中,被禁用的E元素,等价于$('E[disabled=disabled]')
:checked E:checked $('E:checked') 选择E元素集合中,被勾选中(单选框,复选框)的E元素,等价于$('E[checked]')
:selected 无此用法 $('option:selected') 选择option元素集合中,有selected属性被选中的option元素,等价于$('option[selected]')



示例代码如下:

<form>
        <input type="text" value="设置disabled" disabled="disabled" />
        <select name="garden" multiple="multiple">
            <option>imooc</option>
            <option selected="selected">慕课网</option>
            <option>aaron</option>
            <option selected="selected">博客园</option>
        </select>
    </form>
    <script type="text/javascript">
        $('input:disabled').css("border", "2px groove blue");
        $('option:selected').css("border", "2px groove blue");
    </script>

8 伪元素

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after;在CSS3中对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”。

两个“::”和一个“:”在css3中主要用来区分伪元素和伪类。

到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而已。

上述引用自:http://www.w3cplus.com/css3/pseudo-class-selector
关于伪元素的更多内容也请查看此博客

类型 CSS JQuery 含义
::selection E::selection 无此用法 修改E元素中当用鼠标选择文本时的文本的样式
::first-line E::first-line 无此用法 选择E元素中的第一行
::first-letter E::first-letter 无此用法 选择E元素中的第一个字母
::before E::before 无此用法 在E元素的前面插入内容,多用于清除浮动
::after E::after 无此用法 在E元素的后面插入内容,多用于清除浮动

总结

jQuery与CSS3的选择器选中的永远都是“紧挨冒号前的元素”,“紧挨冒号后的伪选择器” 用于补充说明选中元素的特点;

1、读懂jQuery与CSS3的选择器的方法:

1、先找冒号
2、看紧挨冒号前的元素,空则表示所有元素
3、再看紧挨冒号后的伪选择器字面含义
4、其他选择器之间一般都是层级关系

综合起来前3步就是该选择器的含义:
————选中的永远是“紧挨冒号前的元素”; 
————“紧挨冒号后的伪选择器” 用于补充说明选中元素的特点;

如E:first的含义:        选中E元素(它是第一个E元素),只会选中一个E元素;
如E:first-child的含义:   选中E元素(它是[其父元素下的]第一个直接子元素) ,可能会选中多个E元素;
如E:nth-child(n)的含义: 选中E元素(它是[其父元素下的]第n个直接子元素) 
如E:nth-of-type(n)的含义: 选中E元素(它是[其父元素下的]第n个同类型的直接子元素) 

2、使用CSS隐藏一个元素的七种方法

    CSS display的值是none。
    type="hidden"的表单元素。
    宽度和高度都显式设置为0。
    一个祖先元素是隐藏的,该元素是不会在页面上显示
    CSS visibility的值是hidden
    CSS opacity的指是0   

3、两个“::”和一个“:”在css3中主要用来区分伪元素和伪类。目前来说,这两种方式在伪元素上都是被接受的。

参考文档

http://www.imooc.com/learn/9
http://www.imooc.com/learn/33
http://www.imooc.com/learn/418
http://www.w3school.com.cn/cssref/css_selectors.asp

阅读更多
个人分类: jquery
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭