jQuery（三）：样式操作
生活随笔
收集整理的這篇文章主要介紹了
jQuery（三）：样式操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、DOM操作分類
二、jQuery中的DOM操作
jQuery對JavaScript中的DOM操作進行了封裝，使用起來更加簡便。
jQuery中的DOM操作可分為如下幾種：
三、樣式操作
1、使用css()為指定的樣式設置樣式值，語法如下：
例如：
示例：
<!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(){// 設置單個樣式//$("p").css("border","1px solid red");// 設置多個樣式 $("p").css({"border":"1px solid blue","background-color":"green","color":"yellow"});});</script> </head> <body><p>Hello World!</p> </body> </html>?
效果：
補充：
JSON簡介
JSON（JavaScript Object Notation）是一種輕量級的數據交換格式。其語法如下：
JSON的取值方法
可以使用點號表示法來獲取。
例如：
例如：
<!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可以同時追加或移除一個、多個樣式，語法如下：
示例：
<!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");});// 同時追加邊框和背景色樣式 $("#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>練習使用jQuery追加和移除樣式</h2><input type="button" id="btnAdd" value="追加邊框樣式" /><input type="button" id="btnAddBgcolor" value="追加背景色樣式" /><input type="button" id="btnAddMulit" value="同時追加邊框和背景色樣式" /><input type="button" id="btnRemove" value="移除邊框樣式" /><input type="button" id="btnRemoveBgcolor" value="移除背景色樣式" /><input type="button" id="btnRemoveMulit" value="同時移除邊框和背景色樣式" /> </body> </html>?
效果：
?
轉載于:https://www.cnblogs.com/dotnet261010/p/9735092.html
總結
以上是生活随笔為你收集整理的jQuery（三）：样式操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [leetcode]83.Remove
- 下一篇： 【模板】扩展中国剩余定理（EXCRT）