【浓缩精华版】jQuery入门宝典（三）
作者：互联网
目录
一.事件处理
1.CDN
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技 术主要有内容存储和分发技术。
2.百度资源库
原本在百度静态资源公共库中有很多依托CDN技术分发的文件，如jQuery的各版本文件，但是选现在度静态资源公共库已经挂了。所以给大家推荐字节跳动静态资源公共库，内容较为齐全。在搜索栏搜索jquery，在J栏找到jquery并点击，
选择版本并点击，引入jQuery有两种方法，一种是引入js文件，另一种是直接令src为对应网址！
点击复制TAG（引入代码，就不用自己手敲了，直接黏贴即可），黏贴在代码里即可。
3.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script> -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7/jquery.min.js" type="application/javascript"></script>
<script type="text/javascript">
/* ready事件：页面加载完执行的操作，相当于JS的onload*/
// $(function(){})
// jQuery(function(){})
// $(document).ready(function(){})
$(function(){
/*****************事件的基础绑定******************/
//其他事件的绑定方式和下面相同，换个事件名称就可以啦！！！
//放在ready事件当中是为了将页面加载完就将单击事件绑定到对应按钮上
$("#btn1").click(function(){
alert("单击事件");
})
/*****************bind事件绑定******************/
// $("#btn2").bind('click',function(){
// alert("bind单击事件绑定");
// });
//适合同一对象绑定多个事件时使用，减小代码量，即json格式
$("#text1").bind({
'mouseover':function(){
//输出到控制台
console.log("鼠标放上bind");
},
'focus':function(){
alert("光标移入");
}
//and so on
})
/*****************一次事件绑定******************/
//只绑定一次，即事件执行一次之后就失效了
$("#btn3").one('click',function(){
alert("一次事件绑定");
})
/*****************trigger事件操作******************/
$("#btn4").click(function(){
// 调用其他对象的事件
$("#btn1").trigger('click');
$("#btn3").trigger('click');
})
/*****************事件的解绑******************/
$("#btn5").click(function(){
//解绑指定对象上的所有事件
$("#btn1").unbind();
//解绑指定对象上的指定事件
$("#text1").unbind("focus");
})
// $(".btn6").click(function(){
// alert("单击事件的绑定");
// })
//下面的方法可以增加元素，但不能增加相应事件
$("body").append('<input type="button" name="" class="btn6" value="事件操作2" />');
//执行如下操作可以使上面方法增加的元素绑定事件（live方法在1.7之前都可以用，之后不行）
$(".btn6").live('click',function(){
alert("btn6单击事件已绑定");
})
})//ready事件
</script>
</head>
<body>
<input type="button" name="" id="btn1" value="事件绑定" />
<input type="text" name="" id="text1"/>
<input type="button" name="" id="btn3" value="一次事件绑定"/>
<input type="button" name="" id="btn4" value="trigger"/>
<input type="button" name="" id="btn5" value="事件解绑" />
<input type="button" name="" class="btn6" value="事件操作" />
</body>
</html>
二.动画功能
了解即可。因为我本来也是为学后端学习铺垫而学的前端，所以浅尝辄止。
推荐一个插件库：www.jq22.com/ ，里面有很多现成的动画啥的，网页，功能啥的，五花八门的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
height: 200px;
background-color: #00A40C;
}
#div2{
height: 200px;
background-color: yellow;
/* 隐藏 */
/* display: none; */
}
</style>
<script src="../js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//获得div对象
var div1=$("#div1");
//3s内隐藏动画(渐变)
//div1.hide(3000);
//3s内显示动画（渐变）
//div1.show(3000);
//隐藏的显示，显示的隐藏
//$("div").toggle(3000);
//滑动上
//div1.slideUp(3000);
//滑动下
//div1.slideDown(3000);
//滑动上的变成滑动下，滑动下的变成滑动上
//$("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
// 淡入
div1.fadeIn(3000);
})
})
</script>
</head>
<body>
<input type="button" id="btn1" value="动画触发" />
<hr />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
三.jQuery插件
jQueryUI：略，想看的去菜鸟教程看看就行了，用的不多。
四.jQuery封装原理
1.闭包的优点
（1）可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护
（2）防止可修改变量，因为内部的变量外部是无法访问的，并且也不可修改的。安全。
（3）读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//()是函数执行符
/***************匿名函数的自调用***************/
// 无参数的匿名函数的执行
// (function (){
// alert("我是匿名函数");
// })()
//有参匿名函数的执行(匿名函数只执行第一个)
// (function (a,b,c){
// alert("我是匿名函数"+a+'---'+b+'---'+c);
// })(100,200,300)
/**************局部变量的挂载****************/
(function (){
var a=100;//局部变量
//在运行的时候把a挂载到window对象上
window.vv=a;
alert(a);
})()
function test(){
alert('调用匿名函数的局部变量'+window.vv);//等价于alert(vv);
}
test();
/*****************闭包原理******************/
function testA(){
var a=10;
function testB(){
alert(a);
var b=100;
//window.tmp=b;
return b;
}
var c=testB();
//alert(tmp);
alert(c);
}
testA();
</script>
</head>
<body>
<h1>jQuery中的封装原理</h1>
<h2>匿名函数的自调用</h2>
<h3>闭包原理</h3>
<h4>
</h4>
</body>
</html>
五.案例
标签：jQuery,function,绑定,宝典,alert,事件,精华版,click 来源： https://blog.csdn.net/weixin_44593822/article/details/122418913