简介：
jquery 全称 javaScript Query.是js的一个框架。本质上仍然是js。特点：支持各种主流的浏览器、使用特别简单、拥有便捷的插件扩展机制和丰富的插件。
一、JQuery内部封装原理介绍：匿名闭包。
下面这两行代码是jquery包下的已经封装的代码，因为window我们可以省略不写，因此我们可以直接使用 $ 符号。
// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;
匿名自调用，即使用闭包，将函数要执行的数据一次性挂载到window对象下。其推导过程如下：
function fn1(){
console.log("函数");
};
// 调用函数
fn1();
// fn1时函数名，它包含函数的代码，函数的代码就是“function(){console.log("函数");}”，用括号包裹，替换fn1，得：
(function (){
console.log("函数");
})();
因此对上面函数形参传进去obj，下面的实参传进去window对象，即为下面的表示形式
(function(obj){
//var bjsxt={};
obj.test=function(){
alert("工厂");
}
alert("匿名自调用");
})(window)
因此实现了由局部变量到全局变量window的一个转变。注：因为window是一个全局变量，而且不能够被修改和重定义。
二、jquery基本选择器介绍：id，标签，类，组合
注意：id选择器要加#、标签选择器什么都不加、类选择器要加“ . ”、组合选择器就是直接写多个，中间用逗号隔开。
下面是一些子选择器，层级选择器，等具体哪个可以去查找对应的API
//测试子选择器
function testChild(){
var inps=$("#showdiv>input");
alert(inps.length);
}
//测试层级选择器
function testCj(){
var inp=$("input:first");
alert(inp.val());
}
function testCj2(){
var tds=$("td:not(td[width])");
alert(tds.html());
}
三、jquery操作元素属性
他封装了set/getattribute方法，这里面对应的是attr ，同样存在一个问题：不可以获取实时的input text框中的内容，这个时候要使用value 这里对应的是val 方法
function testField(){
//获取元素对象
var uname=$("#uname");
//获取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testField2(){
//获取元素对象
var uname=$("#uname");
uname.attr("type","button");
}
四、jquery操作元素内容
和js中的是一样的也是一个innerHTML 和一个innerText，只不过是名字不同。
jquery 操作元素内容学习：
获取元素对象
1、获取
对象名.html()//返回当前对象的所有内容，包括HTML标签。
对象名.text()//返回当前对象的文本内容，不包括HTML标签
2、修改
对象名.html("新的内容")//新的内容会将原有内容覆盖，HTML标签会被解析执行
对象名.text("新的内容")//新的内容会将原有内容覆盖，HTML标签不会被解析
五、jquery操作元素样式 css
js中的是直接对象.style.color=***;这里可以调用css()方法加上JSON来使用，
六、js操作文档结构
将指定内容添加到对象内部、外部。等等，可以看API手册
操作文档结构学习：
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
4、替换
5、删除
empty()
七、事件机制的学习
特点：jquery可以对事件添加，并且同一个事件可以添加多种效果，而js只能添加一种，添加多种的话会覆盖。
注：页面载入事件：js中式onload在这里不是使用bind而是使用ready方法。。可以看下面代码！
//js动态添加事件
function testThing(){
//获取元素对象
var btn=document.getElementById("btn2");
//添加事件
btn.οnclick=function(){
alert("我是js方式");
}
}
//jquery
//测试bind绑定
function testBind(){
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")});
$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2w2222")});
}
//测试unBind解绑
function testUnfBind(){
$("#btn3").unbind("click");
}
//测试one
function testOne(){
$("#btn3").one("click",function(){alert("我是one")});
}
//页面载入事件
//js方式
window.οnlοad=function(){
alert("我是js方式页面加载");
}
window.οnlοad=function(){
alert("我是js方式页面加载2222");
}
//jquery方式
$(document).ready(function(){
alert("我是jQuery");
})
$(document).ready(function(){
alert("我是jQuery22222");
})
八、动画效果：
本质就是使用jquery的 hide show属性来修改div的显示时间，同时加上css的display：none等属性
function test(){
$("#showdiv").show(3000);
$("#div01").hide(3000);
/*$("#showdiv").hide(3000);
$("#div01").show(3000);*/
$("div").toggle(3000);
$("#showdiv").slideDown(3000);
$("#div01").slideUp(2000);
$("#showdiv").fadeOut(3000);
}
总结
jquery就是对js的封装，方便我们调用，在了解了js之后学起来非常块，对于一个后端开发者来说，了解还是必须的。
在使用jquery实现一些动态效果的时候，可以灵活的运用标志位，比如鼠标点击事件，点击一次flag改变一次。可以用来达到某种动态效果的判断条件。
