jQuery学习之一-----jQuery常用的函数用法

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({ width: 300 }, "slow");
11                 $("#box").animate({ height: 100 }, "slow");
12                 $("#box").animate({ width: 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; width: 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>

posted on 2012-05-03 12:02 千里烟波226 阅读(405) 评论(0) 编辑收藏举报