jquery 选择元素

最新推荐文章于 2024-08-12 12:57:58 发布

珍惜每分每秒

最新推荐文章于 2024-08-12 12:57:58 发布

阅读量1.1k

点赞数 1

分类专栏：【jquery】

本文链接：https://blog.csdn.net/qq_36238595/article/details/79840243

版权

【jquery】专栏收录该内容

7 篇文章 0 订阅

订阅专栏

理解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标签。

<span class="horizontal">
    sfef
</div>

<span class="horizontal">
    bbb
</span>

通过span.horizontal选择这两个span，在用:eq(1)定位到第二span。这里只选择了一个结点

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

表格隔行选取

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

<h2>Shakespeare's Plays</h2> 
<table> 
 <tr> 
     <td>As You Like It</td> 
     <td>Comedy</td> 
     <td></td> 
 </tr> 
 <tr> 
    td>All's Well that Ends Well</td> 
     <td>Comedy</td> 
     <td>1601</td> 
 </tr> 
 <tr> 
     <td>Hamlet</td> 
     <td>Tragedy</td> 
     <td>1604</td> 
 </tr> 
 <tr> 
     <td>Macbeth</td> 
     <td>Tragedy</td> 
     <td>1606</td> 
 </tr> 
 <tr> 
     <td>Romeo and Juliet</td> 
     <td>Tragedy</td> 
     <td>1595</td> 
 </tr> 
 <tr> 
     <td>Henry IV, Part I</td> 
     <td>History</td> 
     <td>1596</td> 
 </tr> 
 <tr> 
     <td>Henry V</td> 
     <td>History</td> 
     <td>1599</td> 
 </tr> 
</table> 

<h2>Shakespeare's Sonnets</h2> 
<table> 
 <tr> 
     <td>The Fair Youth</td> 
     <td>1–126</td> 
 </tr> 
 <tr> 
     <td>The Dark Lady</td> 
     <td>127–152</td> 
 </tr> 
 <tr> 
     <td>The Rival Poet</td> 
     <td>78–86</td> 
 </tr> 
</table>

定义样式

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
```
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
  <li>list item 33</li>
</ul>
```
选取了所有的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);
```