jq中
1.jquery位置信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="jquery.js"></script>
<script>
$(function () {
1.获取内容的宽高
console.log($(".box").width()); $(".box").delay(2000).hide(3000);
2.两秒过后宽度变为400
setTimeout(function (argument) {
$(".box").width(400)
},2000);
3.innerWidth() 内部的宽高 包含padding部分
console.log($(".box").innerWidth())
4.同样方法可以改变宽度
$(".box").innerWidth(500)
5.outerWidth()方法外部的宽高 padding+border
console.log($(".box").outerWidth())
6.offset().top 方法检查的到顶部的距离
console.log($('.box').offset().top);
scroll()方法检查得是页面滚动的距离
$(docunmet).scroll(function () {
console.log($(this).scrollTop())
})
})
</script>
</body>
</html>
2.回到顶部方法
利用scrollTop 设置属性 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.fixTop{
position: fixed;
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>
<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="fixTop">回到顶部</div>
<script src="jquery.js"></script>
<script> $(function () {
$('.fixTop').click(function(event) {
//自定义动画效果animate是scrollTop设置为0
$('html,body').animate({
'scrollTop':0 },1000) }); });
</script>
</body>
</html>
回到顶部
3.事件流
所谓事件流类似于鼠标单击的时候有三个阶段:
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script> // document.getElementById('btn').addEventListener('click', function () {
// alert(1);
// },false); window.onload = function(){ var oBtn = document.getElementById('btn'); //1.
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);
//
oBtn.addEventListener('click',function(){
console.log('btn处于事件冒泡阶段');
}, false);
//5
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
//6
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
//7.
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false); }; </script>
</body>
</html>
事件阶段
3.1关于事件冒泡的问题
由于存在冒泡事件 会使得单击事件由于冒泡问题传递的顺序性发生不受控制的事情,面对这种方法可以使用阻止冒泡来解决更准确的问题
event.preventDefault()阻止默认事件
event.stopPropagation() 阻止冒泡
event.target 事件对象 同 this
这里
event.target 如果没有事件冒泡，指的点击的目标对象
可以显示点击的目标对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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);
console.log(event.target);
//阻止事件冒泡
// event.stopPropagation() }); $('.father').mouseenter(function(event) {
console.log(event.type)
console.log('父盒子被点击了');
console.log(this);
// console.log(event.currentTarget);
console.log(event.target);
// event.stopPropagation()
}); $('body').click(function(event) {
console.log(this);
// console.log(event.currentTarget); // event.target 如果没有事件冒泡，指的点击的目标对象
console.log(event.target);
console.log('body被点击了')
});
})
</script>
</body>
</html>
冒泡事件的解决
4.换肤
利用return false 来解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.fu{
position: fixed;
top:0;
left: 0;
width: 100%;
height: 320px;
background-color: red;
display: none;
}
.up{
cursor: pointer;
}
</style>
</head>
<body style="height: 2000px">
<!-- <form action=""></form> -->
<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> <span class="up">收起</span> </ul>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('#changeFu').click(function(e) {
//阻止当前默认的事件
// e.preventDefault();
// //阻止冒泡
// e.stopPropagation();
console.log(111);
$('.fu').slideDown(1000);
// 相当于即阻止了默认事件 又阻止冒泡
return false;
}); $('body,.up').click(function(event) {
$('.fu').slideUp(1000);
}); $('.fu ul li a').click(function(event) {
event.stopPropagation();
$(this).css('color','green').parent('li').siblings('li').find('a').css('color','blue');
}); $('.fu').click(function(event) {
return false;
});
});
</script>
</body>
</html>
换肤
5.事件代理 on
比如在以后项目中新添加一个a 标签在原有ul基础上,可是原来的功能并不适用于这里,所以用到事件代理on()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li class="item1">
<a href="javascript:void(0);" id="a">alex</a>
</li>
<!-- <li>武sir</li> -->
</ul>
<script src="jquery.js"></script>
<script>
$(function () { // 绑定事件 如果使用事件委托的方式 以后的页面不会出现问题 // 第二个参数 表示的是后代的选择器 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 //
// $('ul').on('click','a',function () {
// alert(this.innerText);
// });
$('ul li').click(function () {
alert(this.innerText);
}); $('ul').append('<li><a href="javascript:void(0);">wusir</a></li>'); })
</script>
</body>
</html>
6.合成事件
作用:减少代码量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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>
合成事件
7.单双击事件 需要控制器来分离单双击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>按钮</button>
<script src="jquery.js"></script>
<script>
$(function () {
var time = null;
// 单双击 的时间 间隔 是300ms
// 如果解决 单双击冲突 当做作业
$('button').click(function(event) {
//由于定时器响应时间300 只需要加上一次性控制器就可以啦
clearTimeout(time);
time = setTimeout(function () {
console.log('单机了');
},300);
// 定时器 300ms 一次性定时器
}); $('button').dblclick(function(event) {
//这里需要清空上一次的延迟
clearTimeout(time);
console.log('双机了');
});
})
</script>
</body>
</html>
单双击事件
8.聚焦和失焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text">
<script src="jquery.js"></script>
<script> //加载页面的时候 获取到焦点
$('input[type=text]').focus(); $('input[type=text]').focus(function () {
console.log(1);
}); $('input[type=text]').keydown(function(event) {
console.log(1); /*
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;
}
*/ }); $('input[type=text]').change(function(event) {
console.log(1111);
}); $('input[type=text]').select(function(event) {
console.log(1111);
}); </script>
</body>
</html>
聚焦失焦
jq中的更多相关文章
- jq中数组应用的错误
js中数组可以这样使用: <ul id="ul"> <li value="1">s</li> <li>f< ...
- JQ中mouseover和mouseenter的区别
我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...
- JS模式：jq中简单的模式--》采摘自js设计（tomxu_version）
<!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...
- JQ中的clone()方法与DOM中的cloneNode()方法
JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...
- jq中的ajax
jq对ajax进行了封装,在jq中$.ajax()方法是最底层的方法,第二层是load() , get() , post()方法,第三层是$.getScript()和$.getJSON().基本第二种 ...
- jq中的$操作符与其他js框架冲突
解决办法: jq中存在方法:noConflict() 可返回对 jQuery 的引用. 使用示例: var jq = $.noConflict(); jq(document).ready(functi ...
- jq中的isArray方法分析，如何判断对象是否是数组
<!DOCTYPE html> <html> <head> <title>jq中的isArray方法分析</title> <meta ...
- JQ中$(window).load和$(document).ready区别与执行顺序
JQ中的$(document).ready()大家应该用的非常多,等同于$(function(){}),基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).l ...
- [转]JQ中$(window).load和$(document).ready区别与执行顺序
一.$(window).load().window.onload=function(){}和$(document).ready()方法的区别 1.$(window).load() 和window.on ...
- jq中append()、prepend()、after()、before()的区别
jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...
随机推荐
- luoguP2480 [SDOI2010]古代猪文
题意 考虑所求即为:\(G^{\sum\limits_{d|n}C_n^d}\%999911659\). 发现系数很大,先用欧拉定理化简系数:\(G^{\sum\limits_{d|n}C_n^d\% ...
- Django signal(信号)
Django中提供了"信号调度",用于在框架执行操作时解耦,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. Django 内置信号 Model signals pr ...
- vue中mode hash 和 history的区别
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
- eclipse激活jrebel
1.原本jrebel已经激活了,某天突然失效了.报错如下: JRebel: ERROR Failed to obtain seat. Unable to connect to license serv ...
- Socket超时时间设置
你知道在 Java 中怎么对 Socket 设置超时时间吗?他们的区别是什么?想一想和女朋友打电话的场景就知道了,如果实在想不到,那我们就一起来来看一下是咋回事吧 设置方式 主要有以下两种方式,我们来 ...
- kali渗透综合靶机(十七)--HackInOS靶机
kali渗透综合靶机(十七)--HackInOS靶机 靶机下载地址:https://www.vulnhub.com/hackinos/HackInOS.ova 一.主机发现 1.netdiscover ...
- golang io中io.go解读
目录 1. 整体大纲 2. 接口 读 写 关闭 寻址 3. 函数 读 写 复制 4. 结构体 SectionReader LimitedReader teeReader 5. 备注 根据golang ...
- dubbo（提供者、消费者）基于java的实现
1.安装好jdk.zookeeper以后可以尝试开发代码进行dubbo的学习和练习. 首先创建Dubbo的Provider配置.创建一个maven project工程. RPC框架,不希望Consum ...
- C#,NPOI,Export Generic T Data
1.Nuget 下载NPOI; Install-package NPOI -version 2.4.1 2.下载EF install-package entityframework -version ...
- webapi 导入excel处理数据
参考资料 https://blog.csdn.net/pan_junbiao/article/details/82935992 https://www.cnblogs.com/dansedia ...