5.1 jQuery基础

1. jquery.com 下载

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

 

2. 绑定事件

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

　　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 document

<!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. 回调函数

<!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. 追加

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);         // 追加新元素
}

 

　　

　　

posted @ 2015-02-18 14:41  Mirrorhanman  阅读(157)  评论(0)  编辑  收藏  举报