當(dāng)前位置：
首頁(yè) >
jQuery（三）：样式操作
發(fā)布時(shí)間：2025/3/14
13
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jQuery（三）：样式操作
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、DOM操作分類
二、jQuery中的DOM操作
jQuery對(duì)JavaScript中的DOM操作進(jìn)行了封裝，使用起來(lái)更加簡(jiǎn)便。
jQuery中的DOM操作可分為如下幾種：
三、樣式操作
1、使用css()為指定的樣式設(shè)置樣式值，語(yǔ)法如下：
例如：
示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>樣式操作</title><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 設(shè)置單個(gè)樣式//$("p").css("border","1px solid red");// 設(shè)置多個(gè)樣式 $("p").css({"border":"1px solid blue","background-color":"green","color":"yellow"});});</script> </head> <body><p>Hello World!</p> </body> </html>?
效果：
補(bǔ)充：
JSON簡(jiǎn)介
JSON（JavaScript Object Notation）是一種輕量級(jí)的數(shù)據(jù)交換格式。其語(yǔ)法如下：
JSON的取值方法
可以使用點(diǎn)號(hào)表示法來(lái)獲取。
例如：
例如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JSON示例</title><script>// 獲取年齡var student={"name":"Tom","age":28};alert(student.age);var json={"student":[{"name":"Tom","age":24},{"name":"Kevin","age":25},{"name":"James","age":22}]};alert(json.student[2].age);</script> </head> <body> </body> </html>?
2、追加和移除樣式
使用jQuery可以同時(shí)追加或移除一個(gè)、多個(gè)樣式，語(yǔ)法如下：
示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>追加和移除樣式演示示例</title><style>h2{margin: 0px;padding: 0px;font-size: 30px;margin-bottom: 10px;}/*邊框樣式*/.borderStyle{border: 2px solid red;}/*背景色樣式*/.bgcolorStyle{background-color: green;}</style><!--引入jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// 獲取h2元素var h2Element=$("h2");// 追加邊框樣式 $("#btnAdd").click(function(){h2Element.addClass("borderStyle");});// 追加背景色樣式 $("#btnAddBgcolor").click(function(){h2Element.addClass("bgcolorStyle");});// 同時(shí)追加邊框和背景色樣式 $("#btnAddMulit").click(function(){h2Element.addClass("borderStyle bgcolorStyle");});// 移除邊框樣式 $("#btnRemove").click(function(){h2Element.removeClass("borderStyle");});// 移除背景色樣式 $("#btnRemoveBgcolor").click(function(){h2Element.removeClass("bgcolorStyle");});$("#btnRemoveMulit").click(function(){h2Element.removeClass("borderStyle bgcolorStyle");});});</script> </head> <body><h2>練習(xí)使用jQuery追加和移除樣式</h2><input type="button" id="btnAdd" value="追加邊框樣式" /><input type="button" id="btnAddBgcolor" value="追加背景色樣式" /><input type="button" id="btnAddMulit" value="同時(shí)追加邊框和背景色樣式" /><input type="button" id="btnRemove" value="移除邊框樣式" /><input type="button" id="btnRemoveBgcolor" value="移除背景色樣式" /><input type="button" id="btnRemoveMulit" value="同時(shí)移除邊框和背景色樣式" /> </body> </html>?
效果：
?
轉(zhuǎn)載于:https://www.cnblogs.com/dotnet261010/p/9735092.html
總結(jié)
以上是生活随笔為你收集整理的jQuery（三）：样式操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [leetcode]83.Remove
- 下一篇： 四步法分析定位生产环境下MySQL上千条