<!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;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;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>