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

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

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

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

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

2，获取属性 - attr()

 

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

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <!DOCTYPE html>

         <html>

         <head>

             <script src="/jquery/jquery.js"></script>

             <script>

                 $(document).ready(function(){

                   $("button").click(function(){

                     alert($("#ljh").attr("href"));

                   });

                 });

             </script>

         </head>  

         <body>

             <p><a href="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客链接</a></p>

             <button>我的博客链接</button>

         </body>  

     </html>

 </span>

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

1，改变属性的值：

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <!DOCTYPE html>

     <html>

         <head>

             <script src="/jquery/jquery.js"></script>

             <script>

                 $(document).ready(function(){

                   $("button").click(function(){

                     $("#ljh").attr({

                       "href" : "http://blog.csdn.net/liujiahan629629/article/details/16991467",

                       "title" : "刘佳翰博客中的一篇文章"

                     });

                   });

                 });

             </script>

         </head>  

         <body>

             <p><a href="http://blog.csdn.net/liujiahan629629" id="ljh">刘佳翰的博客</a></p>

             <button>改变 href 和 title 值</button>

             <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p>

         </body>

     </html>

 </span>

2,利用回调函数进行修改设置的：

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <!DOCTYPE html>

     <html>

         <head>

             <script src="/jquery/jquery.js"></script>

             <script>

                 $(document).ready(function(){

                   $("#btn1").click(function(){

                     $("#test1").text(function(i,origText){

                       return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

                     });

                   });  

                   $("#btn2").click(function(){

                     $("#test2").html(function(i,origText){

                       return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";

                     });

                   });  

                 });

             </script>

         </head>  

         <body>

             <p id="test1">这是<b>粗体</b>文本。</p>

             <p id="test2">这是另一段<b>粗体</b>文本。</p>

             <button id="btn1">显示旧/新文本</button>

             <button id="btn2">显示旧/新 HTML</button>

         </body>

     </html>

 </span>

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

1，添加的几个方法：

方法名

含义

Append()

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

Prepend()

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

after()

在被选元素之后插入内容

before()

在被选元素之前插入内容

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

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <!DOCTYPE html>

     <html>

         <head>

             <script src="/jquery/jquery.js">

             </script>

             <script>

                 $(document).ready(function(){

                   $("#btn1").click(function(){

                          //添加文本

                     $("p").append(" <b>Appended text</b>.");

                   });  

                   $("#btn2").click(function(){

                         //添加列表

                     $("ol").append("<li>Appended item</li>");

                   });

                 });

             </script>

         </head>  

         <body>

             <p>This is a paragraph.</p>

             <p>This is another paragraph.</p>

             <ol>

             <li>List item </li>

             <li>List item </li>

             <li>List item </li>

             </ol>

             <button id="btn1">追加文本</button>

             <button id="btn2">追加列表项</button>

         </body>

     </html>

 </span>

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

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <!DOCTYPE html>

         <html>

         <head>

             <script src="/jquery/jquery.js"></script>

             <script>

                 function appendText()

                 {

                     var txt1="<p>Text.</p>";              // 以 HTML 创建新元素

                     var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素

                     var txt3=document.createElement("p");

                     txt3.innerHTML="Text.";               // 通过 DOM 来创建文本

                     $("body").append(txt1,txt2,txt3);        // 追加新元素

                 }

             </script>

         </head>

         <body>  

             <p>This is a paragraph.</p>

             <button onclick="appendText()">追加文本</button>  

         </body>

     </html>

 </span>

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

方法名

含义

Remove()

删除被选元素及其子元素

Empty()

从被选元素中删除子元素

四，JQuery操作CSS

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

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

我们来看一个css（）方法的例子：

 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <!DOCTYPE html>

     <html>

         <head>

             <script src="/jquery/jquery.js"></script>

             <script>

                 $(document).ready(function(){

                   $("button").click(function(){

                     $("p").css({"background-color":"yellow","font-size":"200%"});

                   });

                 });

             </script>

         </head>  

         <body>

             <h2>这是标题</h2>

             <p style="background-color:#ff0000">这是一个段落。</p>

             <p style="background-color:#00ff00">这是一个段落。</p>

             <p style="background-color:#0000ff">这是一个段落。</p>

             <p>这是一个段落。</p>

             <button>为 p 元素设置多个样式</button>

         </body>

     </html>

 </span>

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

