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>

你可能感兴趣的:(jquery)