前边我们学习过JS通过DOM来操作HTML(详看DOM(一)——HTML DOM),这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢?顺便两者之间相互比较一下,看其差别。

 

一,首先看一下JQuery如何获取想要操作的元素的内容和属性的:

   1,获得内容 -text()、html() 以及 val()

                三个简单实用的用于 DOM操作的 jQuery方法:

  • text() -设置或返回所选元素的文本内容
  • html() -设置或返回所选元素的内容(包括 HTML标记)
  • val() -设置或返回表单字段的值

获取属性 - attr()


  好,我们来举一个简单例子,获取属性值:

1 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 2 <span style="font-size:18px;">  <!DOCTYPE html>  
 3         <html>  
 4         <head>  
 5             <script src="/jquery/jquery.js"></script>  
 6             <script>  
 7                 $(document).ready(function(){  
 8                   $("button").click(function(){  
 9                     alert($("#ljh").attr("href"));  
10                   });  
11                 });  
12             </script>  
13         </head>  
14           
15         <body>  
16             <p><a href="" id="ljh">刘佳翰的博客链接</a></p>  
17             <button>我的博客链接</button>  
18         </body>  
19       
20     </html>  
21 </span>

二,上边是获取了网页中一些元素的内容,或者属性,下边我们如果想改变呢?如何设置呢?当然可以直接设置,也可以通过函数来获取设置。看两个例子:

 

,改变属性的值:

1 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 2 <span style="font-size:18px;">  <!DOCTYPE html>  
 3     <html>  
 4         <head>  
 5             <script src="/jquery/jquery.js"></script>  
 6             <script>  
 7                 $(document).ready(function(){  
 8                   $("button").click(function(){  
 9                     $("#ljh").attr({  
10                       "href" : ",  
11                       "title" : "刘佳翰博客中的一篇文章"  
12                     });  
13                   });  
14                 });  
15             </script>  
16         </head>  
17           
18         <body>  
19             <p><a href="" id="ljh">刘佳翰的博客</a></p>  
20             <button>改变 href 和 title 值</button>  
21             <p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值和已经设置的 title 值。</p>  
22         </body>  
23     </html>  
24 </span>

利用回调函数进行修改设置的:

1 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 2 <span style="font-size:18px;">  <!DOCTYPE html>  
 3     <html>  
 4         <head>  
 5             <script src="/jquery/jquery.js"></script>  
 6             <script>  
 7                 $(document).ready(function(){  
 8                   $("#btn1").click(function(){  
 9                     $("#test1").text(function(i,origText){  
10                       return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";   
11                     });  
12                   });  
13                   
14                   $("#btn2").click(function(){  
15                     $("#test2").html(function(i,origText){  
16                       return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";   
17                     });  
18                   });  
19                   
20                 });  
21             </script>  
22         </head>  
23           
24         <body>  
25             <p id="test1">这是<b>粗体</b>文本。</p>  
26             <p id="test2">这是另一段<b>粗体</b>文本。</p>  
27             <button id="btn1">显示旧/新文本</button>  
28             <button id="btn2">显示旧/新 HTML</button>  
29         </body>  
30     </html>  
31 </span>

三,当然我们也可以添加和删除一些HTML元素。

,添加的几个方法:

方法名

含义

Append()

在被选元素的结尾插入内容

Prepend()

在被选元素的开头插入内容

after()

在被选元素之后插入内容

before()

在被选元素之前插入内容

 

例子:利用append添加文本和列表项:

1 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 2 <span style="font-size:18px;">  <!DOCTYPE html>  
 3     <html>  
 4         <head>  
 5             <script src="/jquery/jquery.js">  
 6             </script>  
 7             <script>  
 8                 $(document).ready(function(){  
 9                   $("#btn1").click(function(){  
10                          //添加文本  
11                     $("p").append(" <b>Appended text</b>.");  
12                   });  
13                   
14                   $("#btn2").click(function(){  
15                         //添加列表  
16                     $("ol").append("<li>Appended item</li>");  
17                   });  
18                 });  
19             </script>  
20         </head>  
21           
22         <body>  
23             <p>This is a paragraph.</p>  
24             <p>This is another paragraph.</p>  
25             <ol>  
26             <li>List item 1</li>  
27             <li>List item 2</li>  
28             <li>List item 3</li>  
29             </ol>  
30             <button id="btn1">追加文本</button>  
31             <button id="btn2">追加列表项</button>  
32         </body>  
33     </html>  
34 </span>