Jquery尺寸方法：

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

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
 
看一个例子吧：
 [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片

 <span style="font-size:18px;">  <!DOCTYPE html>

     <html>

         <head>

             <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

             </script>

             <script>

                 $(document).ready(function(){

                   $("button").click(function(){

                     var txt="";

                     txt+="Width of div: " + $("#div1").width() + "</br>";

                     txt+="Height of div: " + $("#div1").height() + "</br>";

                     txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";

                     txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);

                     $("#div1").html(txt);

                   });

                 });

             </script>

         </head>

         <body>  

             <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>

             <br>

             <button>显示 div 的尺寸</button>

             <p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>

             <p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>  

         </body>

     </html>

 </span>

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

JQuery(三)——操作HTML和CSS内容的更多相关文章

  1. jQuery之操作样式的css方法

    注意点都在代码里 <style> div { width: 200px; height: 200px; background-color: pink; } </style> & ...

  2. jQuery(三)、属性、CSS

    jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...

  3. jquery ：操作iframe

    原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...

  4. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  5. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  6. jquery 属性操作 attr( ) prop（）css( ）区别

    一 attr () 和 prop( ) 操作属性 谈谈我的总结: 1 2 1 属性的定义,根据W3C手册所述:属性包括,标准属性:id class style title 语言属性 lang dir以 ...

  7. jQuery框架操作CSS

    3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦 ...

  8. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  9. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

随机推荐

  1. MHA自动切换流程

    MHA的全名叫做mysql-master-ha,配置后可以在10-30秒内完成master自动切换,切换过程如下: 1. 检测master的状态,方法是一秒一次“ SELECT 1 As Value” ...

  2. RMAN数据库恢复之对数据库进行完全介质恢复

    RMAN数据库恢复之对数据库进行完全介质恢复环境:控制文件和参数文件SPFILE及归档文件.重做日志文件都在.其它数据文件丢失.恢复方法:使用之前创建的全库备份进行恢复1.删除数据文件: SQL> ...

  3. 浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  4. Java中使用webservice，简化开发（xfire的webservice）

    首先,使用到的jar先导入项目中, xbean-spring-2.8.jar, wsdl4j-1.6.1.jar, commons-httpclient-3.0.jar, commons-codec- ...

  5. iOS之极光推送

    注册JPush账号 JPush官网 下载SDK 下载地址:https://www.jpush.cn 根据文档进行集成 文档:http://docs.jpush.io/guideline/ios_gui ...

  6. 在C#实现托盘效果（转）

    桌面程序的开发中,经常考虑能在状态栏实现托盘快捷操作,托盘程序的实现在API时代,还是相对复杂的,首先在MSDN中可以查看其函数细节, 然后在根据其要求的参数进行复杂的设置.      在.NET时代 ...

  7. weblogic配置domain和删除domain

    weblogic创建域的过程比较简单,但是在创建域之前一定要注意不能存在重名的domain. Domain简单定义为:是一个逻辑管理单元,Domain下面包含着weblogic应用服务器中的所有东西, ...

  8. tp可用的超强第三方图表类库-JpGraph

    日常开发中经常需要做图表,比如线状图.饼状图.柱状图等等,用PHP作图时需要使用复杂抽象的画图函数,或者借助一些网上下载的花柱形图.饼形图的类来实现,没有一个统一的chart类来实现图表的快速开发,非 ...

  9. JVM GC之一找出不可达对象并回收

    JAVA运行时数据区域 1.程序计数器:当前线程所执行的字节码的行号指示器.一个处理器只会执行一条线程中的指令,为了线程切换后能回复到正确的执行位置,所以每条线程都需要一个独立的计数器.各条线程之间互 ...

  10. webpack图片的路径与打包

    转的http://www.cnblogs.com/ghost-xyx/p/5812902.html 今天写 react遇到打包图片,之前都是通过url在css里,没遇到问题,今天在 react里直接用 ...