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 ...
随机推荐
- asp.net编程基础
vs常用两个快捷键:打开即时窗口 ctrl+alt+i : 快速代码格式排版:ctrl+k+d 一:Page:页面 Page.IsPostBack 判断页面是否第一次加载用 if(Page.IsPo ...
- idea删除工作记录
或者
- 虚拟机中使用Samba实现文件共享
首先我们给虚拟机安装samba服务(如果搭的是别的仓库记得开仓库) 输入命令:yum install samba samba服务的配置文件在,我们来看一下/etc/samba/smb.conf 输入命 ...
- 在Ubuntu下安装qt
安装qt前的准备: 安装基础开发包,主要gcc,g++等: sudo apt-get install build-essential 1. 使用qt-opensource-linux-x86-5.5. ...
- Kylin系列（一）—— 入门
因为平常只会使用kylin而不知其原理,故写下此篇文章.文章不是自己原创,是看过很多资料,查过很多博客,有自己的理解,觉得精华的部分的一个集合.算是自己对Kylin学习完的一个总结和概括吧 ...
- 《Mysql - Order By 的工作原理？》
一:概述 - order by 用于 SQL 语句中的排序. - 以 select city,name,age from t where city='杭州' order by name limit ...
- JAVA从文本文件(txt)读取一百万条数据保存到数据库
Java读取大文本文件保存到数据库 1.追求效率 将文件读取到内存,效率比较高,经过测试读取1G左右的文本文件,机器内存消耗达到接近3个G,对内存消耗太大,不建议使用 2.通过调用第三方类库实现 通过 ...
- Python22之lambda表达式
一.Lambda表达式的概念和意义 lambda表达式有称为隐函数,它的定义过程由形参和要返回的表达式组成,它相对于一般函数而言具有以下优势: 1.免去了函数定义的过程,代码变得更加精简 2.省却函数 ...
- 剑指offer11：输入一个整数，输出该数二进制表示中1的个数。其中负数用补码表示。（进制转换，补码反码）
1. 题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 2. 思路和方法 使用移位(<<)和 “| & !”操作来实现.1的二进制是:前面都是0,最后一位 ...
- ~postman基础断言方法
postman官方文档:https://learning.getpostman.com/docs/postman/scripts/test_examples/ 断言1:检查响应主体是否包含字符串 // ...