jQuery操作元素的内容和样式完整实例分析

作者: BYD汽车科研部
来源: 51数据库
2020-08-11

这篇文章主要介绍了jQuery操作元素的内容和样式,结合完整实例形式分析了jquery针对页面元素内容与样式相关操作技巧,需要的朋友可以参考下

本文实例讲述了jQuery操作元素的内容和样式。分享给大家供大家参考，具体如下：

<html>
 <head>
 <title>jQuery操作元素的样式和内容</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");
  //操作对象的内容
  alert(showdiv.html());  //我们获得是对象中的内容，没有进行HTML执行的源代码内容,不论是标签还是内容
  }
  function testHtml2(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素添加操作
  showdiv.html("<b>clannad 赛高!</b>");  //会对HTML标签进行解析执行
  }
  function testHtml3(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素拼接操作
  showdiv.html(showdiv.html()+"<b>clannad 赛高!</b>");  //可以进行字符的拼接,其中showdiv的返回值是一个字符串，我们利用+进行拼接
  }
  function testText1(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素添加操作
  alert(showdiv.text());         //显示的结果不会包含标签
  }
  function testText2(){
  //获取要操作的对象
  var showdiv=$("#showdiv");
  //在对象中进行元素添加操作
  showdiv.text("<b>古河渚 赛高!</b>");  //会把整个文本内容写入div，不会解析标签
  }
  //操作元素的样式
  function testCss1(){
  //获取对象
  var showdiv=$("#showdiv");
  //添加样式
  showdiv.css("background-color","yellow");
  //获取对象的对应元素值
  alert(showdiv.css("width"));    //返回输入属性的值
  }
  function testCss2(){
  //获取对象
  var showdiv=$("#show2");
  //添加样式
  showdiv.css({"background-color":"purple","border":"solid 1px"}); //我们利用{}把多个属性括起来一次设置几种元素样式，不同属性之间用，分割，元素的赋值用：
  }
  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操作元素的样式和内容</h3>
 <hr />
 <input type="button" name="" id="" value="测试对象内容-html" onclick="testHtml1()"/>
 <input type="button" name="" id="" value="测试对象添加内容-html" onclick="testHtml2()"/>
 <input type="button" name="" id="" value="测试对象拼接内容-html" onclick="testHtml3()"/>
 <input type="button" name="" id="" value="测试对象内容-text" onclick="testText1()"/>
 <input type="button" name="" id="" value="测试对象添加内容-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代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。