小编给大家分享一下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> <h4>jQuery操作元素的样式和内容</h4> <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>以上是“jQuery如何获取操作元素的内容和样式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
