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