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程序设计有所帮助。
相关推荐
-
jquery动态添加带有样式的HTML标签元素方法
如下所示: <table class="exhibit_table" style="font-size:13px; text-align:left;"> <tr> <td style="width:80px;" align="right">上传计划单</td> <td style="padding:10px;"><input type=&qu
-
jQuery使用append在html元素后同时添加多项内容的方法
本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法.分享给大家供大家参考.具体分析如下: 下面的代码可以同时在文本段落后添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function appendText() { var txt1="<p&g
-
JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").css("css属性名","属性值") 如 $("span").css("color","red") 将标签为span的字体都设为红色的 $("#id") $("span"
-
jQuery获取选中内容及设置元素属性的方法
获取选中select : $("#id option:selected").val(); 自定义radio: $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio: $("input[name='sex']:checked").val() 设置input不能编辑: $("#cashNum").attr
-
jquery如何判断某元素是否具备指定的样式
分为以下2种情况: 1.如果css写成行内样式,可以通过获取style属性的值来判断,示例如下: 判断id为divid的div元素是否有font-size样式: 复制代码 代码如下: <div id="divid" style="float:left; font-size:12px;"></div> jquery代码如下: jQuery("#divid").each(function(){ var fontSize = $
-
jquery动态增加text元素以及删除文本内容实例代码
这段代码是通过jquery动态增加限定数额的text(本例为5个) ,以及清除文本内容,用到了after()方法追加元素. <!--以下为script代码开始--> 复制代码 代码如下: <script> $(document).ready(function(){ var spotMax = 5;//限定添加text元素的总个数 var afterId = 0;//要追加元素的id var newId=1;//新生成text的id if($('table#vote').size()
-
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
指定元素中包含 id 属性的, 如: $("span[id]") 复制代码 代码如下: <span id="span1" name="S1">AAA</span><br/> <span id="span2" name="S2">BBB</span><br/> <span name="Sx3">CCC<
-
jQuery给元素添加样式的方法详解
本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl
-
使用jQuery内容过滤选择器选择元素实例讲解
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.
-
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
一.判断文本是否为空 复制代码 代码如下: var jqObj = $(this); if(jqObj.text().trim()){ //trim()方法是去空格,$.trim()函数删除提供字符串的所有换行符,空格(包括非中断空格),开始和结束tab.如果这些空白字符在字符串中间发生时,它们将被保留. jqObj.hide(); } 二.判断这个标签下是否有某个已知的元素,比如判断ul标签下是否有li元素 复制代码 代码如下: var jqObj = $(this); if(!jqObj.h
-
JQuery获取与设置HTML元素的内容或文本的实现代码
先来看看演示效果: 欢迎访问我们PHP教程 我们PHP教程 简单易懂的JavaScript魔法 简单易懂的JQuery魔法 $(function(){ $("#btn_1").click(function(){ alert( $(".nm_p").html() ); }); $("#btn_2").click(function(){ alert( $(".nm_p").text() ); }); $("#btn_3&
-
Jquery显示、隐藏元素以及添加删除样式
复制代码 代码如下: <script type="text/javascript"> $(function () { //当input获取焦点后将其兄弟标签label隐藏 $("input").focus(function () { $(this).siblings("label").hide(); }); }); $(function () { //input元素失去焦点 $("input").blur(func