【Jquery】之DOM操作

　　　　Questions

本篇文章主要讲解Jquery中对DOM的操作，主要内容如下：

1 内容区

1.1 .addClass()

(1).addClass(className)

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <script src="~/Scripts/jquery-1.10.2.js"></script>
 7     
 8     <title>Index</title>
 9     <script>
10         $(document).ready(function () {
11             $("#BtnJq").click(function(){
12                 $("#DivTest").addClass("DivClass");
13             })
14         })
15     </script>
16 </head>
17 <body>
18     <div id="DivTest"></div>
19     <input type="button" id="BtnJq" value="JqDomOperate"/>
20 </body>
21 </html>

(2).addClass(function(index))

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <script src="~/Scripts/jquery-1.10.2.js"></script>
 7     
 8     <title>Index</title>
 9     <script>
10         $(document).ready(function () {
11             $("#BtnJq").click(function(){
12                 $("#DivTest").addClass("DivClass");
13                 $("#DivTest").addClass(function (index) {
14                     return "DivClass" + index;
15                 })
16             })
17         })
18     </script>
19 </head>
20 <body>
21     <div id="DivTest"></div>
22     <input type="button" id="BtnJq" value="JqDomOperate"/>
23 </body>
24 </html>
25 
26 
27

(3).addClass(function(index,currentClass))

 1 <!DOCTYPE html>
 2 
 3 <html>
 4 <head>
 5     <meta name="viewport" content="width=device-width" />
 6     <script src="~/Scripts/jquery-1.10.2.js"></script>
 7     
 8     <title>Index</title>
 9     <script>
10         $(document).ready(function () {
11             $("#BtnJq").click(function(){
12                 $("#DivTest").addClass(function (index,currentClass) {
13                     return currentClass + index;
14                 })
15             })
16         })
17     </script>
18 </head>
19 <body>
20     <div id="DivTest"></div>
21     <input type="button" id="BtnJq" value="JqDomOperate"/>
22 </body>
23 </html>
24 
25 
26