jQuery的位置信息
一 JQ的位置信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
</head>
<style>
.child{
height: 200px;
width: 200px;
background-color: green;
padding:30px;
border:10px;
position: absolute;
top:100px;
left:20px;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
<ul>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>桃子</li>
<li>梨子</li>
<li>梨子</li>
<li>梨子</li>
<li>梨子</li>
<li>梨子</li>
<li>梨子</li>
<li>梨子</li>
<li>梨子</li>
<li>梨子</li>
<li>栗子</li>
<li>栗子</li>
<li>栗子</li>
<li>栗子</li>
<li>栗子</li>
<li>栗子</li>
<li>栗子</li>
<li>栗子</li>
<li>栗子</li>
</ul>
<script>
$(function () {
// 1 , 牢记是获取内容的宽和高 谨记不包含 padding border 仅是指内容的宽和高
console.log($(".child").width()); // 200 方法
console.log($(".child").height()); // 200
//2秒之后,让.child盒子宽度变为400px
//运用一次性定时器
setTimeout(function () {
//括号里加数字就是设置宽和高
$(".child").width(400)//直接写数字就可以
},2000);
// 2 innerWidth(),innerHeight() 内部的宽和高+padding, 不包含border
// console.log($(".child").innerWidth()) //结果260 获取
// console.log($(".child").innerHeight()) //结果260
//注意注意 设置innerHeight为600,不改变padding,和border .改变了内容的高
// $(".child").innerHeight(600)
// 3 outerWidth() outerHeight() 包含内容的宽+padding+border 整个盒模型的大小
// console.log($(".child").outerWidth()); //获取
// console.log($(".child").outerHeight()); //获取
//补充:offset() 偏移
// console.log($(".child").offset()) //结果如下图
// console.log($(".child").offset().top) //结果如下图
//监听滚动 scroll方法
$(document).scroll(function () {
console.log(111)
console.log($(this).scrollTop())
})
})
</script>
</body>
</html>
二 回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { position: fixed; /*要多用bottom,right*/ bottom: 20px; right: 30px; width: 100px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: #000; cursor: pointer; } </style> </head> <body> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <div class="active">回到顶部</div> <script src = "jquery.js"></script> <script> $(function () { $(".active").click(function () { // 注意下面的用法 "body,html" $("body,html").animate({ //(js里的scrollTop)指的是"body,html" 的"scrollTop":0 "scrollTop":0 },1000) }) }) </script> </body> </html>
三 事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
window.onload=function () {
var obtn = document.getElementById("btn");
//1,处于事件捕获阶段
//第三个参数，useCapture，是可选的，默认为false，且只有在部分浏览器中支持，true表明该事件监听器绑定在捕获阶段（和目标阶段），false则表明绑定在冒泡阶段（和目标阶段）。
document.addEventListener("click",function(){
console.log('document处于事件捕获阶段')
},true);
//2,
document.documentElement.addEventListener('click',function(){
console.log('html处于事件捕获阶段');
}, true);
//3,
document.body.addEventListener('click',function(){
console.log('body处于事件捕获阶段');
}, true);
//4,
obtn.addEventListener('click',function(){
console.log('btn处于事件捕获阶段');
}, true);
// 'btn处于事件冒泡阶段'
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
//5,body处于事件冒泡阶段
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
//6,'html处于事件冒泡阶段'
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
//7,('document处于事件冒泡阶段'
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
}
</script>
</body>
</html>
五 事件冒泡问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father{ width: 300px; height: 300px; background-color:red; } </style> </head> <body> <div class="father"> <button class="child">按钮</button> </div> <script src="jquery.js"></script> <script> $(function () { ////默认传过来 一个event $(".child").click(function (event) { console.log("此按钮被点击"); console.log(this); // 上面的结果和下面一行的结果一样 console.log(event.currentTarget,222); //event.currentTarget,event.target有区别 看图一 console.log(event.target,111) //阻止事件冒泡 // event.stopPropagation() }); $(".father").click(function (event) { console.log(event.type); console.log("父盒子被点击了"); console.log(this); console.log(event.currentTarget,222); console.log(event.target,111); //阻止事件冒泡 // event.stopPropagation() }); $('body').click(function (event) { console.log('body被点击了') console.log(this); console.log(event.currentTarget,222); // event.target 如果没有事件冒泡，指的点击的目标对象 console.log(event.target,111); }) }) </script> </body> </html>
图 一 event.currentTarget,event.target有区别,点击button按钮 黄色的是consolelog(this)/console.log(event.currentTarget),蓝色的是/console.log(event.target)
图 二 不清除事件冒泡
六 简单的下拉换肤 事件的冒泡,阻止默认事件的发生
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--//行内设置body高度--> <body style="height: 2000px"> <a href='http://www.baidu.com' id="changeFu">换肤</a> <div class="fu"> <ul> <li> <a href="javascript:void(0)">女神降临</a> </li> <li> <a href="javascript:void(0)">明星</a> </li> </ul> <span class="up">收起</span> </div> <script src="jquery.js"></script> <script> $(function () { $('#changeFu').click(function(event) { //阻止当前默认的事件( 即此时此刻的a标签) 重点 重点 重点 event.preventDefault(); //阻止冒泡 event.stopPropagation(); $(".fu").slideDown(1000); //划重点划重点 // return falae ; // 相当于即阻止了默认事件 又阻止冒泡 }); //谨记要想冒泡到父辈,父辈也必须的拥有同类型的事件,不同的时间之间是不能冒泡的 $('body,.up').click(function(event) { $('.fu').slideUp(1000); console.log(555) }); $('.fu ul li a').click(function(event) { // event.stopPropagation(); $(this).css('color','green').parent().siblings("li").find("a").css("color","green"); }); $('.fu').click(function(event) { return false; console.log(222) }); }) </script> </body> </html>
七 事件代理
demo1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li class="item1"> 就这样 </li> <!--<li>武sir</li> 将来要添加进来的元素--> </ul> <script src="jquery.js"></script> <script> $(function () { // 绑定事件 如果使用事件委托的方式 将来要添加进来的元素也具有某个事件 以后的页面不会出现问题 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 //事件委托 // 第二个参数 表示的是后代的选择器 $("ul").on("click","li",function () { alert(this.innerText); }); //将来添加的元素 $("ul").append('<li>大家好</li>') }) </script> </body> </html>
demo 2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li class="item1"> 就这样 <a href="javascript:void(0);" id="a">橘子</a> </li> <!--<li>武sir</li> 将来要添加进来的元素--> </ul> <script src="jquery.js"></script> <script> $(function () { // 绑定事件 如果使用事件委托的方式 将来要添加进来的元素也具有某个事件 以后的页面不会出现问题 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 //事件委托 // 第二个参数 表示的是后代的选择器 $("li").on("click","a",function () { alert(this.innerText); }); //将来添加的元素 $("li").append('<a>苹果</a>') }) </script> </body> </html>
demo 3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li class="item1"> 就这样 <a href="javascript:void(0);" id="a">橘子</a> </li> <!--<li>武sir</li> 将来要添加进来的元素--> </ul> <script src="jquery.js"></script> <script> $(function () { // 第二个参数 表示的是后代的选择器
// 注意注意注意注意 在 li后代中我明确写出只给id=a的标签,绑定此事件,所以后来添加进来的元素,没有此事件驱动 $("li").on("click","#a",function () { alert(this.innerText); }); //将来添加的元素 $("li").append('<a>苹果</a>') }) </script> </body> </html>
八 合成事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button>按钮</button> <script src="jquery.js"></script> <script> $(function () { //下面绑定了两个事件 /* $('button').mouseenter(function(event) { }); $('button').mouseleave(function(event) { }); */ //简便 合成事件 $("button").hover(function () { /* Stuff to do when the mouse enters the element */ console.log("进来了") },function () { /* Stuff to do when the mouse leaves the element */ console.log('离开'); }) }) </script> </body> </html>
九 聚焦和失焦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"> <script src="jquery.js"></script> <script> // 1,一旦加载页面的时候 就获取到焦点 // $("input[type=text]").focus(); //2 ,点击input,执行函数,控制台输出,聚焦 // $('input[type=text]').focus(function () { // console.log(1); // }); /*3, 按下键盘上任意键,即可输出键码 // $('input[type=text]').keydown(function(event) { // console.log(event.keyCode);}) // console.log(event.keyCode); // switch (expression) { // case label_1: // // statements_1 // break; // case label_1: // // statements_1 // break; // case label_1: // // statements_1 // break; // case label_1: // // statements_1 // break; // default: // // statements_def // break; // } */ //4,当输入框输入字符,并且enter,执行函数 见图一 // $('input[type=text]').change(function(event) { // console.log(1111); // }); //5,当输入框输入字符,并选择的时候,执行函数 $('input[type=text]').select(function(event) { console.log(1111); }); </script> </body> </html>
图一
10 表单控件事件
demo1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#"> <input type="text" name="user"> <!--页面直接就会出现一个提交按钮,如果不设置value值--> <input type="submit" > </form> <script src="jquery.js"></script> <script> $("form").submit(function (event) { event.preventDefault(); console.log(1111111111); //前端无法接受来自后端的数据,是就用 aiax $.ajax({ url:`https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976`, type:'get', success:function (data) { console.log(data,6666); }, error:function (err) { console.log(err); } }); }) </script> </body> </html>
demo2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 交互 接收不到 后端返回回来的数据--> <div> <input type="text" name="user"> <input type="submit"> </div> <script src="jquery.js"></script> <script> $('input[type=submit]').click(function(event) { let userName = $('input[type=text]').val(); //发送ajax交互 $.ajax({ url:`http://127.0.0.1:8800/?user=${userName}`, type:'get', success:function(data){ }, error:function (err) { console.log(err) } }); }); </script> </body> </html>
浙公网安备 33010602011771号