jQuery:(一)jQuery簡介

來源:互聯網
上載者:User

標籤:代碼風格   ack   title   壓縮版   選擇   版本   包括   jquery類庫   get   

一、jQuery簡介
jQuery由美國人John Resig於2006年建立
jQuery是目前最流行的JavaScript程式庫,它是對JavaScript對象和函數的封裝。

二、jQuery的優勢
1、強大的選取器。
2、出色的DOM封裝。
3、可靠的事件處理機制。
4、出色的瀏覽器安全色性。
5、使用隱式迭代簡化編程。
6、豐富的外掛程式支援。
7、體積小,壓縮後只有100KB左右。

三、下載和使用jQuery
1、下載
進入jQuery官網:http://jquery.com下載
2、jQuery庫檔案
jQuery庫分開發版和發布版

名稱 大小 說明
jquery-1.版本號碼.js(開發版) 約268kb 完整無壓縮版本,主要用於測試、學習和開發。
jquery-1.版本號碼.min.js(發布版) 約91KB 經過工具壓縮或經過伺服器開啟Gzip壓縮,主要應用於發布的產品和項目。

3、搭建jQuery使用環境

3.1 下載jQuery類庫。

3.2 在頁面中引入jQuery

<script type="text/javascript" src="jquery-3.2.1.js"></script>

四、jQuery文法結構

文法:$(selector).action();

說明:

工廠函數$():將DOM對象轉化為jQuery對象。
選取器 selector:擷取需要操作的DOM元素。
方法action():jQuery中提供的方法,包括綁定事件處理的方法。

樣本:

$("#current").addClass("current");   // id選擇
$("input").addClass("current");     // 標籤選擇
$(".current").addClass("other");    // class類名選擇

五、jQuery代碼風格
1、$(selector).action();
$等同於"jQuery"
$(document).ready()等同於jQuery(document).ready()
2、方法舉例

文法 說明
css("屬性","屬性值") 為元素設定CSS樣式的值
addClass("類樣式名") 為元素添加類樣式
html("html代碼") 為元素設定innerHTML的值

操作連綴書寫:
$("h2").css("background-color","#CCFFFF").next().css("display","block");

六、$(document).ready()
$(document).ready()與window.onload類似,但也有區別:

  window.onload $(document).ready()
執行時機 必須等待網頁中所有的內容載入完畢後(包括圖片、視頻等)才能執行 網頁中所有DOM文檔結構繪製完畢後即刻執行,可能與DOM元素關聯的內容(圖片、視頻等)並沒有載入完
編寫次數 同一頁面不能同時編寫多個 同一頁面能同時編寫多個
簡化寫法 $(function(){
   //執行代碼
});

七、jQuery對象和DOM對象
1、DOM對象:直接使用JavaScript擷取的節點對象
   var objDOM=document.getElementById("title");
   var objHTML=objDOM.innerHTML;
2、jQuery對象:使用jQuery封裝DOM對象後產生的對象,它能夠使用jQuery中的方法:
   $("#title").html()
   等同於
   document.getElementById("title").innerHTML;
提示:DOM對象和jQuery對象分別擁有一套獨立的方法,不能混用。

3、jQuery對象轉DOM對象

jQuery對象是一個類似數組的對象,可以通過[index]的方法得到相應的DOM對象
樣本:
var $txtName=$(".txtName");    //jQuery對象
var txtName=$txtName[0];       //DOM對象
通過get(index)方法得到相應的DOM對象
樣本:
var $txtName=$(".txtName");    //jQuery對象
var txtName=$txtName.get(0);   //DOM對象

<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <title>jQuery對象轉化成DOM對象</title>    <style type="text/css">        p{            display: none;;        }        .show{            display: block;        }    </style>    <!--引入jQuery類庫-->    <script type="text/javascript" src="jquery-3.2.1.js"></script>    <script type="text/javascript">       $(document).ready(function(){            var $txtname=$(".txtName"); //擷取jQuery對象         var txtname=$txtname[0]; //擷取DOM對象         console.log($txtname);         console.log(txtname);       });    </script></head><body >    <p id="title">      <a href="hello world"></a>    </p>    <div class="txtName">        111111111    </div></body>      </html>

 

4、DOM對象轉jQuery對象

使用$()函數進行轉換:$(DOM對象)
樣本:
var txtName=document.getElementById("txtName");   //DOM對象
var $txtName=$(txtName);                          //jQuery對象
注意:
1、jQuery對象命名一般約定以$開頭。
2、常使用$(this)來擷取觸發該事件的當前jQuery對象。

jQuery:(一)jQuery簡介

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.