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>

重置程式碼

自動運行

提交

預覽 Clear