<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery刪除實驗</title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> <script> /* * 刪除元素/內容 * 如需刪除元素和內容，一般可使用以下兩個 jQuery 方法： * remove() - 刪除被選元素（及其子元素） * empty() - 從被選元素中刪除子元素 */ //jQuery remove() 方法刪除被選元素及其子元素。 $(document).ready(function(){ $("#btn1").click(function(){ $("#div1").remove(); }); //jQuery empty() 方法刪除被選元素的子元素。 $("#btn2").click(function(){ $("#div1").empty(); }); /* * 過濾被刪除的元素 * jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。 * 該參數可以是任何 jQuery 選擇器的語法。 * 下面的例子刪除 class="italic" 的所有 <p> 元素： */ $("#btn3").click(function(){ $("p").remove(".italic"); }); }); </script> </head> <body> <div id="div1" style="height:300px;width:600px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> <p class="italic"><i>This is another paragraph in the div.</i></p> <p class="italic"><i>This is another paragraph in the div.</i></p> </div><br /> <button id="btn1">刪除 div 元素</button> <button id="btn2">清空 div 元素</button> <button id="btn3">刪除 class="italic" 的所有 p 元素</button> </body> </html>
<!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>jquery獲取並設置css類</title> <link href="../css/jquery-ui-1.9.2.custom.css" /> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.js"></script> <script> /* * jQuery 操作 CSS * jQuery 擁有若干進行 CSS 操作的方法。我們將學習下面這些： * addClass() - 向被選元素添加一個或多個類 * removeClass() - 從被選元素刪除一個或多個類 * toggleClass() - 對被選元素進行添加/刪除類的切換操作 * css() - 設置或返回樣式屬性 */ $(document).ready(function(){ //下面的例子展示如何向不同的元素添加 class 屬性。當然，在添加類時，您也可以選取多個元素： $("#btn1").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); //jQuery removeClass() 方法 //下面的例子演示如何不同的元素中刪除指定的 class 屬性 $("#btn2").click(function(){ $("h1,h2,p").removeClass("blue"); }); //jQuery toggleClass() 方法 //下面的例子將展示如何使用 jQuery toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操作： $("#btn3").click(function(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <h1>標題 1</h1> <h2>標題 2</h2> <p>這是一個段落。</p> <p>這是另一個段落。</p> <div>這是非常重要的文本！</div> <br> <button id="btn1">向元素添加類</button><br /> <button id="btn2">從元素上刪除類</button><br /> <button id="btn3">切換 CSS 類</button><br /> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery過濾</title> <script src="../js/jquery-1.8.3.js"></script> <script src="../js/jquery-1.4.2.js"></script> <script> /*(縮寫搜索元素的范圍 三個最基本的過濾方法是：first(), last() 和 eq()，它們允許您基於其在一組元素中的位置來選擇一個特定的元素。 其他過濾方法，比如 filter() 和 not() 允許您選取匹配或不匹配某項指定標准的元素。 */ /*jQuery first() 方法 first() 方法返回被選元素的首個元素。 下面的例子選取首個 <div> 元素內部的第一個 <p> 元素 */ $(document).ready(function(){ $("div p").first().css("background-color","yellow"); /* * jQuery last() 方法 * last() 方法返回被選元素的最后一個元素。 * 下面的例子選擇最后一個 <div> 元素中的最后一個 <p> 元素： */ $("div p").last().css("background-color","red"); /* * jQuery eq() 方法 * eq() 方法返回被選元素中帶有指定索引號的元素。 * 索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。下面的例子選取第二個 <p> 元素（索引號 1）： */ $("p").eq(1).css("background-color","yellow"); /* * jQuery filter() 方法 * filter() 方法允許您規定一個標准。不匹配這個標准的元素會被從集合中刪除，匹配的元素會被返回。 * 下面的例子返回帶有類名 "intro" 的所有 <p> 元素： * * jQuery not() 方法 * not() 方法返回不匹配標准的所有元素。 * 提示：not() 方法與 filter() 相反。 * 下面的例子返回不帶有類名 "intro" 的所有 <p> 元素： * */ }); </script> </head> <body> <h1>歡迎來到我的主頁</h1> <div> <p>這是 div 中的一個段落。</p> </div> <div> <p>這是 div 中的另一個段落。</p> <p>這也是段落。</p> <p>這也是段落。</p> <p>這也是段落。</p> <p>這也是段落。</p> <p>這也是段落。</p> <p>這也是段落。</p> </div> <p>這也是段落。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery設置內容和屬性</title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> <script> /* * 設置內容 - text()、html() 以及 val() * 我們將使用前一章中的三個相同的方法來設置內容： * text() - 設置或返回所選元素的文本內容 * html() - 設置或返回所選元素的內容（包括 HTML 標記） * val() - 設置或返回表單字段的值 * 下面的例子演示如何通過 text()、html() 以及 val() 方法來設置內容： */ $(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); /* * 設置屬性 - attr() * jQuery attr() 方法也用於設置/改變屬性值。 * 下面的例子演示如何改變（設置）鏈接中 href 屬性的值： */ $("button#btn4").click(function(){ $("#w3s2").attr({ "href" : "http://www.w3school.com.cn/jquery/", "title" : "W3School jQuery 教程" }); }); }); </script> </head> <body> <p id="test1">這是段落。</p> <p id="test2">這是另一個段落。</p> <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p> <button id="btn1">設置文本</button> <button id="btn2">設置 HTML</button> <button id="btn3">設置值</button> <p><a href="http://www.w3school.com.cn" id="w3s2">W3School.com.cn</a></p> <button id="btn4">改變 href 和 title 值</button> <p>請把鼠標指針移動到鏈接上，或者點擊該鏈接，來查看已經改變的 href 值和已經設置的 title 值。</p> </body> </html>