5.1 jQuery基础
生活随笔
收集整理的這篇文章主要介紹了
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); // 追加新元素 }?
轉載于:https://www.cnblogs.com/iMirror/p/4295763.html
總結
以上是生活随笔為你收集整理的5.1 jQuery基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL中的多表插入更新与MS-SQL
- 下一篇： bzoj 1004