JQ的核心原理及常用方法

作者: 没了提心吊胆的稗子 | 来源:发表于2019-07-13 21:08 被阅读0次

JQ的核心原理及常用方法
JQ原理
JQuery
JQ常用方法
jquery
AFN原理及常用方法
SDWebImage常用方法及原理
JS、JQ常用方法
jq常用方法.txt
温故知新 - UITableView

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原型上的方法

JS-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