1、hide()函数 隐藏
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("p").click(function () { 9 $(this).hide(); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <p>If you click on me, I will disappear.</p> 16 </body> 17 </html>
2、slideToggle()通过调整高度,在所有匹配元素是否可见之间进行切换。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $(".flip").click(function () { 9 $(".panel").slideToggle("slow"); 10 }); 11 }); 12 </script> 13 <style type="text/css"> 14 div.panel, p.flip 15 { 16 margin: 0px; 17 padding: 5px; 18 text-align: center; 19 background: #e5eecc; 20 border: solid 1px #c3c3c3; 21 } 22 div.panel 23 { 24 height: 120px; 25 display: none; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="panel"> 31 <p> 32 W3School - 领先的 Web 技术教程站点</p> 33 <p> 34 在 W3School,你可以找到你所需要的所有网站建设教程。</p> 35 </div> 36 <p class="flip"> 37 请点击这里</p> 38 </body> 39 </html>
3、html() 设置每个匹配元素的html内容,此属性不可用于html文档,Dom特性部分。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("button").click(function () { 9 $("p").html("w3c school"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <h2> 16 This is a heading</h2> 17 <p> 18 This is a paragraph.</p> 19 <p> 20 This is another paragraph.</p> 21 <button type="button"> 22 请点击这里</button> 23 </body> 24 </html>
4、animate() 用于生成自定义动画的函数
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("#start").click(function () { 9 $("#box").animate({ height: 300 }, "slow"); 10 $("#box").animate({ 300 }, "slow"); 11 $("#box").animate({ height: 100 }, "slow"); 12 $("#box").animate({ 100 }, "slow"); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <p> 19 <a href="#" id="start">Start Animation</a></p> 20 <div id="box" style="background: #98bf21; height: 100px; 100px; position: relative"> 21 </div> 22 </body> 23 </html>
5、append() 将内容追加到每个匹配元素的内部,此操作类似于对所有指定的元素执行appendChild,并将这些操作添加到文档中。
$(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>向html中追加内容</title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("button").click(function () { 9 $("p").append("<b>W3School</b>."); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <h2> 16 This is a heading</h2> 17 <p> 18 This is a paragraph.</p> 19 <p> 20 This is another paragraph.</p> 21 <button type="button"> 22 请点击这里</button> 23 </body> 24 </html>
6、after() 在每个匹配元素之后插入内容,before() 函数在所有匹配的元素之前插入 HTML 内容。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>向html元素之后追加内容</title> 5 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function () { 8 $("button").click(function () { 9 $("p").after(" W3School"); 10 }); 11 }); 12 </script> 13 </head> 14 <body> 15 <h2> 16 This is a heading</h2> 17 <p> 18 This is a paragraph.</p> 19 <p> 20 This is another paragraph.</p> 21 <button type="button"> 22 请点击这里</button> 23 </body> 24 </html>