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>这个标 ...
随机推荐
- luoguP4343自动刷题机（二分标准题）
https://www.luogu.org/problem/P4343 参考博客:https://www.luogu.org/blog/ofnoname/solution-p4343 这真是一语点醒梦 ...
- linux passwd批量修改用户密码
linux passwd批量修改用户密码 对系统定期修改密码是一个很重要的安全常识,通常,我们修改用户密码都使用 passwd user 这样的命令来修改密码,但是这样会进入交互模式,即使使用脚本也不 ...
- python3.5.3rc1学习一
print ("Hello Pythoh3")print('我喜欢"香蕉"')print('we\'ar go to shoping.')print(" ...
- 【Spring JDBC】spring jdbc 介绍（一）
Spring JDBC模块是Spring框架的基础模块之一.在Spring JDBC模块中,所有的类可以被分到四个单独的包: core 核心包:它包含了JDBC的核心功能.此包内有很多重要的类,包括: ...
- 9.Go-反射、日志和线程休眠
9.1反射 在Go语言标准库中reflect包提供了运行时反射,程序运行过程中动态操作结构体 当变量存储结构体属性名称,想要对结构体这个属性赋值或查看时,就可以使用反射 反射还可以用作判断变量类型 整 ...
- Codeforces Round #552 (Div. 3) EFG(链表+set,dp,枚举公因数)
E https://codeforces.com/contest/1154/problem/E 题意 一个大小为n(1e6)的数组\(a[i]\)(n),两个人轮流选数,先找到当前数组中最大的数然后选 ...
- JAVA基础系列：ThreadLocal
1. 思路 什么是ThreadLocal?ThreadLocal类顾名思义可以理解为线程本地变量.也就是说如果定义了一个ThreadLocal,每个线程往这个ThreadLocal中读写是线程隔离,互 ...
- git 邮箱错误-git log 中发现 XXX@163.com邮箱不符合要求，请务必使用公司邮箱。
场景描述: 重新配置电脑之后,提交了git,邮箱发生错误. git log # 查看日志git reset 版本 # 回到之前的版本,版本回退git config --global user.name ...
- python创建文件时去掉非法字符
1.函数作用 windows系统中文件名不能包含 \ / : * ? " < > |想要创建必须过滤掉这些字符 2.函数实现 import re def filename_fil ...
- 循环队列c++代码
#include <ros/ros.h> #include <string> #include <stdlib.h> #include <iostream&g ...