一、DOM操作分类 DOM Core：任何一种支持DOM的编程语言都可以使用它，例如：getElementById()。html-DOM：用于处理HTML文档，例如：document
jQuery对javascript中的DOM操作进行了封装，使用起来更加简便。
jQuery中的DOM操作可分为如下几种：
语法如下：
例如：
示例：
<!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>使用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>效果：
--结束END--
本文标题: jQuery操作CSS样式
本文链接: https://www.lsjlt.com/news/142113.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0