快捷導(dǎo)航

jQuery操作元素的內(nèi)容和樣式完整實(shí)例分析

更新時間：2020年01月10日 08:50:58 作者：qq_42412646

這篇文章主要介紹了jQuery操作元素的內(nèi)容和樣式,結(jié)合完整實(shí)例形式分析了jquery針對頁面元素內(nèi)容與樣式相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery操作元素的內(nèi)容和樣式。分享給大家供大家參考，具體如下：

<html>
 <head>
 <title>jQuery操作元素的樣式和內(nèi)容</title>
 <meta charset="UTF-8"/>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
  //操作元素的樣式
  function testHtml1(){
  //獲取要操作的對象
  var showdiv=$("#showdiv");
  //操作對象的內(nèi)容
  alert(showdiv.html());  //我們獲得是對象中的內(nèi)容，沒有進(jìn)行HTML執(zhí)行的源代碼內(nèi)容,不論是標(biāo)簽還是內(nèi)容
  }
  function testHtml2(){
  //獲取要操作的對象
  var showdiv=$("#showdiv");
  //在對象中進(jìn)行元素添加操作
  showdiv.html("<b>clannad 賽高!</b>");  //會對HTML標(biāo)簽進(jìn)行解析執(zhí)行
  }
  function testHtml3(){
  //獲取要操作的對象
  var showdiv=$("#showdiv");
  //在對象中進(jìn)行元素拼接操作
  showdiv.html(showdiv.html()+"<b>clannad 賽高!</b>");  //可以進(jìn)行字符的拼接,其中showdiv的返回值是一個字符串，我們利用+進(jìn)行拼接
  }
  function testText1(){
  //獲取要操作的對象
  var showdiv=$("#showdiv");
  //在對象中進(jìn)行元素添加操作
  alert(showdiv.text());         //顯示的結(jié)果不會包含標(biāo)簽
  }
  function testText2(){
  //獲取要操作的對象
  var showdiv=$("#showdiv");
  //在對象中進(jìn)行元素添加操作
  showdiv.text("<b>古河渚 賽高!</b>");  //會把整個文本內(nèi)容寫入div，不會解析標(biāo)簽
  }
  //操作元素的樣式
  function testCss1(){
  //獲取對象
  var showdiv=$("#showdiv");
  //添加樣式
  showdiv.css("background-color","yellow");
  //獲取對象的對應(yīng)元素值
  alert(showdiv.css("width"));    //返回輸入屬性的值
  }
  function testCss2(){
  //獲取對象
  var showdiv=$("#show2");
  //添加樣式
  showdiv.css({"background-color":"purple","border":"solid 1px"}); //我們利用{}把多個屬性括起來一次設(shè)置幾種元素樣式，不同屬性之間用，分割，元素的賦值用：
  }
  function testAddClass(){
  //獲取對象
  var div=$("#show2");
  //添加一個類屬性
  div.addClass("common");
  //疊加類屬性
  div.addClass("word");   //一個對象可以添加多個類屬性，注：如果原對象含有這個屬性，類屬性的值不會將其覆蓋
  }
  function testRemoveClass(){
  //獲取對象
  var div=$("#show2");
  //添加一個類屬性
  div.remove("word");  //移除對象的一個類屬性
  }
 </script>
 <style type="text/css">
  #showdiv{
  width: 300px;
  height: 300px;
  border: solid 1px;
  /*background-color: yellow;*/
  }
  #show2{
  width: 300px;
  height: 300px;
  /*border: solid 1px yellow;*/
  /*background-color: purple;*/
  }
  .common{
  width: 300px;
  height: 300px;
  border: solid 2px yellow;
  background-color: red;
  }
  .word{
  font-size: 40px;
  font-size: bold;
  }
 </style>
 </head>
 <body>
 <h3>jQuery操作元素的樣式和內(nèi)容</h3>
 <hr />
 <input type="button" name="" id="" value="測試對象內(nèi)容-html" onclick="testHtml1()"/>
 <input type="button" name="" id="" value="測試對象添加內(nèi)容-html" onclick="testHtml2()"/>
 <input type="button" name="" id="" value="測試對象拼接內(nèi)容-html" onclick="testHtml3()"/>
 <input type="button" name="" id="" value="測試對象內(nèi)容-text" onclick="testText1()"/>
 <input type="button" name="" id="" value="測試對象添加內(nèi)容-text" onclick="testText2()"/>
 <hr />
 <input type="button" name="" id="" value="測試對象樣式" onclick="testCss1()"/>
 <input type="button" name="" id="" value="測試對象樣式---json" onclick="testCss2()"/>
 <input type="button" name="" id="" value="測試對象添加類樣式" onclick="testAddClass()"/>
 <input type="button" name="" id="" value="測試對象移除類樣式" onclick="testRemoveClass()"/>
 <hr />
 <div id="showdiv">
  <b>古河渚 賽高!</b>
 </div>
 <div id="show2">
  Clannad After Story
 </div>
 </body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: