轉,jQuery入門[1]－建構函式

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery入門[1]－建構函式

jQuery入門[1]－建構函式
jQuery入門[2]－選取器
jQuery入門[3]－事件
jQuery入門[4]－鏈式代碼
jQuery入門[5]－AJAX
jQuery入門[6]－動畫
JQuery優點
◦體積小（v1.2.3 15kb）
◦豐富的DOM選取器(CSS1-3 + XPath) ◦跨瀏覽器（IE6,FF,Safari,Opera）
◦鏈式代碼
◦強大的事件、樣式支援
◦強大的AJAX功能
◦易於擴充，外掛程式豐富

jQuery的建構函式接收四種類型的參數：

jQuery(expression,context)
jQuery(html)
jQuery(elements)
jQuery(fn)

第一種根據運算式（ID，DOM元素名，CSS運算式，XPath運算式）找出文檔中的元素，並組裝成一個jQuery對象返回。
DEMO:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery basic</title>
    <style type="text/css">
        .selected
        {
            background-color:Yellow;
        }
    </style>
    <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
</head>
<body>
    <h3>jQuery建構函式</h3>
    <ul>
        <li>jQuery(expression,context)</li>
        <li>jQuery(html)</li>
        <li>jQuery(elements)</li>
        <li>jQuery(fn)</li>
    </ul>
    <script type="text/javascript">
    </script>
</body>
</html>

將以下jQuery代碼加入文末的指令碼塊中：jQuery("ul>li:first").addClass("selected");

頁面運行效果如下：

其中jQuery()可替換為捷徑$()，如果$被其它對象佔用，可使用jQuery.noConflict()函數取消捷徑。
"ul>li:first"中ul>li表示所有位於ul下的li元素（為CSS運算式，XPath方式可用ul/li），:first表示其中的第一個。addClass()為jQuery對象用來添加CSS樣式類的函數，相反的函數為removeClass()。
再加入以下代碼：$('ul').append($('<li>new item</li>'));

運行效果如下：

其中$('<li>new item</li>')將其中的字串轉換為DOM對象，然後通過append()函數加入ul對象的最後。
接下來：        $(document).ready(function(){
            $('ul').css('color','red');
        });

則效果如：

jQuery建構函式中還可以真接傳入DOM對象，如document，或jQuery對象（當然就沒什麼意義）。ready()函數為document添加事件處理函數，將ul的顏色設為紅色。
$(document).ready()由於應用情境眾多，所以可以直接用$(fn)來代替，fn表示處理函數。（ready處理函數貌似在文檔內容載入完成後執行，無需等待相關其它圖片等資源載入完成，所以比load事件要更早執行，對於這點，沒有具體證實）        $(function(){
            alert('welcome to jQuery');
        });

以上代碼的效果是頁面一載入，就彈出一個對話方塊。

reference:
http://docs.jquery.com/Core
http://docs.jquery.com/Selectors

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More