jQuery入門[1]－構造函數

作者: Think 來源: 博客園發布時間: 2009-12-20 20:46 閱讀: 7050 次推薦: 2 原文鏈接 [收藏]

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 basictitle>
    <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($('

new item
'));

運行效果如下：

其中$('

new item

')將其中的字符串轉換為DOM對象，然后通過append()函數加入ul對象的最后。
接下來：

        $(document).ready(function(){
            $('ul').css('color','red');
        });

則效果如：

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