day01 jQuery 介绍 jQuery的操作 事件三步走 入口函数 动画
1.jQuery的概念
全称: JavaScript query
简称: jq,是库,对部分js功能的封装: 封装了入口函数带来的问题, 兼容性问题, DOM操作, 事件, ajax等
js的思想: 写的多做的少, 兼容性也没做
jQuery的核心思想: write less, do more
使用时: jQuery中不要出现js的操作, 不通用
2.npm 包管理器 (node package manager)
这个工具在哪: 前端的后台语言nodesjs会带来npm
使用npm安装包: npm install jquery -S
3.jquery的下载安装
下载地址: 官网下载 https://jquery.com/
下载地址: 也可在 https://www.bootcdn.cn/下载
文件说明:
jquery.js 未压缩的, 我们可以看懂的,开发环境的 几百KB
jquery.min.js 压缩过的, 混淆过的,生产环境的 几十KB
二.jQuery的操作
1.jQuery对DOM的操作
1.1.jquery.js文件解析
文件开头定义jQuery: 是一个函数对象
文件末尾: 把jQuery赋值给了 $ 变量,方便使用时书写
var
version = "3.4.6",
jQuery = function (selector,context) {
return new jQuery.fn.init(selector,context);
};
if (!noGlobal){
window.jQuery = window.$ = jQuery;
1.2.事件的三步走
1).$('#box') //jQuery.fn.init [div#box.box] 获取的是标签的jQuery对象: 里面都是jQuery的各种方法
2).$('#box').click(function () { ...} //click()是函数,需要一个参数: 一个回调函数
3).{ $('.wrap').css('color','blue'); } //jQuery对样式的操作用的是css,不是style
{ $('.box').css({'background-color':'yellow'}) } //改多个css样式时,参数用字典
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="wrap">bajie</div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$('#box').click(function () {
$('.wrap').css('color','red');
$('.wrap').css({
'background-color': 'blue', //用'backgroud-color'还是'backgroudColor'还是backgroudColor 不用纠结了: jQuery做了兼容; 用中杠时要用引号
width:800 //px 可以不写, 但是写的时候'800px'要用引号
})
})
</script>
</body>
</html>
2.jQuery的入口函数
2.1.建议使用jQuery时,一定要使用它的入口函数
因为已经解决了加载的一系列问题: 文档,js,图片: 完美的顺序
因为解决了多个入口函数的压盖问题
2.2.入口函数的编写:
方式一:$(document).ready(function () { ... });
方式二:$(function(){ ... });
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
console.log($('#id'));
});
$(document).ready(function () {
console.log($('#id'));
});
$(function () {
console.log($('#id'));
})
</script>
</head>
<body>
<div id="id">
</div>
</body>
</html>
3.jQuery手册里面
核心
选择器
ajax
属性
css
文档处理
筛选
事件
效果
4.jQuery效果
$('button').click(function () { ... } //$('button')获取的是所有共性的标签,作用在每个标签上,内部封装了遍历的算法
$('#box').show() //显示: 没有参数时: 无动画版本; 第一个参数: 动画时间; 第二个参数: 回调函数
$('#box').hide() //隐藏: 没有参数时: 无动画版本; 第一个参数: 动画时间; 第二个参数: 回调函数
$('#box').fadeIn(2000); //淡入: 第一个参数: 动画时间; 第二个参数: 回调函数 (fade 淡的)
$('#box').fadeOut(2000); //淡出: 第一个参数: 动画时间; 第二个参数: 回调函数
$('#box').slideDown(2000); //卷帘门效果向下: 第一个参数: 动画时间; 第二个参数: 回调函数 (slide 滑动)
$('#box').slideUp(2000); //卷帘门效果向上: 第一个参数: 动画时间; 第二个参数: 回调函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
height: 200px;
width: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<div id="box">
</div>
<script src="jquery.js"></script>
<script>
$(function () { //jQuery的入口函数
$('button').click(function () { //点击按钮事件
$('#box').hide();
$('#box').show(2000,function () {
console.log(666);
});
$('#box').fadeIn(2000); //淡入
$('#box').fadeOut(2000); //淡出
$('#box').slideDown(2000); //卷帘门效果
$('#box').slideUp(2000); //卷帘门效果
});
});
</script>
</body>
</html>
$('#box').slideToggle(1000); //切换效果: 反复按按钮, 显示和隐藏交替,
$('#box').stop().slideToggle(1000); //以后用到动画时, 先stop(), 在开动画
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
height: 200px;
width: 200px;
background-color: red;
display: none;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<div id="box">
</div>
<script src="jquery.js"></script>
<script>
$(function () {
var isShow = true;
$('button').click(function () {
if(isShow){ //方式一:
$('#box').slideDown(1000); //引出问题: 如果你点的速度足够快, 动作指令会堆积, 当你不点时, 页面继续执行之前的指令
isShow = false;
}else{
$('#box').slideUp(1000);
isShow = true;
}
if(isShow){ //方式二:
$('#box').stop().slideDown(1000); //在按下次按钮之前,手动停掉上次没执行完的定时器: 以后用到动画时, 先stop(), 在开动画
isShow = false;
}else{
$('#box').stop().slideUp(1000);
isShow = true;
}
$('#box').stop().slideToggle(1000); //方式三:单纯地做动画切换用这个, 要是还想做其他的操作, 用方式二
});
});
</script>
</body>
</html>