jQuery基本選擇器LOGIN

jQuery基本選擇器

初學jQuery,為了更好的系統學習好jQuery,今天特意把自己學習心得歸納一下,貼上來與初學者共進退,今天我主要總結的是jQuery的基本選擇器。

jQuery的基本選擇器是jQuery中最常用的選擇器,也是最簡單的選擇器,它主要是透過元素的ID,CLASS,元素的標籤ELEMENT等來找出HTML中的DOM元素。在網頁中,每一個id名稱只能使用一次,class允許重複使用。在jQury應用程式中,可以使用這些基本選擇器來完成絕大多數的工作,以下我們主要來看看其特定的實作過程。為了更好的學習,我們先在這裡列出一個HTML標籤代碼:

<div id="mydiv">
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <p>我是一个段落p标签</p>
    <span>我是一个行内span标签</span>
<div>

接著我們分別來看看這幾個基本選擇器的應用

##一、ID選擇器

選擇器:#id

#描述:根據給定的id匹配一個元素

#回傳:單一元素

範例:

<script type="text/javascript">    $(document).ready(function(){
        //id选择器        $("#mydiv").css("background","#f96");
     });</script>

 

功能:改變id為mydiv的元素的背景色

二、class選擇器

#選擇器:.class

##說明:

傳回給定的類別名稱匹配的元素

傳回:

集合元素

範例:

##

<script type="text/javascript">    $(document).ready(function(){
        //class选择器        $(".mini").css("background","#f96");
     });</script>
功能:

改變class為mini的所有元素的背景色

三、標籤element

選擇器:

element

描述:

根據給定的元素名稱匹配元素

返回:

集合元素

範例:

<script type="text/javascript">    $(document).ready(function(){
        //element选择器        $("div").css("background","#f96");
     });</script>
功能:

改變元素名稱是<div>的所有元素的背景色

四、所有元素*

選擇器:

*

描述:

改變符合的所有html標籤元素

傳回值:

集合元素

範例:

<script type="text/javascript">    $(document).ready(function(){
        //*选择器        $("*").css("background","#f96");
     });</script>
功能:

改變所有html元素標籤的背景色

五、selector1、 selector2、....selectorN

選擇器:

selector,selector2,...selectorN

##描述:將每一個選擇器匹配到的元素合併後一起返回

返回:集合元素

範例:

<script type="text/javascript">    $(document).ready(function(){
        //selector1,selector2,...selectorN选择器        $(".mini,p").css("background","#f96");
     });</script>

功能:改變class名為mini和段落p元素的背景色

#下一節
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div id="aaron"> <p>id="aaron"</p> <p>选中</p> </div> <div id="imooc"> <p>id="php中文网"</p> <p>jQuery选中</p> </div> <div id="imooc"> <p>id="php中文网"</p> <p>jQuery未选中</p> </div> <script type="text/javascript"> //通过原生方法处理 var div = document.getElementById('aaron'); div.style.border = "3px solid blue"; </script> <script type="text/javascript"> //通过jQuery直接传入id //id的唯一,只选择到了第一个匹配的id为php中文网的div节点 $("#imooc").css("border", "3px solid red"); </script> </body> </html>
章節課件