Web之jQuery操作DOM
2018-05-04 本文已影响0人
追逐_chase
timg.jpg
DOM：Document Object Model（文档对象模型）
- 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
- 目的其实就是为了能让js操作html元素而制定的一个规范。
1.jQuery操作DOM
1.1操作样式和CSS
1.1.1操作CSS类
- addClass() - 向被选元素添加一个或多个类
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>
</body>
</html>
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行添加/删除类的切换操作
-
css() - 设置或返回样式属性
1.1.2操作样式
- 方式一 设置单一样式
<script type="text/javascript">
//操作样式
$(document).ready(function () {
$("li").css("font-size","30px");
})
</script>
- 方式二 设置多个样式
<script src="jquery-1.11.1.minjs.js"></script>
<script type="text/javascript">
//操作样式 json对象
$(document).ready(function () {
$("li").css({
"font-size":"30px",
"color":"red"
});
});
</script>
1.2操作元素内容和属性
1.2.1 获取属性
- 设置属性： $("标签名").attr("属性名");
$(function () {
// alert($("div").text());
$("input").click(function () {
$(this).attr({
"value":"这是一个input"
})
});
});
- 移除属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
</head>
<body>
<div>这是一个div</div>
<p>这是一个p标签</p>
<button>这是一个按钮事件</button>
<input type="button" value="按钮" title="哈哈">
</body>
</html>
<script src="jquery-1.11.1.minjs.js"></script>
<script type="text/javascript">
$(function () {
$("input").click(function () {
$(this).removeAttr("title");
});
});
</script>
-
text() 设置或返回所选元素的文本内容
-
html() 设置或返回所选元素的内容（包括 HTML 标记）
-
val() 设置或返回表单字段的值
-
append() - 在被选元素的结尾插入内容
-
prepend() - 在被选元素的开头插入内容
-
after() - 在被选元素之后插入内容
-
before() - 在被选元素之前插入内容
-
remove() - 删除被选元素（及其子元素）
-
empty() - 从被选元素中删除子元素
-
clone() -克隆节点
-
jQuery 提供多个处理尺寸的重要方法（设置或者获取的是number）：
- width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
- height()
- innerWidth() 方法返回元素的宽度（包括内边距)
- innerHeight()
- outerWidth() 方法返回元素的宽度（包括内边距和边框）
- outerHeight()
-
坐标值
- $(“div”).offset(); // 获取或设置坐标值 设置值后变成相对定位 json对象{top：50，left：70}
- $(“div”).position(); // 获取坐标值 子绝父相 只能读取不能设置
-
$(“div”).scrollTop(); // 相对于滚动条顶部的偏移
-
$(“div”).scrolllLeft(); // 相对于滚动条左部的偏移
