目录
一.事件处理
1.CDN
2.百度资源库
3.代码
二.动画功能
三.jQuery插件
四.jQuery封装原理
1.闭包的优点
2.代码
五.案例
一.事件处理
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>五.案例
shopping_cart.html：
<html>
<head>
<title>jQuery操作表格</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
tr{
height: 40px;
}
</style>
<script src="../js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script>
<script src="../js/shopping_cart.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<h3>jQuery操作表格</h3>
<hr />
<input type="button" id="fx" value="反选" />
<input type="button" id="addRow" value="新增一行" />
<input type="button" id="delRow" value="删除行" />
<input type="button" id="copyRow" value="复制行" />
<table border="1px" cellpadding="10px" cellspacing="0" id="ta">
<tr>
<td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td>
<td width="200px">书名</td>
<td width="200px">作者</td>
<td width="200px">数量</td>
<td width="200px">操作</td>
</tr>
<tr id="">
<td><input type="checkbox" name="chk" id="" value="2"/></td>
<td>《Java编程之道》</td>
<td>wollo</td>
<td>10</td>
<td>
<input type="button" name="aa" id="" value="修改数量" onclick="change(this)" />
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="3" /></td>
<td>《Python和我的故事》</td>
<td>赵老师</td>
<td>10</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="" value="4" /></td>
<td>《web开发详解》</td>
<td>张老师</td>
<td>30</td>
<td>
<input type="button" name="" id="" value="修改数量" onclick="change(this)"/>
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
</table>
</body>
</html>shopping_cart.js：
// 相当于window.onload()
$(function(){
//确定全选和全不选的操作
$("#chks").click(function(){
//获取全选框是否全选
var flag=$(this).prop("checked");
//将各行的单选框相应全部勾选或全部不勾选
$("input[name=chk]").prop("checked",flag);
})
//判断是否全选
$("input[name=chk]").click(function(){
var flag=true;
//对象数组
var chk=$("input[name=chk]");
//each循环
chk.each(function(){
//如果有某行未勾选
if(!$(this).prop("checked")){
flag=false;
return;
}
})
$("#chks").prop("checked",flag);
})
//反选功能实现
$("#fx").click(function(){
//多选框对象数组
var chx=$("input[name=chk]");
chx.each(function(){
//获得多选框的初始的状态
var flag=$(this).prop("checked");
$(this).prop("checked",!flag);
})
})
//新添加一行的操作
$("#addRow").click(function(){
//获得table对象
var tab=$("#ta");
tab.append('<tr id="">'+
'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
'<td>《Java编程之道》</td>'+
'<td>wollo</td>'+
'<td>10</td>'+
'<td>'+
' <input type="button" name="aa" id="" value="修改数量" />'+
' <input type="button" name="" id="" value="删除" />'+
'</td>'+
'</tr>')
})
//删除操作
$("#delRow").click(function(){
//获得name属性为chk并且最左侧多选框被选中的input标签
var del=$("input[name=chk]:checked");
if(del.length==0){
alert("至少选择一行");
}else{
del.parent().parent().remove();
}
})
//复制行
$("#copyRow").click(function(){
//对象数组
var copy=$("input[name=chk]:checked");
if(copy.length==0){
alert("至少选择一行");
}else{
//执行copy操作
//复制当前行
var tr=copy.parent().parent().clone();
//粘贴
$("#ta").append(tr);
}
})
})
//修改数量操作
//在标签中使用了onclick,即js代码,故不能放在$(function(){})中
function change(th){
//th是js对象，需先转化为jQuery对象
//tr结点
var par=$(th).parent().parent();
par.children().eq(3).html("<input type='text' size='3px' onblur='bul(this)'/>")
}
//失去焦点时操作
function bul(th){
var par=$(th).parent().parent();
par.children().eq(3).html(th.value);
}
//删除的操作
function del(th){
var par=$(th).parent().parent();
par.remove();
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
