文章目录
一、each循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循环</title>
</head>
<body>
<p>P一号</p>
<p>P二号</p>
<p>P三号</p>
<script src="jquery-3.4.1.js"></script>
<script>
arr=[11,22,33];
//jQuery与js嵌套使用
// for(var i=0; i<arr.length; i++)
// {
// $("p").eq(i).html(arr[i]); //用i索引来取标签的同时用索引取数组的值
// }
//jQuery循环，一参是遍历对象，二参是操作函数
//方式一：遍历数组
// $.each(arr,function(x,y){
// console.log(x); //x是下标（索引）位置
// console.log(y); //y是对应的值
// });
//方式二：遍历某一类标签
$("p").each(function(){
console.log($(this)); //直接获得整个标签对象，之后可以进行各种操作
$(this).html("哈哈哈");
})
</script>
</body>
</html>
二、位置偏移量和大小
1、offset就是标签距离视口的偏移量
console.log($(".div1").offset().top);
console.log($(".div1").offset().left);
console.log($(".div2").offset().top);
console.log($(".div2").offset().left);
2、position相对于已经定位的父标签的偏移量
console.log($(".div1").position().top);
console.log($(".div1").position().left);
console.log($(".div2").position().top);
console.log($(".div2").position().left);
3、访问尺寸
- height()——>只看元素内容的大小，不包括边框和边距
- innerHeight()——>包括padding边框的高度
- outerHeight()——>包括padding和border边框的高度
- outerHeight(true)——>包括padding，border和margin三种边框的高度
4、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery之offset</title>
<style>
*{
margin:0px;
padding:0px;
}
.div1, .div2{
width: 200px;
height: 100px;
}
.div1{
padding: 20px;
border: 5px solid red;
margin: 3px;
background-color: yellowgreen;
}
.div2{
background-color: #2b91af;
}
/*.outer{*/
/* position:relative;*/
/*}*/
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
//offset就是标签距离视口的偏移量
// console.log($(".div1").offset().top);
// console.log($(".div1").offset().left);
// console.log($(".div2").offset().top);
// console.log($(".div2").offset().left);
//position相对于已经定位的父标签的偏移量
// console.log($(".div1").position().top);
// console.log($(".div1").position().left);
// console.log($(".div2").position().top);
// console.log($(".div2").position().left);
//访问尺寸
console.log($(".div1").height()); //不带参数，只返回高度（只看元素内容的大小，不包括边框和边距）
console.log($(".div1").innerHeight()); //包括padding边框的高度，上下各20就是40
console.log($(".div1").outerHeight()); //包括padding和border边框的高度，40+5+5=50
console.log($(".div1").outerHeight(true)); //带一个true参数就包括padding，border和margin三种边框的高度
//带上参数，则设置高度
$(".div1").height("300px");
</script>
</body>
</html>
三、克隆外层标签
1、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>克隆标签jQuery</title>
</head>
<body>
<div class="outer">
<div class="item1">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function add(self) {
var $clone_obj=$($(self)).parent().clone(); //复制一份，赋值给变量$clone_obj
//将克隆对象的加号变成减号
$clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");
$(".outer").append($clone_obj); //在大的div里添加克隆的内容
}
function remove_obj(self) {
$(self).parent().remove(); //删除整个item1，包括button和文本框
}
</script>
</body>
</html>
2、测试效果
四、jQuery实现的模态对话框
1、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态对话框</title>
<style>
.content{
height: 1500px;
background-color: white;
}
.shade{
position: fixed;
top:8px;
left: 8px;
right: 8px;
bottom: 8px;
background-color: grey;
opacity: 0.5; /*透明度*/
}
.model{
width:200px;
height: 200px;
background-color: yellowgreen;
position:fixed;
top:50%;
left:50%;
margin-top: -100px;
margin-left: -100px;
}
/*刚访问时让组件隐藏起来*/
.hide{
display:none;
}
</style>
</head>
<body>
<div class="content">
<button onclick="show(this)">登陆</button>
我是背景层！
</div>
<div class="shade hide"></div>
<!--遮罩层：加在content表面的一层，让原来的页面颜色变淡-->
<div class="model hide">
<button onclick="cancel(this)">取消</button>
model部分
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function show(self){
$(self).parent().siblings().removeClass("hide");
//意为：找到登陆button的父级标签，再操作父级标签同级的非父级标签，
// 即遮罩层和对话框层，去除他们的hide属性值，就会显示出来
}
function cancel(self){
//法一：
// $(self).parent().addClass("hide"); //将父级div（对话框）添加hide隐藏起来
// $(self).parent().prev().addClass("hide"); //将对话框的上一个（遮罩层）添加hide隐藏起来
//法二：
$(self).parent().parent().children(".shade, .model").addClass("hide");
//找父级（对话框）的父级（body标签）下的shade和model属性名的标签，添加hide属性，隐藏起来
}
</script>
</body>
</html>
2、测试结果
五、嵌套返回顶部
1、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部（jQuery）</title>
<style>
*{
margin:0px;
padding:0px;
}
.div2{
width: 100%;
height: 800px;
}
.div1{
background-color: yellowgreen;
overflow: auto; /*防止溢出*/
}
.div1{
height:200px;
}
.div2{
background-color: #2b91af;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 80px;
height: 50px;
background-color: midnightblue;
color:white;
text-align:center;
line-height: 50px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="div1">
<h1>1111</h1>
<h1>2222</h1>
<h1>3333</h1>
<h1>4444</h1>
<h1>5555</h1>
<h1>6666</h1>
<h1>7777</h1>
<h1>8888</h1>
<h1>9999</h1>
</div>
<div class="outer">
<div class="div2">
<!-- <button onclick="toTop2()">小窗口返回顶部</button>-->
<!-- 用jQuery绑定事件-->
<button>小窗口返回顶部</button>
</div>
</div>
<div class="returnTop hide" onclick="toTop()">返回顶部</div>
<script src="jquery-3.4.1.js"></script>
<script>
//绑定滚动事件,用窗口来实现动态监听
window.onscroll=function() {
//滚动条：scrollTop
// console.log($(window).scrollTop()); //不加参数，则返回滚动条顶端的位置
//设置滑动了一段距离才显示返回顶部的图标
if($(window).scrollTop()>=300){
$(".returnTop").removeClass("hide"); //去除隐藏的效果，则显示
}
else{
$(".returnTop").addClass("hide");
}
};
function toTop(){
//返回顶部，则是将滚动条位置变为0
$(window).scrollTop(0); //即将滚动条顶端置为0，就是顶部了
}
// function toTop2(){
// //返回顶部，则是将滚动条位置变为0
// $(".div1").scrollTop(0); //即将滚动条顶端置为0，就是顶部了
// }
//改成jQuery的事件绑定方式
$(".div2 button").click(function(){
$(".div1").scrollTop(0); //即将滚动条顶端置为0，就是顶部了
});
</script>
</body>
</html>
2、测试效果
六、集体绑定事件
1、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>集体绑定事件</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<button class="b1">点我</button>
<script src="jquery-3.4.1.js"></script>
<script>
//绑定事件的简写
// $("ul li").click(function(){
// alert("集体触发！");
// })
//完整写法（不常用）
$("ul li").bind("click",function(){
alert("集体触发！");
})
//解除绑定
$("ul li").unbind("click")
$(".b1").click(function() {
var $ele=$("<li>"); //创建一个li标签，
var len=$("ul li").length; //将len赋值为ul列表的长度
$ele.html((len+1)*1111);
$("ul").append($ele);
})
</script>
</body>
</html>
2、测试结果
