小编给大家分享一下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如何获取操作元素的内容和样式”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
