JQuery

jQuery是一个优秀的、轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），而jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

1、jQuery入口函数与Js入口函数的区别

【注】js入口函数指的是：window.onload = function(){};

区别一：书写个数不同

Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

区别二：执行时机不同

Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

文档加载的顺序：从上往下，边解析边执行。

2、jQuery对象和DOM对象的相互转换

①DOM对象此处指的是：使用js操作DOM返回的结果

? 1 var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

②jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果

? 1 var $btn = $(“ #btnShow”); // $btn就是一个jQuery对象

③DOM对象转换成jQuery对象

? 1 2 3 var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1 // $(document）.ready(function(){}); // 调用入口函数 // 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

④jQuery对象转换成DOM对象

? 1 2 3 4 // 第一种方式 var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式） // 第二种方式 var btn2 = $btn.get(0); // 此时就把jQuery对象$btn转换成了DOM对象btn2

3、jQuery选择器

符号（名称）说明用法 基本选择器（重点）#ID选择器

$(“#btnShow”).css(“color”, “red”);

选择id为btnShow的一个元素（返回值为jQuery对象，下同）

.类选择器

$(“.liItem”).css(“color”, “red”);

选择含有类liItem的所有元素

element标签选择器

$(“li”).css(“color”, “red”);

选择标签名为li的所有元素

层级选择器空格后代选择器

$(“#j_wrap li”).css(“color”, “red”);

选择id为j_wrap的元素的所有后代元素li

>子代选择器

$(“#j_wrap > ul > li”).css(“color”, “red”);

选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器:eq(index)选择匹配到的元素中索引号为index的一个元素，index从0开始

$(“li:eq(2)”).css(“color”, ”red”);

选择li元素中索引号为2的一个元素

:odd选择匹配到的元素中索引号为奇数的所有元素，index从0开始

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为奇数的所有元素

:even选择匹配到的元素中索引号为偶数的所有元素，index从0开始

$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为偶数的所有元素

筛选选择器（方法）     （重点）find(selector)查找指定元素的所有后代元素（子子孙孙）

$(“#j_wrap”).find(“li”).css(“color”, “red”);

选择id为j_wrap的所有后代元素li

children()查找指定元素的直接子元素（亲儿子元素）

$(“#j_wrap”).children(“ul”).css(“color”,“red”);

选择id为j_wrap的所有子代元素ul

siblings()查找所有兄弟元素（不包括自己）

$(“#j_liItem”).siblings().css(“color”, “red”);

选择id为j_liItem的所有兄弟元素

parent()查找父元素（亲的）

$(“#j_liItem”).parent(“ul”).css(“color”,“red”);

选择id为j_liItem的父元素

eq(index)查找指定元素的第index个元素，index是索引号，从0开始

$(“li”).eq(2).css(“color”, “red”);

选择所有li元素中的第二个

jQuery 对象

•jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。

•jQuery 对象是 jQuery 独有的。

•只有 jQuery 对象才能使用 jQuery 的方法，在 jQuery 对象中无法使用 DOM 对象的任何方法，反之 DOM 对象也无法使用任何 jQuery 的方法。

•约定：如果获取的是 jQuery 对象，那么要在变量前面加上 $

•jQuery 对象中封装了多个 DOM 对象，同时 jQuery 对象是类数组对象

•数组与类数组对象的区别

1.数组的类型是Array

2.类数组对象的类型是 Object

DOM 对象转 jQuery 对象

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

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

jQuery 对象转换为 DOM 对象

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

? 1 2 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

1.具有简写方式 2.在一个 HTML 页面中允许出现多个 3.加载完 DOM 结构就执行 4.执行速度快

onload

1.没有简写方式 2.在一个 HTML 页面中只能使用一个 3.需要等页面所有资源加载完才执行 4.执行速度比 ready 慢

jQuery 动画

基本隐藏、显示效果

•show（）/ hide（）

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

若是对同一个 jQuery 对象使用，可以采用链式操作。

滑动式动画效果

•slideDown（）/ slideUp（）

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

淡入淡出

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

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

并发和排队效果

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

jQuery 插件

jQuery 插件的作用

•扩展 jQuery 的功能 •呈现组件化特点

日期插件 - layDate插件

•layDate初步使用 1.引入 laydate.js 2.laydate（options）

开发插件

全局函数

全局函数，实际上就是 jQuery 本身的方法。

jQuery 内置的一些功能是通过全局函数实现的。

•比如$.ajax（）就是典型的全局函数

向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性

? 1 2 3 $.globalFunction = function (){    // todo... };

可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用

当需要添加多个函数可以使用$.extend（）函数

? 1 2 3 4 5 6 7 8 $.extend({    functionOne: function (){      // todo...    },    functionTwo: function (){      // todo...    } });

通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险

我们可以把属于一个插件的所有全局函数封装到一个对象

? 1 2 3 4 5 6 7 8 $.plugins = function (){    functionOne: function (){      // todo...    },    functionTwo: function (){      // todo...    } };

通过上述代码，其实是为全局函数创建了另一个方法 --- plugins

functionOne 和 functionTwo 已经成为 plugins 对象的属性。

? 1 2 $.plugins.functionOne(); $.plugins.functionTwo();

添加 jQuery 实例对象的方法

? 1 $.fn.method = function (){};对象方法的环境

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

方法连缀

通过 return this 来实现链式操作