jquery基础知识3
1.jquery的位置信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
height: 400px;
background-color: yellow;
position: relative;
top: 20px;
}
.box{
width: 200px;
height: 200px;
padding: 10px;
border:1px solid yellow;
background-color: red; top: 10px;
left: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
<ul>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11</li>
<li>11d</li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
//1.获取内容的宽和高
// console.log($(".box").width());
// console.log($(".box").height()); //当2秒之后 让div的盒子的宽度变成400
// delay() 必须要结合动画的方法
// $(".box").delay(2000).hide(3000);
// setTimeout(function () {
// $(".box").width(400);
// },2000) //2.innerWidth() innerHeight()内部的宽和高 包含宽和高+paddding不包含boeder
// $(".box").innerWidth(400); //3.outerWidth() outerHeight() 外部的宽和高 包含所有
// console.log($(".box").outerHeight()); // console.log($(".box").offset().top); //监听滚动事件
$(document).scroll(function () {
// console.log(11111); console.log($(this).scrollTop());
}); })
</script>
</body>
</html>
2.回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
</ul>
<div class="fixTop">回到顶部</div>
<script src="jquery.js"></script>
<script>
$(function () {
$(".fixTop").click(function () {
$("html,body").animate({
"scrollTop":0
},1000)
}) })
</script>
</body>
</html>
3.事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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);
//
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);
//
document.body.addEventListener('click',function(){
console.log('body处于事件冒泡阶段');
}, false);
//
document.documentElement.addEventListener('click',function(){
console.log('html处于事件冒泡阶段');
}, false);
//7.
document.addEventListener('click',function(){
console.log('document处于事件冒泡阶段');
}, false);
}) </script>
</body>
</html>
4.事件冒泡的问题
<!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);
console.log(event.target);
//阻止事件冒泡
event.stopPropagation();
})
$(".father").click(function (event) {
console.log("父盒子被点击了");
console.log(this)
//event.target 如果没有事件冒泡，指的是点击的目标对象
console.log(event.target)
console.log(event.currentTarget)
}) })
</script> </body>
</html>
5.换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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">
<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 (event) {
// //阻止当前默认事件
// event.preventDefault();
// //阻止冒泡
// event.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>
6.事件代理
<!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">zhang</a> </li>
</ul>
<script src="jquery.js"></script>
<script>
$(function () {
//绑定事件 如果使用事件委托的方式 以后的页面不会出现问题
//第二个参数 表示的是后代的选择器
//事件委托（代理）如果未来添加元素了 优先考虑事件委托 $("ul").on("click","#a",function () {
alert(this.innerText)
}) $("ul").append('<li><a href="javascript:void(0);" id="a">qing</a></li>')
})
</script> </body>
</html>
7.合击事件
<!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 () {
console.log("进入")
},function () {
console.log("离开")
}) })
</script> </body>
</html>
8.单双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>按钮</button>
<script src="jquery.js"></script>
<script>
$(function () {
//单双击的时间间隔是300ms
var tim = null;
var count = 0;
$("button").click(function (event) {
count++;
clearTimeout(tim);
var tim = setTimeout(function () {
if (count == 1){
console.log("单机");
}
count = 0;
},300); });
$("button").dblclick(function (event) {
console.log("双击")
});
})
</script> </body>
</html>
9.聚焦和失焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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);//键盘码
// })
//改变时
// $('input[type=text]').change(function () {
// console.log(111);
// })
//选中内容的时候
$('input[type=text]').select(function () {
console.log(1111);
}) </script>
</body>
</html>
10.表单控件事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form表单交互 接收不到 后端返回回来的数据-->
<div>
<input type="text" name="user">
<input type="submit">
</div>
<script src="jquery.js"></script>
<script>
$('input[type=submit]').click(function (event) {
var userName = $("input[type=text]").val();
//发送ajax交互 });
//要是表单就取消自己的默认事件
$('form').submit(function(event) {
event.preventDefault();
})
</script>
</body>
</html>
jquery基础知识3的更多相关文章
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识（1）
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- JQuery基础知识（2）
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- jQuery基础知识准备
一． 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...
- Jquery基础知识；
1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...
随机推荐
- 2019年Java面试题基础系列228道（4）
1.Java 中能创建 volatile 数组吗? 能,Java 中可以创建 volatile 类型数组,不过只是一个指向数组的引用,而不是整个数组.我的意思是,如果改变引用指向的数组,将会受到 vo ...
- IDEA 创建JAVA Maven Web 工程 不能建Sevlet文件
JAVA目录下建包而不是文件夹 需要添加依赖 <dependency> <groupId>javax.servlet</groupId> <artifactI ...
- MApp_ZUI_CTL_MarqueeTextWinProc字串滚动
/////////////////////////////////////////////////////////////////////////////// /// global MApp_ZUI_ ...
- JavaFX窗体设置无边框
public void start(Stage stage) throws Exception { longStart(); Parent root = FXMLLoader.load(getClas ...
- MySQL（八）事务的隔离级别
一.事务的并发问题 1.脏读:事务A读取了事务B更新的数据,然后B回滚操作,那么A读取到的数据是脏数据 2.不可重复读:事务 A 多次读取同一数据,事务 B 在事务A多次读取的过程中,对数据作了更新并 ...
- Jenkins+maven+gitlab自动化部署之docker发布sprint boot项目(七)
Jenkins发布docker应用与发布java应用配置基本一致,需要配置Dockerfile及构建的步骤,步骤如下: 1.jenkins主机构建应用为jar包 2.jenkins主机把生产的jar包 ...
- python基础学习（七）
14.return # print() 可以被执行 def doubelNumber(num): print() print() Afnum = doubelNumber() print(Afnum) ...
- 给定a、b两个文件，各存放50亿个url，每个url各占64字节，内存限制是4G，让你找出a、b文件共同的url?
package com.hadoop.hdfs; import org.apache.hadoop.yarn.webapp.hamlet.Hamlet; import org.junit.Test; ...
- Django模板语言中的Filters的使用方法
Filters可以称为过滤器.下面我们简单介绍是如何使用他的. Filters的语法: {{ value|filter_name:参数 }} Django大概提供了六十个内置过滤器,下面我们简单介绍几 ...
- T-SQL学习笔记
学习T-SQL时记录的笔记,记得并不全也不详细 if和while语句 declare @age int select @age = DATEDIFF(year,stuAge,getdate()) fr ...