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>这个标 ...
随机推荐
- 3.git 远程
首次拉取代码的话.可以使用 git clone 这个指令 git clone https://github.com/guohongze/adminset.git 带密码方式 git clone htt ...
- Django之ContentType,GenericRelation, GenericForeignKey
contenttypes 是Django内置的一个应用,可以追踪项目中所有app和model的对应关系,并记录在ContentType表中. models.py文件的表结构写好后,通过makemigr ...
- 《滴滴自研分布式 NoSQL 数据库 Fusion 的演进之路》
SSD:采用闪存: 读的速度很快:写入数据时,因为需要通过加压的方式对存储单元进行电子填充,所以速度略慢:擦除速度最慢,擦除块的时间在ms级.在使用SSD的时,需要考虑到SSD的读写不平衡的特性. 滴 ...
- luoguP4094 [HEOI2016/TJOI2016]字符串
题意 考虑二分答案\(mid\),现在我们要判断\(s[c...c+mid-1]\)是否在\(s[a...b]\)出现过. 首先找到\(s[c...c+mid-1]\)所在的状态: 建出\(paren ...
- 正睿暑期培训day3考试
链接 A 可以发现一个小棍的贡献是使得左右两列上的球位置互换.所以只要找出哪两个球会经过当前位置,然后swap一下就行了.. 考场上调了2.5h,依然没过样例.赛后发现忘了排序!!!!... /* * ...
- HBase开发错误记录(java.net.UnknownHostException: unknown host: hadoop111)
windows下开发HBase应用程序,HBase部署在linux环境中, 在运行调试时可能会出现无法找到主机,类似异常信息如下: java.net.UnknownHostException: unk ...
- 【VSFTP服务】vsftpd文件传输协议
vsftpd文件传输协议 系统环境:CentOS Linux release 7.6.1810 (Core) 一.简介 FTP(文件传输协议)全称是:Very Secure FTP Server. ...
- Wamp 下运行 CGI 笔记
虽然假期的余额不足了,但是仔细想想放假又有多少事情可以做呢?休息的差不多了,还是上班的好,长时间的休息人就废了.同意的举手,不同意的就算了. httpd.conf 的配置 我这里使用的是 Wamp 的 ...
- layui 数据表格里面的html代码转义
table.render({ elem: '#release_table' ,url:'data_list' ,where: {table: 'release'} //两步转义转义,先将原始数据 ...
- Elasticsearch搜索调优权威指南 （1/3）
本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/qwkZKLb_ghmlwrqMkqlb7Q英文原文:https://qbox.io/blog/ela ...