jQuery操作元素的内容和样式完整实例分析
程序员文章站
2022-04-09 16:43:45
本文实例讲述了jquery操作元素的内容和样式。分享给大家供大家参考，具体如下：
jqu...</div>
<div class="content">
<p>本文实例讲述了jquery操作元素的内容和样式。分享给大家供大家参考，具体如下：</p>
<div class="jb51code">
<pre class="brush: javascript;">
<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>
</pre>
</div>
<p>感兴趣的朋友可以使用<span style="color: #ff6600"><strong>在线html/css/javascript代码运行工具</strong></span>：<a target="_blank" href="http://tools.jb51.net/code/htmljsrun" rel="nofollow">http://tools.jb51.net/code/htmljsrun</a>测试上述代码运行效果。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/525038.html">
关于大暑节气有什么含义？大暑节气主要出现在几月？ </a>
</p>
<p>
下一篇： <a href="/article/525040.html">
Android开发实现录屏小功能 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1664851.html" target="_blank" title="jQuery HTML获取内容和属性操作实例分析">
<h2>
jQuery HTML获取内容和属性操作实例分析 </h2>
</a>
</li>
<li>
<a href="/article/1614614.html" target="_blank" title="jQuery操作元素的内容和样式完整实例分析">
<h2>
jQuery操作元素的内容和样式完整实例分析 </h2>
</a>
</li>
<li>
<a href="/article/1614585.html" target="_blank" title="jquery选择器和属性对象的操作实例分析">
<h2>
jquery选择器和属性对象的操作实例分析 </h2>
</a>
</li>
<li>
<a href="/article/1603924.html" target="_blank" title="JS和jquery操作css样式实例分析">
<h2>
JS和jquery操作css样式实例分析 </h2>
</a>
</li>
<li>
<a href="/article/1538452.html" target="_blank" title="JQuery操作tr和td内容的方法实例">
<h2>
JQuery操作tr和td内容的方法实例 </h2>
</a>
</li>
<li>
<a href="/article/1323276.html" target="_blank" title="jQuery动态生成的元素绑定事件操作实例分析">
<h2>
jQuery动态生成的元素绑定事件操作实例分析 </h2>
</a>
</li>
<li>
<a href="/article/758336.html" target="_blank" title="jquery操作select元素和option的实例代码_jquery">
<h2>
jquery操作select元素和option的实例代码_jquery </h2>
</a>
</li>
<li>
<a href="/article/633050.html" target="_blank" title="表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法 ，事件的添加与派发">
<h2>
表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象，获取元素计算样式，classList 对象常用方法 ，事件的添加与派发 </h2>
</a>
</li>
<li>
<a href="/article/590074.html" target="_blank" title="jquery选择器和属性对象的操作实例分析">
<h2>
jquery选择器和属性对象的操作实例分析 </h2>
</a>
</li>
<li>
<a href="/article/555782.html" target="_blank" title="JS和jquery操作css样式实例分析">
<h2>
JS和jquery操作css样式实例分析 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>