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>这个标 ...
随机推荐
- 关于destoon6.0下的ngnix伪静态
关于destoon6.0下的ngnix伪静态配置 ##rewrite nginx rewrite '(.*)\.(asp|aspx|asa|asax|dll|jsp|cgi|fcgi|pl)(.*)' ...
- 【CSP-SJX 2019】T4 散步
Description 传送门 Solution 算法1 32pts 枚举每个时刻,并枚举所有发生的时间,暴力进行更新.发现最多只需要枚举到第 \(L\)个时刻,因为是一个环,所以最多到第L个时刻,所 ...
- VBS实现UTC时间和本地时间互转
本地时间转UTC时间 dim SWDT, datetime, utcTime Set SWDT = CreateObject("WbemScripting.SWbemDateTime&quo ...
- A1047 Student List for Course (25 分)
一.技术总结 首先题目要看清湖,提出的条件很关键,比如for循环的终止条件,特别注意. 还有这个题目主要考虑到vector的使用,还有注意一定要加上using namespace std; 输出格式, ...
- ubuntu python 版本管理
ubuntu 命令行查看 python 目录 $ whereis python # 显示所有得到 python 目录 $ which python # 显示默认的 python 解释器目录 $ wh ...
- 微信小程序跳转web-vie时提示appId无法读取：Cannot read property 'appId' of undefined
微信小程序报web-view错无法读取appId:Cannot read property 'appId' of undefined 问题描述: 我以前一直如下写代码没报错也都是可以使用的,并且小程序 ...
- pixijs shader 扫光加强版
pixijs shader 扫光加强版 const app = new PIXI.Application({ transparent: true }); document.body.appendChi ...
- Vue全选和全不选
HTML代码: <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ...
- NimSystem实现
题目 题目比较长,我直接放截图吧 简述 一个比较经典的类与对象的题目,三个类实现了一个比较简单的系统,具体的每个类的要求可以从上面的题目描述中看出(只要你有耐心读完..),不再赘述,代码如下 代码实现 ...
- C# 消息队列之 RabbitMQ 基础入门
Ø 简介 C# 实现消息队列的方式有很多种,比如:MSMQ.RabbitMQ.EQueue 等,本文主要介绍使用 RabbitMQ 实现消息队列的基础入门.包括如下内容: 1. 什么是消息队列? ...