和before和他们的基本上也相同,不再演示,当然这里我们也可以一块添加若干个新元素,看一下这个例子:

1 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 2 <span style="font-size:18px;">  <!DOCTYPE html>  
 3         <html>  
 4         <head>  
 5             <script src="/jquery/jquery.js"></script>  
 6             <script>  
 7                 function appendText()  
 8                 {  
 9                     var txt1="<p>Text.</p>";              // 以 HTML 创建新元素  
10                     var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素  
11                     var txt3=document.createElement("p");  
12                     txt3.innerHTML="Text.";               // 通过 DOM 来创建文本  
13                     $("body").append(txt1,txt2,txt3);        // 追加新元素  
14                 }  
15             </script>  
16         </head>  
17         <body>  
18           
19             <p>This is a paragraph.</p>  
20             <button onclick="appendText()">追加文本</button>  
21           
22         </body>  
23     </html>  
24 </span>

2,删除的几个方法,具体用法不再赘述,和上边的几个方法都是一样的:

方法名

含义

Remove()

删除被选元素及其子元素

Empty()

从被选元素中删除子元素

 

 

四,JQuery操作CSS

  jQuery拥有若干进行 CSS操作的方法。下边为几种常用的方法

  • addClass() -向被选元素添加一个或多个类
  • removeClass() -从被选元素删除一个或多个类
  • toggleClass() -对被选元素进行添加/删除类的切换操作
  • css() -设置或返回样式属性

 

我们来看一个css()方法的例子:

1 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 2 <span style="font-size:18px;">  <!DOCTYPE html>  
 3     <html>  
 4         <head>  
 5             <script src="/jquery/jquery.js"></script>  
 6             <script>  
 7                 $(document).ready(function(){  
 8                   $("button").click(function(){  
 9                     $("p").css({"background-color":"yellow","font-size":"200%"});  
10                   });  
11                 });  
12             </script>  
13         </head>  
14           
15         <body>  
16             <h2>这是标题</h2>  
17             <p style="background-color:#ff0000">这是一个段落。</p>  
18             <p style="background-color:#00ff00">这是一个段落。</p>  
19             <p style="background-color:#0000ff">这是一个段落。</p>  
20             <p>这是一个段落。</p>  
21             <button>为 p 元素设置多个样式</button>  
22         </body>  
23     </html>  
24 </span>

五,直接控制元素和浏览器窗口的大小:

Jquery尺寸方法:

jQuery提供多个处理尺寸的重要方法:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

 

看一个例子吧:

1 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 2 <span style="font-size:18px;">  <!DOCTYPE html>  
 3     <html>  
 4         <head>  
 5             <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  
 6             </script>  
 7             <script>  
 8                 $(document).ready(function(){  
 9                   $("button").click(function(){  
10                     var txt="";  
11                     txt+="Width of div: " + $("#div1").width() + "</br>";  
12                     txt+="Height of div: " + $("#div1").height() + "</br>";  
13                     txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";  
14                     txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);  
15                     $("#div1").html(txt);  
16                   });  
17                 });  
18             </script>  
19         </head>  
20         <body>  
21           
22             <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>  
23             <br>  
24             <button>显示 div 的尺寸</button>  
25             <p>outerWidth(true) - 返回元素的宽度(包括内边距、边框和外边距)。</p>  
26             <p>outerHeight(true) - 返回元素的高度(包括内边距、边框和外边距)。</p>  
27           
28         </body>  
29     </html>  
30 </span>

当然上边都是一些小例子,不过我们可以模仿这些小例子,来学习这些知识,然后举一反三通过API文档来学习其他的方法属性等,不过这些都是经常使用的,还是需要我们好好掌握的。通过JQuery能方便我们的很多编写代码,所以JQuery还是需要好好继续学习的!!!