jQuery总结——选择器

前言

使用jQuery可以方便地处理HTML、事件、动画等。

可以兼容多浏览器。

使用

最简单快捷的方式，还是使用CDN。

通过<script>标签引入

<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>

基本概念

$

$符号，意味着jQuery变量。

window.jQuery === window.$

$.xxx

调用jQuery本身的属性和方法

$(xxx)

调用jQuery本身的一种选择器，用来返回jQuery对象

jQuery对象

1. 是原生DOM对象的封装；

2. jQuery对象和原生DOM对象不同；

3. jQuery对象包含了很多方法，方便的操作DOM元素

jQuery && DOM对象 相互转换

         $(DOM对象)   -->   jQuery对象

$(jQuery对象).get(0)  -->  DOM对象

    $(jQuery对象)[0]  -->  DOM对象

链式语法

同一个对象的多个方法，可以像链条一样执行下去。

如：

$('#pOne').test("Hello World");
$('#pOne').addClass("block");
$('#pOne').css("color","red");

可以写成下面的形式

$('#pOne')
    .test("Hello World")
    .addClass("block")
    .changecss("color","red")

$(document).ready(function(){…})

相当于window.onload，但比其性能好。

可以简写成

$(function( ){})

jQuery选择器

通过jQuery选择器筛选，返回的是jQuery对象，是一个类数组对象。

类数组对象 && 数组

前者具有长度，并且可以通过索引访问到对象。但是没有后者有的方法，除非手动添加。

给前者添加了一个元素，它的length不会增长。需要手动修改其length属性。

类数组对象 转换成 数组

通过调用 Array.prototype.slice.call() 方法

例子：

 var  a = { 0:1 , length : 1};

 a =  Array.prototype.slice.call(a);

基本选择器

ID选择器

$(‘#xxx’)

类选择器

$(‘.xxx’)

元素选择器

$( ‘标签名’ )

后代选择器

$('xxx > sss')     直接后代

$('xxx sss')       所有sss后代

属性选择器

  相等  $('标签名[属性 = "属性值"]')           =

  包含  $('标签名[属性 *= "属性值"]')         *=

  开头  $('标签名[属性 ^= "属性值"]')         ^=

  结尾  $('标签名[属性 $= "属性值"]')         $=

不等于  $('标签名[属性 != "属性值"]')         !=

包含对应属性  $('标签名[属性][属性]')

筛选器（都以：开头）

位置筛选器

:first     首个      

:last      最后一个   

:even      偶数索引（实际意义上的奇数）    

:odd       奇数索引（实际意义上的偶数）    

:lt(n)     索引小于（n是具体数字）

:gt(n)     索引大于（n是具体数字）

:eq(n)     索引等于（n是具体数字）

子元素筛选器（和CSS3一样）

1. Element:first-child

需要满足2个条件：

父元素中的首个子元素

恰好这个元素又是Element

2. Element:last-child

需要满足2个条件：

父元素中的最后一个子元素 

恰好这个元素又是Element

3. Element:first-of-type

选中父元素下的“第1个Element元素”，特定类型。

4. Element:last-of-type

选中父元素下的“最后一个Element元素”，特定类型。

5. Element:nth-child(N)

n是数子，从1开始

选中父元素下的“第N个Element子元素”。


需要满足2个条件：

父元素中的第N个子元素

恰好这个元素又是Element

扩展：

Element:nth-child(n)     选择全部

Element:nth-child(2n)    选择偶数

Element:nth-child(even)  偶数（实际意义上的偶数）

Element:nth-child(2n-1)  选择奇数

Element:nth-child(odd)   奇数（实际意义上的奇数）

表单筛选器

状态类

:checked     选中状态的表单元素

:disabled    禁用的表单元素

:enabled     可用表单元素

元素类

:button       button元素以及type="button"的元素

:checkbox     type="checkbox"的input元素

:file         type="file"的input元素

:image        type="img"的input元素

:input        input、textarea、select、button元素

:password     type="password"的input元素

:radio        type="radio"的input元素

:reset        type="reset"的元素

:selected     选中状态的，type="select"的元素

:submit       type="submit"(有些浏览器会把button也选中)

:text         type="text"以及没有设置type属性的input元素

内容筛选器

:empty         没有子元素的元素

:contains('')  包含指定文本的元素

:has(选择器)    包含选择器指定元素

:parent        含有子元素或者文本元素

层级筛选器

$("prev + next")        （同一父元素）选择紧跟在prev后面的next元素

$("prev ~ siblings")    （同一父元素）选择prev之后的所有兄弟元素

其他筛选器

:lang(languages)      lang属性为指定值(部分匹配即可)

:not(selector)        选择器指定元素以外的元素

:hidden               选中type="hidden"以及display:none 

:visable              :hidden以外的元素

:header               选中h1~h6

:animate              选中正在执行动画的元素

性能优化

1. 尽量使用css中有的选择器

2. 避免过度约束

3. 尽量以ID开头

4. 让选择器右边有更多特征

   例子

   $(‘ul.list  .item2’) 和 $(‘.list  li.item2’)
   

5. 避免使用全局选择器（多使用类、ID选择）

6. 缓存选择器的结果 (先把大类拿到)

   例子

       var ul = $(‘#list’)；
   
       ul.find(‘.item2’);