5.1 jQuery基礎

時間 2019-11-09

標籤 5.1 jquery 基礎欄目 JQuery 简体版

原文原文鏈接

1. jquery.com 下載html

api.jQuery.com 查看api important!!!jquery

2. 綁定事件api

　 http://api.jquery.com/category/events/app

　　bind():attach a handler to an event, As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a documentide

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="jquery-2.1.3.min.js"></script>
    <script src="myJs.js"></script>
</head>
<body>
    <button id="btn">Click</button>
</body>
</html>

/**
 * Created by Administrator on 2015/2/18.
 */
$(document).ready(function () {
    $("#btn").on("click",clickhandler1);
    $("#btn").on("click",clickhandler2);
    $("#btn").off("click",clickhandler1);
});

function clickhandler1(e){
    console.log("clickhandler1");
}
function clickhandler2(e){
    console.log("clickhandler2");
}

3. 觸發 trigger函數

　　Trigger():Execute all handlers and behaviors attached to the matched elements for the given event type.測試

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="jquery-2.1.3.min.js"></script>
    <script src="myJs.js"></script>
</head>
<body>
    <button>button1</button>
    <button>button2</button>
    <div><span>1</span> button1 clicks</div>
    <div><span>1</span> button2 clicks</div>
</body>
</html>

$(document).ready(function () {
    $("button:first").click(function(){ 
        update($("span:first"));  //選擇第一個span對象
    });
    $("button:last").click(function(){
        $("button:first").trigger("click");  //觸發全部的button1 click事件
        update($("span:last"));
    });
});

function update(j){
    var n = parseInt(j.text(), 10);
    j.text(n+1);
}

　　點擊button2會同時觸發點擊button1事件動畫

4. 回調函數spa

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script src="jquery-2.1.3.min.js"></script>
    <script src="myJs.js"></script>
</head>
<body>
<button>button1</button>
<p>測試顯示或隱藏</p>
</body>
</html>

/**
 * Created by Administrator on 2015/2/18.
 */
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000, function(){
            alert("動畫完畢就會執行回調函數");
        });
    });
});

5. 追加code

function appendText()
{
　　var txt1="<p>Text.</p>";               // 以 HTML 建立新元素
　　var txt2=$("<p></p>").text("Text.");   // 以 jQuery 建立新元素
　　var txt3=document.createElement("p");  // 以 DOM 建立新元素
　　txt3.innerHTML="Text.";
　　$("p").append(txt1,txt2,txt3);         // 追加新元素
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。