标签：jQuery function 绑定 宝典 alert 事件 精华版 click
目录
一.事件处理
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。