JavaScript之jQuery够用即可（each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件）

文章目录

一、each循环
二、位置偏移量和大小
- 1、offset就是标签距离视口的偏移量
- 2、position相对于已经定位的父标签的偏移量
- 3、访问尺寸
- 4、测试代码
三、克隆外层标签
四、jQuery实现的模态对话框
五、嵌套返回顶部
六、集体绑定事件

一、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就是40console.log($(".div1").outerHeight());  //包括padding和border边框的高度，40+5+5=50console.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、测试结果

JavaScript之jQuery够用即可（each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件）相关推荐

WEB开发之JavaScript与jQuery够用即可-庞永旺-专题视频课程
WEB开发之JavaScript与jQuery够用即可-49人已学习课程介绍 JavaScript与jQuery完美结合发挥前端编写代码的优越性,提高开发速度.让代码理简洁.解决市面 ...
JavaScript之jQuery够用即可（查找筛选器、属性操作、jQuery文档处理）
文章目录一.筛选器补充二.jQuery属性操作三.jQuery文档处理一.筛选器补充 1.过滤筛选器就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）
文章目录一.事件委托二.JS的动画效果三.扩展插件一.事件委托 1.事件委托其实就是给对象绑定一个事件,但是委托给它所属的每一个子对象了,因此每一个子对象都具有添加进的功能书写格式如下: ...
JavaScript之jQuery够用即可（jQuery的引入、查找选择器、左侧菜单栏）
文章目录一.写在前面二.jQuery的引入二.各种查找选择器四.实例之左侧菜单栏一.写在前面 JQuery世界上使用最广泛的一个库,它是一个轻量级的库,文件大小只有几十k,但是功能却相当强大 ...
Javascript与Jquery知识点
js简介 1 用途:制作页面交互效果如轮播图的切换.Tab栏切换.地图.表单验证等 2 历史背景全称 javascript 与Java语言没关系 javascr ...
js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...
javascript js jquery获取元素位置代码总结
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小首先,要明确两个基本概念. 一张网页的全部 ...

JavaScript之jQuery够用即可（each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件）

文章目录

一、each循环

二、位置偏移量和大小

1、offset就是标签距离视口的偏移量

2、position相对于已经定位的父标签的偏移量

3、访问尺寸

4、测试代码

三、克隆外层标签

四、jQuery实现的模态对话框

五、嵌套返回顶部

六、集体绑定事件

JavaScript之jQuery够用即可（each循环、位置偏移量和大小、克隆外层标签、嵌套返回顶部、集体绑定事件）相关推荐

最新文章

热门文章