動畫：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>stop實驗測試</title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> <script> /* * jQuery 動畫 - animate() 方法 * jQuery animate() 方法用於創建自定義動畫。 * 語法：$(selector).animate({params},speed,callback); * 必需的 params 參數定義形成動畫的 CSS 屬性。 * 可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。 * 可選的 callback 參數是動畫完成后所執行的函數名稱。 */ $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); $("#stop").click(function(){ $("div").stop(); }); $("#stop2").click(function(){ $("div").stop(true); }); $("#stop3").click(function(){ $("div").stop(true,true); }); }); </script> </head> <body> <button id="start">開始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止但要完成</button> <p><b>"開始"</b> 按鈕會啟動動畫。</p> <p><b>"停止"</b> 按鈕會停止當前活動的動畫，但允許已排隊的動畫向前執行。</p> <p><b>"停止所有"</b> 按鈕停止當前活動的動畫，並清空動畫隊列；因此元素上的所有動畫都會停止。</p> <p><b>"停止但要完成"</b> 會立即完成當前活動的動畫，然后停下來。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>
獲取:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> <script> /* * 獲得內容 - text()、html() 以及 val() * 三個簡單實用的用於 DOM 操作的 jQuery 方法： * text() - 設置或返回所選元素的文本內容 * html() - 設置或返回所選元素的內容（包括 HTML 標記） * val() - 設置或返回表單字段的值 * 下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容： */ $(document).ready(function(){ $("#btn1").click(function(){ alert("Text:"+$("#test").text()); }); $("#btn2").click(function(){ alert("HTML:"+$("#test").html()); }); $("#btn3").click(function(){ alert("Value:"+$("#test1").val()); }); /* * 獲取屬性 - attr() * jQuery attr() 方法用於獲取屬性值。 * 下面的例子演示如何獲得鏈接中 href 屬性的值： */ $("#btn4").click(function(){ alert($("#w3s").attr("href")); }); }); </script> </head> <body> <p id="test">這是段落中的<b>粗體</b>文本。</p> <button id="btn1">顯示文本</button> <button id="btn2">顯示 HTML</button> <!--val()獲取值--> <p>姓名：<input type="text" id="test1" value="米老鼠"></p> <button id="btn3">顯示值</button> <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p> <button id="btn4">顯示 href 值</button> </body> </html>
添加:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> <script> /* * 添加新的 HTML 內容 * 我們將學習用於添加新內容的四個 jQuery 方法： * append() - 在被選元素的結尾插入內容 * prepend() - 在被選元素的開頭插入內容 * after() - 在被選元素之后插入內容 * before() - 在被選元素之前插入內容 */ $(document).ready(function(){ //jQuery append() 方法在被選元素的結尾插入內容。 $("#btn1").click(function(){ $("p").append("<b>Appended text</b>"); }); $("#btn2").click(function(){ $("ol").append("<li>Appened item</li>"); }); //jQuery prepend() 方法在被選元素的開頭插入內容。 $("#btn3").click(function(){ $("p").prepend("<b>Prepended text</b>"); }); $("#btn4").click(function(){ $("ol").prepend("<li>Prepened item</li>") }); /* * jQuery after() 和 before() 方法 * jQuery after() 方法在被選元素之后插入內容。 * jQuery before() 方法在被選元素之前插入內容。 */ $("#btn5").click(function(){ $("img").before("<b>Before</b>"); }); $("#btn6").click(function(){ $("img").after("<b>After</b>"); }); }); /* * 通過 append() 和 prepend() 方法添加若干新元素 * 在上面的例子中，我們只在被選元素的開頭/結尾插入文本/HTML。 * 不過，append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。 * 可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。 */ function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 創建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 創建新元素 var txt3=document.createElement("p"); txt3.innerHTML="Text."; // 通過 DOM 來創建文本 $("#more").append(txt1,txt2,txt3); // 追加新元素 } </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <p id="more">一次性追加多個文檔</p> <img src="../img/z_1_attack_02.png"/><br /> <button id="btn1">追加文本</button><br /> <button id="btn2">追加列表項</button><br /> <button id="btn3">Prepended向前添加文本</button><br /> <button id="btn4">Prepended向前添加li</button><br /> <button onclick="appendText()">追加多個文檔</button><br /> <button id="btn5">在圖片前面添加文本</button><br /> <button id="btn6">在圖片后面添加文本</button><br /> </body> </html>