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中主要用来区分伪元素和伪类。目前来说,这两种方式在伪元素上都是被接受的。