小編給大家分享一下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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
