DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery入門之(1) -構造函數
jQuery入門之(1) -構造函數
編輯:AJAX詳解     

◦體積小(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>'));

其中的字符串轉換為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');
        });

以上代碼的效果是頁面一載入,就彈出一個對話

框。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved