jQuery 重要的知识点归纳

jQuery 重要的知识点归纳

jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。
jQuery 对象是 jQuery 独有的。
只有 jQuery 对象才能使用 jQuery 的方法，在 jQuery 对象中无法使用 DOM 对象的任何方法，反之 DOM 对象也无法使用任何 jQuery 的方法。
约定：如果获取的是 jQuery 对象，那么要在变量前面加上 $
jQuery 对象中封装了多个 DOM 对象，同时 jQuery 对象是类数组对象
数组与类数组对象的区别
数组的类型是Array
类数组对象的类型是 Object

DOM 对象转 jQuery 对象

使用 $（）将 DOM 对象包装起来，就可以转换成 jQuery 对象

var item = document.getElementsByTagName('ul')[0], // DOM对象
$item = $(item);  // jQuery对象

jQuery 对象转换为 DOM 对象

jQuery 对象通过 jQuery 提供的 get（index）方法，得到对应的 DOM 对象

var $ul = $('ul'),
ul = $ul.get(0);

jQuery 对象是一个类数组对象，可以通过 [] 方式，得到对应的 DOM 对象。

类数组对象

类数组对象本质就是一个对象，只不过存储方式类似于数组的结构
arguments 对象 ---- 接受函数实参的个数

jQuery 对象 ---- 底层就是 dom 对象

属性

length 属性（数组的长度 | 元素的个数）

方法

get（index）：根据 index 放回对应的 dom 对象
eq（index）：根据 index 返回对应的 jQuery 对象

index（）：查找元素的索引值

ready 和 onlaod 的区别

ready
具有简写方式
在一个 HTML 页面中允许出现多个
加载完 DOM 结构就执行
执行速度快
onload
没有简写方式
在一个 HTML 页面中只能使用一个
需要等页面所有资源加载完才执行
执行速度比 ready 慢

jQuery 动画

基本隐藏、显示效果
show（）/ hide（）

$('div').show(1000).hide(1000);

若是对同一个 jQuery 对象使用，可以采用链式操作。
滑动式动画效果
slideDown（）/ slideUp（）

$('div').slideUp(1000).slideDown(1000);

淡入淡出
fadeIn（）淡入
fadeOut（）淡出

$('div').fadeIn(1000).fadeOut(1000);

并发和排队效果
并发效果：设置多个动画同时执行
排队效果：设置多个动画，按照先后顺序依次执行

jQuery 插件

jQuery 插件的作用
扩展 jQuery 的功能
呈现组件化特点
日期插件 - layDate插件
layDate初步使用
引入 laydate.js
laydate（options）

开发插件

全局函数

全局函数，实际上就是 jQuery 本身的方法。
jQuery 内置的一些功能是通过全局函数实现的。
比如$.ajax（）就是典型的全局函数
向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性

$.globalFunction = function(){
// todo...
};

可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用
当需要添加多个函数可以使用$.extend（）函数

$.extend({
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
});

通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险
我们可以把属于一个插件的所有全局函数封装到一个对象

$.plugins = function(){
functionOne: function(){
// todo...
},
functionTwo: function(){
// todo...
}
};

通过上述代码，其实是为全局函数创建了另一个方法 --- plugins
functionOne 和 functionTwo 已经成为 plugins 对象的属性。

$.plugins.functionOne();
$.plugins.functionTwo();

添加 jQuery 实例对象的方法

$.fn.method = function(){};

对象方法的环境
在任何插件方法内部，关键字 this 引用的都是当前调用方法的 jQuery对象，因此可以在 this 上面调用任何内置的 jQuery 方法。
方法连缀

通过 return this 来实现链式操作