1. 程式人生 > >初識 jQuery

初識 jQuery

  1. 什麼是jQuery
    它是一個輕量級的javascript類庫(重量級的有ext.js)。
    注1:就一個類“jQuery”,簡寫“$”,它是一個容器。

  2. jQuery優點
    (1)相容瀏覽器
    (2)總是面向集合
    (3)多行操作集於一行

  3. 基礎案例:hello jQuery
    (1)匯入js類庫
    注:js 類庫可從網上下載,一般用1.7.1的版本就可以了,也可用最新的
    (2)jQuery程式入口

    ( d o c u m e n t ) . r
    e a d y ( f n ) ;
    (fn);
    注:fn function

  4. jQuery三種工廠方法
    工廠方法:例項化jQuery物件

    4.1 jQuery(selector[,context])語法

    $(“a”, document) //jquery選擇器,作用:找物件
    selector:選擇器
    context:上下文,環境/容器,documemt

    4.1.1 選擇器
    元素選擇器 ( a ) . (“.a1”)
    ID選擇器:# (“#a2”)  屬性選擇器:[] (“input[name=’btn’]”)
    包含選擇器:E1 E2 ( p . a 3 ) E 1 , E 2 , E 3 (“.a1,.a2”)
    自定義選擇器::exp ( " a " , d o c u m e n t ) (“a”, “div”) == ( d i v a ) : e q ( i n d e x ) (“tr:eq(1)”) 選擇tr標籤中下標為1的物件
    $(“tr:even”) 選擇tr標籤中下標為偶數的物件,從0開始

    4.2 jQuery(html)
    html:基於html的一個字串。

    案例:
    ====================================================

    –請選擇–

    ... ("input[name=’btn1’]").click(function(){(點選事件)        //將HTML文字追加到ID="s1"的物件中 ("value").appendTo("#s1"); //在ID="s1"的物件中追加HTML文字 $("#s1").append("value2"); });

    ====================================================

    4.3 jQuery(element)
    element:js物件,表示一個html元素。
    案例: ( " a " ) (“td”)
    (標籤即元素)

  5. jQuery屬性寫法
    (1)無引數: ( p ) . t e x t ( ) ; ( 2 ) v a l (“p”).text(“Hello world!”);
    (3)回撥函式: ( p ) . t e x t ( f u n c t i o n ( n ) r e t u r n p i n d e x + n ; ) ; ( 4 ) p r o p e r t i e s (“img”).attr({
    src: “test.jpg”,
    alt: “Test Image”
    });

    jQuery事件寫法:
    (“p”).click(function(){ (this).hide();
    });

  6. console物件
    console.log(“文字”); 輸出普通訊息
    console.dir(); 顯示一個物件所有的屬性和方法
    console.dirxml(); 顯示網頁的某個節點(node)所包含的html/xml程式碼