JQ的版本和下载
版本
1.x：兼容IE6-8，目前PC端开发常用的类库
2.x/3.x：不支持IE6-8，移动端一般用zepto.js
下载
官网下载： jquery.com
Github：https://github.com/jquery/jquery/ 源码
http://code.jquery.com
Node的npm包管理器下载npm install jquery(@1.11.3) 下载最新(指定版本)
JQ核心原理
方法类库，提供许多属性和方法(处理了浏览器兼容处理和一些细节优化)
jQuery本身是一个类，是基于构造函数模式构建的一个类库
var jQuery = function(selector, context){
// jQuery.fn 就是它的原型，在它的原型上找init方法
return new jQuery.fn.init(selector, context);
};
// 把原型上的方法都放在一个对象里(批量扩展类原型上的方法)，
// 需要手动修改constructor
// 把这些方法放在原型上供实例使用
jQuery.fn = jQuery.prototype = {
jquery: version,
constructor: jQuery,
....
};
.....
init = jQuery.fn.init = function( selector, context ) {
if ( !selector ) {
return this;
}
if(typeof selector === "string"){ // 如果是字符串类型
...
}else if(selector.nodeType){ // 如果是个元素节点(nodeType为1)
...
}else if(jQuery.isFunction(selector)){ //如果是一个函数
}
// 返回创建的一个类数组
return jQuery.makeArray( selector, this );
}
init.prototype = jQuery.fn; // init的实例用的也是jQuery的原型
// 创建一个类数组
makeArray: function( arr, results ) {
var ret = results || [];
return ret;
},
....
window.jQuery = window.$ = jQuery; // 把jQuery暴露在全局下
执行jQuery的时候，执行jQuery.fn.init，该方法构造出了一个类数组，让init的原型指向jQuery的原型，返回init的实例就相当于返回了一个jQuery的实例，init()就相当于jQuery类库的一个入口
$()/jQuery()操作都是在创建一个JQ实例，两者相同($===jQuery)，这些实例都是类数组，称作JQ对象，可以使用JQ原型上提供的共有属性和方法
$()称为JQ的选择器(笼统)，执行JQ方法，创造JQ的一个实例；执行这个方法可以传递一个selector参数，通过selector可以获取到需要操作的DOM元素集合(JQ类数组集合)，第二个参数context是当前获取元素的上下文，不传递默认是document
selector参数支持传递三种格式：
- 传递string，就是选择器，通过选择器获取元素
- 传递元素对象，把JS原生对象转为JQ对象
- 传递函数，代表等DOM结构加载完成再执行对应的JS代码(类似于window.onload)
$===jQuery -> true
$()===jQuery() -> false两个不同的实例
$() instanceof jQuery -> true
var $demo = $();
$demo:
- 0: 某一个元素对象
- length：类数组的长度
- context：document
- selector：'' 传递的选择器
- _proto_：jQuery.prototype
....
// 获取一个不存在的元素
// 原生JS
var box = document.getElementById('box');
console.log(box); // 结果为undefined
// JQ
var $box = $('#box');
console.log($box); // 结果是一个空集合而不是undefined
一般CSS/CSS3中支持的选择器JQ选择器都支持
JQ对象和原生JS对象的转换
1、JQ转JS
var oBox = document.getElementById('box'); // 原生JS对象 不能使用JQ原型上的方法
var $box = $(oBox); // 转换
$box.addClass(); // 此时的$box是JQ对象，可以使用JQ原型上的方法
2、JS转JQ
var $body = $(body); // JQ对象 不能使用原生JS的方法
$body[index]; // 在集合中获取指定索引的内容，即为原生JS对象
$body.get(index) <=> $body[index]
$body.eq(index); // 在集合中获取指定索引的内容，但结果仍是JQ对象
selector传递一个方法时
$(function(){
// 当页面中DOM结构加载完成，就会执行回调函数
// window.onload：等到页面中DOM结构以及资源文件都加载完成执行相应JS代码
});
等价于
$(document).ready(function(){
});
1、$(function(){})利用了DOM二级事件绑定，可以执行多次，监听的是DOMContentLoaded事件，DOM结构加载完成就会触发执行
2、window.onload资源加载完才会执行，使用的是DOM零级事件绑定，一个页面中只能使用一次
JQ既是一个类也是一个对象
jQuery作为一个类，jQuery.prototype上设置的属性和方法是供JQ实例（DOM集合或元素）使用的属性和方法，即，使用来操作DOM的，比如：
addClass 增加样式类名
css：设置或者获取或者批量获取样式
removeClass：移除样式类名
.......
jQuery作为普通对象，也有一些属性和方法，但跟实例没有关系，都是工具类的方法
ajax
isFunction
unique：数组去重
jQuery原型上常用的方法
$('#box').index();//-> 获取当前元素的索引，前面有几个兄弟索引就是几，若只有这一个元素，其索引为0
$('body').data(key, value)// 在body元素上存取数据
$('body').data(key)// 在body元素上取数据
$('body').removeData(key);// 在body元素上移除数据在HTML5规范中div上读取预存的data-[key]值
<div data-xxx="test" ></div> // 存
$("div").data("xxx"); // test
对属性的操作
$("div").attr()// (批量)设置或获取当前元素的属性(自定义/内置)
$("div").removeAttr()// 移除前元素的属性
$("div").prop()// 操作表单元素的属性
$("div").removeProp()// 移除表单元素的属性
addClass/removeClass/toggleClass// 增加/移除样式类名
toggleClass// 当前样式名有就移除没有就增加（toggle前缀就是切换的）
hasClass// 验证当前样式名是否存在
$('#box').html([val])// 不传递val就是获取内容，传递就是设置内容等价于原生JS中的innerHTML
$('input').val([val])// 表单元素的设置或获取
css// 设置或者获取或者批量获取样式，获取到的结果没有去单位
offset()// 获取元素在当前视口的相对偏移，返回top 和 left两个整型属性
position()// 获取元素相对父元素的偏移，返回top 和 left
scrollTop/scrollLeft([val])// 设置/获取当前元素卷去的高度/宽度
width/height// 元素的宽/高
innerWidth/innerHeight// = clientWidth/clientHeight
outerWidth/outerHeight// = offsetWidth/offsetHeight
$('#box').on('click', function(){})// 事件绑定
append/appendTo//添加到末尾
parent.append(son) // 给父元素添加一个子元素
son.appendTo(parent) // 把一个元素追加到其父元素的末尾
prepend/prependTo// 添加到开头
逻辑同append
$('#box').remove()// 移除当前盒子
$('#box').clone(true)// 深度克隆当前盒子 除样式之外，内容也一并克隆
jQuery对象常用的方法
\$.noConflict()若项目中同时引用了两个用$操作的类库，该方法可以转让$的使用权，
var j = \$.noConflict()j此时就可以用来代表原始$，jQuery执行也可以
var j = \$.noConflict(true)表示把$和jQuery的使用权都转让出去，现在只能使用j()进行操作
// noConflict()方法源码
var _$ = window.$,
_jQuery = window.jQuery;
jQuery.noConflict = function(deep) {
if( window.$ === jQuery){
window.$ = _$; // 转让$
}
if( deep && window.jQuery === jQuery){
window.jQuery = _jQuery; // 深度转让jQuery
}
return jQuery; // 返回jQuery给新的变量，就可以使用新变量来执行操作了
}
\$.ajax()封装ajax，帮助我们发送请求
常用方法
筛选方法
filter：同级过滤
children：子集过滤
find：后代过滤
prev：获取上一个兄弟元素
prevAll：获取所有哥哥元素
next：获取下一个兄弟元素
nextAll：获取所有弟弟元素
siblings：获取所有兄弟元素
parent：父亲元素
parents：所有祖先元素(一直到HTML为止)
// filter二次筛选
var $links = $('a'); // 获取所有a标签集合
$links.filter('.bg'); // 在集合中获取到样式类为.bg的元素集合
// children
$('#box').children('a'); // 筛选出box子元素中带a标签的元素集合
<=> $('#box>a')
// find
$('#box').find('.bg'); // 筛选出box后代中样式类为.bg的元素集合
<=> $('#box .bg')
$('#box').prev('a'); // 获取上一个a标签的兄弟元素，不指定就是上一个任意标签兄弟元素
each
JQ原型上的each：遍历JQ对象中的每一项
对象上的each：不同于遍历jQuery对象的 $().each() 方法，此方法可用于遍历任何对象，包括数组，类数组，对象等
内置的each：要用原型上的each处理，JQ内部调用
// JQ原型上each的用法
$("img").each(function(index, item){
// 参数顺序和数组的forEach相反
// $(this) -> 当前遍历这一项 JQ对象
});
// 对象上的each
$.each([对象], function(index, item)); // 对象可以是数组，类数组，对象
// 对对象，回调函数中的this是value；for in循环遍历对象，共有属性和方法也会遍历到
// 对数组，回调函数中的this是item
// 内置的each
$('div').addClass('box'); // 会给每个获取的div都增加样式类名，内部调用each
$('div').css('width'); // 获取的时候只返回第一个，设置是批量
extend
$extend()：把方法扩展到JQ对象上，这个操作一般是用来完善类库的
$.fn.extend()：把方法扩展到JQ原型上的，供实例使用，一般用来写JQ插件
// 扩展工具方法，完善类库
$.entend({
aa: function(){}
});
$.aa(); // 执行
// 扩展到JQ原型上的，供实例使用
$.fn.extend({
bb: function(){
// this->操作当前方法的JQ实例
}
});
$('xxx').bb(); // 执行
extend
JQ中提供了元素运动的动画库
stop：结束当前元素正在运行的动画，执行下一个新动画（实现动画必会执行）
finish：类似stop，finish会立即跳到当前动画的目标位置再继续下一个，而stop则是当前停止的位置开始执行下一个动画
animate([target], [duration], [effect], [callback])：
- [target]：对象
- [duration]：MS
- [effect]：linear，ease， ease-in， ease-out，ease-in-out
- [callback]：回调函数，动画结束时做的事情
show(1000/fast/slow)，
hide，
toggle，
fadeIn，
fadeOut，
fadeToggle，
slideUp，
slideDown，
slideToggle
