jquery 选择元素-蒲公英云

理解DOM

DOM(Document Object Model) ，它是JavaScript与网页之间的接口，通俗来讲DOM就是提供给JavaScript来修改页面上的树型标签结构。

css选择符

以下代码为例子:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入JQuery bootstrap.js-->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <style type="text/css"> .horizontal { float: left; list-style: none; margin: 10px; } .sub-level { background: #ccc; } </style>
</head>
<body>
<ul id="selected-plays"> 
     <li>Comedies 
         <ul> 
             <li><a href="/asyoulikeit/">As You Like It</a></li> 
             <li>All's Well That Ends Well</li> 
             <li>A Midsummer Night's Dream</li> 
             <li>Twelfth Night</li> 
         </ul> 
     </li> 
     <li>Tragedies 
         <ul> 
             <li><a href="hamlet.pdf">Hamlet</a></li> 
             <li>Macbeth</li> 
             <li>Romeo and Juliet</li> 
         </ul> 
     </li> 
     <li>Histories 
         <ul> 
             <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) 
             <ul> 
                 <li>Part I</li> 
                 <li>Part II</li> 
             </ul> 
             <li><a href="http://www.shakespeare.co.uk/henryv.htm"> 
             Henry V</a></li> 
             <li>Richard II</li> 
         </ul> 
     </li> 
</ul> 
<script> $(document).ready(function(){ $('#selected-plays > li').addClass('horizontal'); $('#selected-plays li:not(.horizontal)').addClass('sub-level'); }); </script>
</body>
</html>

其中$(‘#selected-plays > li’).addClass(‘horizontal’); 选择id为selected-plays的标签 > li 表示其下面的子标签li，则选择了3个li，将horizontal添加为class.

$(‘#selected-plays li:not(.horizontal)’) 表示选取idselected-plays 下的li没有.horizontal的标签, 他会深入进去找

属性选择器

匹配标签的属性，我们可以通过标签的属性来选择想要的标签。

先新增3个a标签的样式

a.black{ background: black; }
        a.blue{ background: blue; }
        a.yellow{ background: yellow; }

选择下面标签，添加black
<a href="mailto:henryiv@king.co.uk">
如下就可以选择到，属性选择的格式就是 $(‘标签名[属性名=”xxx”]’)
$('a[href="mailto:henryiv@king.co.uk"]').addClass('black');

假如页面上有多个以mailto开头的 href都要用到black属性，这样一个个选择很麻烦，但是属性选择器是支持正则匹配的。如下^表示以mailto:开头

$('a[href^="mailto:"]').addClass('black');

既然有^选择以mailto:开头的元素那么也有$选择以什么结尾的匹配规则, 如下选取所有以.pdf结尾的href属性标签.

$('a[href$=".pdf"]').addClass('yellow');

还有一个*号，表示通配符，如下选择href以http开头并且是含有henryv.htm的a标签

$('a[href^="http://"][href*="henryv.htm"]').addClass('blue');

自定义选择符

eq 按下标选择
自定义选择符一般跟在一个CSS选择符后面。可以通过选取的基础上再次选取。
如下有两个span标签。
```
sfef
```
```
bbb
```
通过span.horizontal选择这两个span，在用:eq(1)定位到第二span。这里只选择了一个结点

$(‘span.horizontal:eq(1)’).addClass(‘spanSize’);

表格隔行选取
odd 和 even
上面的:eq可以自定义选择第几个，还有:odd 和 :even很有用处。
下面表格没有任何样式，很单调

Shakespeare’s Plays

td>All’s Well that Ends Well

As You Like It	Comedy
Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare’s Sonnets

The Fair Youth	1–126
The Dark Lady	127–152
The Rival Poet	78–86

定义样式

tr { background-color: #fff; }
.alt { background-color: #ccc; }

我们可以为每个奇数行添加一个alt类。

$(‘tr:even’).addClass(‘alt’);

tr:even虽然even是偶数的意思，但是计算机语言中普遍都是从0开始计算的， 0是第一个,1是第二个。
经过选择得到如下图:
这里写图片描述

nth-child 从父元素开始计算
可以发现有点瑕疵，第二个表格从第二行开始了，导致这样的原因是$(‘tr:even’) 是在所有tr的数量基础上选择even。解决办法是用nth-child() ，使它相对父元素来计算，而不是整个tr
$(‘tr:nth-child(odd)’).addClass(‘alt’);

这里的nth-child 是jquery唯一一个从1开始计算的选择符，所以这里又换成了odd。
contains 根据内容选取
再来看一个选择符， :contains() ，它可以根据标签的内容进行匹配，比如要将含有文字Henry的td变色。
$(‘td:contains(Henry)’).addClass(‘alt’);

DOM遍历方法
filter方法
当使用选择器选择了多个便签时，可以用filter方法遍历DOM得到满足我们条件的标签。
如下ul
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
- list item 6
- list item 33
选取了所有的li ，并隔行变色

$(‘ul > li’).filter(‘:even()’).addClass(‘alt’);

filter 还可以用一个函数作为参数

$(‘ul > li’).filter(function(index){
```
        return index % 2 == 0; 
```
}).addClass(‘alt’);

next() , nextAll()
通过contains(3)选择包含内容为3的标签，再用next() 函数可以选择内容为3的下一个兄弟标签，如下。

//两种写法都可以
$(‘ul > li’).filter(‘:contains(3)’).next().addClass(‘alt’);
$(‘ul > li:contains(3)’).next().addClass(‘alt’);

nextAll() 则是选择内容为3的后面所有兄弟

$(‘ul > li:contains(3)’).nextAll().addClass(‘alt’);

有next当然也有prev了， prev() ,prevAll()和next用法是相同。

还有个siblings()方法，当选择内容为3的li后，使用siblings()方法，可以选取内容为3的其他所有兄弟，但内容为3的标签就丢弃了。

$(‘ul > li:contains(3)’).siblings().addClass(‘alt’);

addBack()
上面提到的next, prev函数都是不包括内容为3的标签自身的，加上addBack()则可以不把自身丢弃。如下这样1, 2, 3都被选择了。

$(‘ul > li:contains(3)’).prevAll().addBack().addClass(‘alt’);

除了通过遍历得到兄弟结点，还可以先找父亲然后在通过父亲找儿子，就是自己的兄弟了。如下选择的都是内容为3的兄弟和它自己：

$(‘ul > li:contains(3)’).parent().children().addClass(‘alt’);

访问DOM元素
通过jquery选择得到的都是jQuery对象，要想获取纯粹的DOM对象，可以使用如下的两种方式

$(‘#item1’).get(0)
//或者更简便的
$(‘#item1’)[0]

jquery对象和 DOM对象的区别
这里有必要理解下jquery对象和 DOM对象的区别，
$('#item1') 得到的是一个jquery对象，可以用$('#item1').html() 打印出内容。
$('#item1')[0] 得到的是一个纯粹的DOM对象，它是没有.html()方法的， .html()是jquery对象特有的方法， $('#item1')[0].innerHTML 才是DOM的方法。

如下，结果是true，选择都是DOM对象是相等的。
$('#item1')[0] == document.getElementById("item1");

再来看看jquery和DOM对象如何转换。
jQuery转成DOM可以通过get,或者[]方式。

DOM对象转成jQuery对象如下，用$() 包住就行。

var item = document.getElementById(“item1”);
item = $(item);