JQuery(三)——操作HTML和CSS内容
前边我们学习过JS通过DOM来操作HTML（详看DOM（一）——HTML DOM ），这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢？顺便两者之间相互比较一下，看其差别。
一，首先看一下JQuery如何获取想要操作的元素的内容和属性的：
1，获得内容 -text()、html() 以及 val()
三个简单实用的用于 DOM操作的 jQuery方法：
- text() -设置或返回所选元素的文本内容
- html() -设置或返回所选元素的内容（包括 HTML标记）
- val() -设置或返回表单字段的值
2，获取属性 - 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="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客链接</a></p> 17 <button>我的博客链接</button> 18 </body> 19 20 </html> 21 </span>
二，上边是获取了网页中一些元素的内容，或者属性，下边我们如果想改变呢？如何设置呢？当然可以直接设置，也可以通过函数来获取设置。看两个例子：
1，改变属性的值：
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" : "http://blog.csdn.net/liujiahan629629/article/details/16991467", 11 "title" : "刘佳翰博客中的一篇文章" 12 }); 13 }); 14 }); 15 </script> 16 </head> 17 18 <body> 19 <p><a href="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客</a></p> 20 <button>改变 href 和 title 值</button> 21 <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p> 22 </body> 23 </html> 24 </span>
2,利用回调函数进行修改设置的：
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元素。
1，添加的几个方法：
|
方法名 |
含义 |
|
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>
after和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还是需要好好继续学习的！！！
