文章目录
前言
这部分学习jQuery节点操作和元素尺寸,同样也有相关案例,能更好的体会这部分内容。
一、节点操作
1.创建、追加元素方法
创建节点:$("<li></li>")
追加节点:
1.向父元素最后追加
(1)父元素jq对象.append(新创建的jq对象)
(2)新创建的jq对象.appendTo(父元素jq对象或选择器)
2.向父元素前面追加
(1)父元素jq对象.prepend(新创建的jq对象)
(2)新创建的jq对象.prependTo(父元素jq对象或选择器)
3.向元素后面追加新的兄弟
(1)jq对象.after(新创建的jq对象)
(2)新创建的jq对象.insertAfter(jq对象或选择器)
4.向元素前面追加新的兄弟
(1)jq对象.before(新创建的jq对象)
(2)新创建的jq对象.insertBefore(jq对象或选择器)
<!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>Document</title>
</head>
<body>
<div class="box">
<h2>标题</h2>
<p>段落</p>
</div>
<ul>
<li>这是原有的标签</li>
</ul>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
//获取元素
var $ul = $("ul")
var $lis = $("ul li")
//创建元素
var $li = $("<li>(1)新增的li标签</li>")
//向父元素最后追加
// $ul.append($li)
// $li.appendTo("ul")
// $li.appendTo($ul)
//向父元素前面追加
// $ul.prepend($li)
// $li.prependTo($ul)
//向元素后面追加
// $li.insertAfter($lis)
// $lis.after($li)
//向元素前面追加
$li.insertBefore($lis)
// $lis.after($li)
</script>
</body>
</html>
2.删除、清空元素
1.使用要删除的jq对象.remove()方法就可以将元素删除
2.清空元素
(1)empty()方法,可以删除内部元素,也可以删除相关此元素的事件,推荐使用。
(2)html(“”),将空字符串替换内部要清除的元素,也可以删除,但不会删除相关事件。
<!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>Document</title>
</head>
<body>
<div class="box">
<p>段落</p>
<h2>标题</h2>
</div>
<ul>
<li>这是第 1 个标签</li>
<li>这是第 2 个标签</li>
<li class="third">这是第 3 个标签</li>
<li>这是第 4 个标签</li>
<li>这是第 5 个标签</li>
</ul>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 删除元素自己本身
$(".third").remove()
//清空元素
//方法1 empty()
// $(".box").empty()
//方法2 html("")
$(".box").html("")
</script>
</body>
</html>
3.克隆元素
使用clone()方法,参数为false表示只复制内容,不复制事件;参数为true时也复制事件。
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 20px;
}
.demo {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<h2>标题1</h2>
<p>段落1</p>
</div>
<div class="demo">
<h2>标题2</h2>
<p>段落2</p>
</div>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(".box").click(function(){
alert("你好");
});
// 获取 box 元素
var $box = $(".box")
//克隆元素
// $newBox = $box.clone(false)
$newBox = $box.clone(true)
//追加元素
$("body").append($newBox)
</script>
</body>
</html>
二、元素尺寸
1.操作元素尺寸的方法
width区域:width
获取:jq对象.width()
设置:jq对象.width(数字)
padding区域:
获取:jq对象.innerWidth()
设置:jq对象.innerWidth(数字)
border区域:
获取:jq对象.outerWidth()
设置:jq对象.outerWidth(数字)
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
padding: 50px;
border: 20px solid skyblue;
margin: 30px;
background: pink;
}
</style>
</head>
<body>
<div class="box">123</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
var $box = $(".box");
//width内容区域的大小
// console.log($box.width())
// console.log($box.height())
// $box.width(300)
//padding以内区域的大小
// console.log($box.innerWidth())
// $box.innerWidth(400) //设置的是width的大小 不会设置给padding
//border以内区域的大小
console.log($box.outerWidth())
$box.outerWidth(500) //设置的是width的大小,不会设置给padding和border
</script>
</body>
</html>
2.操作元素的位置
(1)距离文档的位置
offset()返回一个含有left和top值的对象
(2)距离上一个含有定位参考元素的位置
position()返回一个含有left和top值的对象
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.fa {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
margin: 50px;
}
.son {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
// 获取元素
var $son = $(".son")
//获取元素距离文档的位置
var $offsetObj = $son.offset()
console.log($offsetObj)
console.log($offsetObj.left)
console.log($offsetObj.top)
//获取元素距离文档的位置
var $posObj = $son.position()
console.log($posObj)
console.log($posObj.left)
console.log($posObj.top)
</script>
</body>
</html>
3.操作滚动条卷走的距离
scrollTop可以获取和设置滚动条卷走的距离。
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 4000px;
}
.box {
width: 300px;
height: 300px;
border: 1px solid #333;
margin: 50px auto;
font: 16px/32px "宋体";
overflow: auto;
}
input {
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<div class="box">
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
<p>段落内容</p>
</div>
<input type="button" value="返回顶部" class="backtop">
<script src="js/jquery-1.12.4.js"></script>
<script>
// 给元素添加滚动事件
$(".box").scroll(function () {
console.log($(this).scrollTop())
})
//给整个文档添加滚动事件
$(document).scroll(function () {
console.log($(this).scrollTop())
})
//返回顶部按钮事件
$(".backtop").click(function () {
$(document).scrollTop(0)
})
</script>
</body>
</html>
三、综合案例
1.固定导航和返回顶部
2.楼梯导航
总结
jQuery节点操作和元素尺寸这部分就学习到这里啦,接下来是jQuery的最后一部分jQuery的事件操作和插件。每天坚持学习前端~