目录
一.事件处理
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>