文档节点处理
* 创建一个标签对象*
语法
$("<标签名>")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='jquery-3.2.1.js'></script>
</head>
<body>
<div class="outer">
</div>
<script>
var $ele=$("<p>"); // <p></p>
$ele.text("hello world"); // <p>hello world</p>
</script>
</body>
</html>
创建节点示例
* 标签内部插入标签对象*
语法
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
注意:可以使用function添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="outer">
<p>abc</p>
</div>
<script>
//内部插入
var $ele=$("<p>"); // <p></p>
$ele.text("hello world"); // <p>hello world</p>
// 追加到最后的位置
$(".outer").append($ele);
// $ele.appendTo(".outer");
// 添加到最上面的位置
var $ele2=$("<p>")
$ele2.text("thank you");
$(".outer").prepend($ele2);
// $ele.prependTo(".outer")
</script>
</body>
</html>
内部插入示例
* 标签外部插入标签对象*
语法
$("").empty() //内容删除
$("").remove([expr] //整个标签删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="outer">
<p>abc</p>
</div>
<script>
// 删除节点,连标签清除
// $(".outer").remove()
// 清空节点,内容清除
$(".outer").empty();
</script>
</body>
</html>
删除节点示例
* 替换节点*
语法
$("").replaceWith(content|fn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="outer">
<p>abc</p>
</div>
<script>
// 替换节点
var $ele=$("<p>");
$ele.text("hello world");
$(".outer p").replaceWith($ele);
</script>
</body>
</html>
替换节点示例
* 拷贝节点*
语法
$("").clone([Even[,deepEven]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="outer">
<p>abc</p>
</div>
<script>
// 拷贝节点
var $outer=$(".outer").clone();
$(".outer").after($outer)
</script>
</body>
</html>
拷贝节点示例
动画效果
* 显示与隐藏*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<p>hello world</p>
<img src="http://img1.imgtn.bdimg.com/it/u=1020860587,2909379450&fm=26&gp=0.jpg" alt="">
<hr>
<button class="hides">hide</button>
<button class="shows">show</button>
<button class="toggle">toggle</button>
<script>
//注意:不加时间试一试
//点击事件触发隐藏
$(".hides").click(function () {
$("img").hide(1000)
});
//点击事件触发显示
$(".shows").click(function () {
$("img").show(1000)
});
//点击事件触发显示和隐藏的切换
$(".toggle").click(function () {
$("img").toggle(1000)
})
</script>
</body>
</html>
显示与隐藏示例
* 滑动*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='jquery-3.2.1.js'></script>
</head>
<body>
<p style="background-color: #2459a2;color: white;text-align: center;line-height: 40px">hello world</p>
<img src="http://img1.imgtn.bdimg.com/it/u=1020860587,2909379450&fm=26&gp=0.jpg" alt="">
<hr>
<button class="slideUp">slideUp</button>
<button class="slideDown">slideDown</button>
<button class="slideToggle">slideToggle</button>
<script>
//注:不加时间试一试
//向上滑动消失
$(".slideUp").click(function () {
$("p").slideUp(1000);
});
//向下滑动出现
$(".slideDown").click(function () {
$("p").slideDown(1000)
});
//向上向下切换
$(".slideToggle").click(function () {
$("p").slideToggle(1000)
})
</script>
</body>
</html>
滑动示例
* 淡入淡出*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='jquery-3.2.1.js'></script>
</head>
<body>
<p style="background-color: #2459a2;color: white;text-align: center;line-height: 40px">hello world</p>
<img src="http://img1.imgtn.bdimg.com/it/u=1020860587,2909379450&fm=26&gp=0.jpg" alt=""><hr>
<button class="fadeIn">fadeIn</button>
<button class="fadeOut">fadeOut</button>
<button class="fadeToggle">fadeToggle</button>
<button class="fadeTo">fadeTo</button>
<script>
//淡入
$(".fadeIn").click(function () {
$("img").fadeIn(2000);
});
//淡出
$(".fadeOut").click(function () {
$("img").fadeOut(2000)
});
//淡出淡入切换
$(".fadeToggle").click(function () {
$("img").fadeToggle(1000)
})
//淡出或淡入的程度
$(".fadeTo").click(function(){
$("img").fadeTo(1000,0.4);
})
</script>
</body>
</html>
淡入和淡出示例
* 回调函数*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<button>hide</button>
<p>hello world</p>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
</body>
</html>
回调函数示例
CSS操作
* CSS位置操作*
语法
$("").offset([coordinates]) //元素移动,定位对象是整个页面,
$("").position() //元素偏移(定位对象和offset不一样,是通过父亲标签定位)
$("").scrollTop([val]) //上下滚动条的值
$("").scrollLeft([val]) //左右滚动条的值
offset元素移动示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
.box2{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
</style>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<button>change</button>
<script>
//元素移动的是根据整个页面的距离实现的,通过改变元素的上侧、左侧和整个页面的上侧和左侧的距离改变
$("button").click(function () {
//.box1向下移动200px
$(".box1").offset({left:0,top:200});
//.box2向下移动400px,向右移动200px
$(".box2").offset({left:200,top:400});
})
</script>
</body>
</html>
元素移动示例
position元素偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: wheat;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
.outer{
position: relative;
}
</style>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="box1"></div>
<div class="outer">
<div class="box2"></div>
</div>
<button>change</button>
<script>
$("button").click(function () {
alert("left"+$(".box1").position().left + "top" + $(".box1").position().top)
alert("left"+$(".box2").position().left + "top" + $(".box2").position().top)
</script>
</body>
</html>
position示例
scrollTop滚动条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 100%;
height: 2000px;
background-color: wheat;
}
#returnTop{
width: 70px;
height: 40px;
background-color: #2459a2;
color: white;
font-weight: 800;
text-align: center;
line-height: 40px;
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}
</style>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="box"></div>
<div id="returnTop">TOP</div>
<script>
//scroll事件,滚动进度条时候
$(window).scroll(function () {
console.log($(window).scrollTop());
if($(window).scrollTop()>200){
$("#returnTop").show();
}
else {
$("#returnTop").hide();
}
});
//scrollTop括号里加数字,表示将滚动条位置滚至数字像素,不加数字表示取值
$("#returnTop").click(function () {
$(window).scrollTop(0)
})
</script>
</body>
</html>
scrollTop示例
* 尺寸操作*
语法
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
padding: 50px;
border: 10px red solid;
background-color: green;
margin: 20px;
}
</style>
<script src='../day47/jquery-3.2.1.js'></script>
</head>
<body>
<div class="box">DIV</div>
<script>
console.log($(".box").height()); //内容区高度200
console.log($(".box").width()); //内容区宽度200
console.log($(".box").innerHeight()); //内容区+padding区高度300
console.log($(".box").innerWidth()); //内容区+padding区宽度300
console.log($(".box").outerHeight()); //内容区+padding区+border边框区高度 320
console.log($(".box").outerWidth()); //内容区+padding区+border边框区宽度 320
console.log($(".box").outerHeight(true)); ///内容区+padding区+border边框区宽度+margin区高度 320
console.log($(".box").outerWidth(true)); ///内容区+padding区+border边框区宽度+margin区高度 320
</script>
</body>
</html>
尺寸操作示例