jQuery介绍（上篇）

jQuery介绍（上篇）

如今前端的开发，已经愈来愈离不开jQuery了，由于它可让JS的开发变得愈来愈简单，并且还解决了浏览器的兼容性问题。

咱们来简单的将JS与jQuery作个对比：

	JavaScript	jquery
入口函数	只能有一个，若是有多个，后面的会覆盖前面	能够有多个，而且不会发生覆盖的状况
代码容错性	代码容错性差，代码出现错误，会影响到后面代码的运行。	代码容错性好，屏蔽错误，而且不会影响后面代码的运行。
浏览器兼容性	兼容性差，好比早期火狐不支持innerText	对浏览器兼容性作了封装，所以不存在兼容性问题
操做复杂性	DOM操做复杂，对于一些简单的动画效果，实现起来比较麻烦	DOM操做简单，支持隐式迭代，实现动画很是简单。

一．jQuery详细解释

1.版本介绍

Ø1.1大版本分类

jquery大版本分为1.x和2.x（3.0）

区别：2.x版本再也不支持IE6/7/8

Ø1.2同一版本分类

jQuery每个版本又分为压缩版和未压缩版：

ljquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。

ljquery.min.js：压缩版本，去除了注释、换行、空格、而且将一些变量替换成了a,b,c之类的简单字符，基本没有可读性，推荐在项目生产环境使用，由于文件较小，减小网络压力。

Ø1.3关于jquery3.0

jquery3.0如今发布了，这个版本自从2014年10月就开始测试了，目标是建立一个更苗条、更快的jquery版本（而且能向后兼容）。已经移除了IE旧版本的解决方案，而且带来了一些较为现代的web API，但这是有道理的。3.0是2.x分支的延续，可是有一些突破性的改变。可是1.12和2.2分支将会在同一时间继续得到关键性的支持补丁。可是他们不会再有任何新的功能和重大的修订。jQuery3是jQuery的将来，若是你须要兼容IE6-8，你能够继续使用1.12版本。

2.入口函数

Ø2.1jQuery的入口函数有两种写法

//第一种写法

$(document).ready(function() {

 

});

//第二种写法

$(function() {

 

});

Ø2.2对比JavaScript的入口函数jQuery的入口函数,执行时机

(1)JavaScript的入口函数要等到页面中全部资源（包括图片、文件）加载完成才开始执行。

(2)jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

3.了解jQuery的$符号

3.1$是什么

其实$就是一个函数：$();参数不同，功能不同

$经常使用的几种状况：

$(function() {});//参数是function，说明是入口函数

$(“#btnSetConent”);//参数是字符串，而且以#开头，是一个标签选择，查找id=“btnSetContent”的元素

$(“div”);//查找全部的div元素

$(document).ready(funciton(){})//将document转换成jQuery对象

补充

$ === jQuery,也就是说能用$的地方，彻底能够用jQuery，$仅仅是简写形式。

二．jQuery对象与DOM对象之间的转换

1.什么是DOM对象？

使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。好比使用document.getElement*系列的方法返回的就是dom对象。

var btn = document.getElementById(“btnShowDiv”);

var divs = document.getElementsByTagName(“div”);

dom对象只可使用dom对象的方法和属性

domObject.innerHTML = “dom对象设置文本”;

domObject.style.display= “block”;//dom对象显示对象

domObject.onclick = function() {}//dom对象绑定事件

2.什么是jquery对象？

jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。好比使用$()方法返回对象都是jquery对象。

$(“div”);//标签选择器返回的jquery对象。

$(“#btnShowDiv”);//id选择器返回的jquery对象。

jquery对象只能使用jquery对象的方法

var $obj = $(“div”);

$obj.html(“jquery对象设置文本的方法”);

$obj.show();//jquery对象显示文本

$obj.click(function() {});//jquery对象绑定事件

  错误的用法

$(“div”).innerHTML;//jquery对象不能调用dom方法

//dom对象不能调用jquery方法。

document.getElementById(“btnShowDiv”).show();

3.深刻了解jQuery对象

jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合）

4.jQuery对象和DOM对象的相互转换

4.1jquery对象转DOM对象

var $li = $(“li”);

//第一种方法（更经常使用）

$li[0]

//第二种方法

$li.get(0)

//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

4.2 DOM对象转jquery对象

var $obj = $(domObj);

// $(document).ready(function(){});就是典型的DOM对象转jQuery对象。

 

三：jQuery选择器Ø

1.什么是jQuery选择器？

jQuery选择器是jQuery为咱们提供的一组方法，让咱们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

$("#btnShowDiv")//id选择器

$("div")//标签选择器

jQuery选择器有不少，基本兼容了CSS1到CSS3全部的选择器，而且jQuery还添加了不少更加复杂的选择器。（详情请查看jQuery文档）

jQuery选择器虽然不少，可是选择器之间能够相互替代，就是说获取一个元素，你会有不少种方法获取到。因此咱们平时真正能用到的只是少数的最经常使用的选择器。

2.基本选择器

ID选择器 $(“#id”); 获取指定ID的元素

类选择器 $(“.class”); 获取同一类class的元素

标签选择器 $(“div”); 获取同一类标签的全部元素

并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。获取全部的div、p、li元素

交集选择器（标签指定式选择器） $(“div.redClass”); 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

总结：跟css的选择器用法如出一辙。

3.层级选择器

子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素

后代选择器 $(“ul li”); 使用空格，表明后代选择器，获取ul下的全部li元素，包括孙子等

跟CSS的选择器如出一辙。

4.过滤选择器

这类选择器都带冒号：

:eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。

:odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素

:even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素

5.筛选选择器(方法)

筛选选择器的功能与过滤选择器有点相似，可是用法不同，筛选选择器主要是方法。

children(selector) $(“ul”).children(“li”) 至关于$(“ul>li”)，子类选择器

find(selector) $(“ul”).find(“li”); 至关于$(“ul li”),后代选择器

siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括本身自己。

parent() $(“#first”).parent(); 查找父亲

eq(index) $(“li”).eq(2); 至关于$(“li:eq(2)”),index从0开始

 

 

四：jQuery操做样式

1. css操做

功能：设置或者修改样式，操做的是style属性

  1.1设置样式

Ø1.1.1设置单个样式

//name：须要设置的样式名称

//value：对应的样式值

css(name, value);

//如：

$("#one").css("background","gray");//将背景色修改成灰色

Ø1.1.2设置多个样式

//参数是一个对象，对象中包含了须要设置的样式名和样式值

css(obj);

//如：

$("#one").css({

    "background":"gray",

    "width":"400px",

    "height":"200px"

});

Ø1.2.获取样式

//name:须要获取的样式名称

css(name);

//如：

$("div").css("background-color");

注意：获取样式操做只会返回第一个元素对应的样式值。

2. class操做

Ø2.1添加样式类

//name：须要添加的样式类名，注意参数不要带点.

addClass(name);

//例子,给全部的div添加one的样式。

$(“div”).addClass(“one”);

  2.2 移除样式类

Ø2.2.1移除全部样式类

//不带参数，移除全部的样式类

removeClass()

//例子，移除div全部的样式类

$(“div”).removeClass();

Ø2.2.2移除单个样式类

//name:须要移除的样式类名

removeClass(“name”);

//例子，移除div中one的样式类名

$(“div”).removeClass(“one”);

Ø2.3.判断是否有样式类

//name:用于判断的样式类名，返回值为true或 false

hasClass(name)

//例子，判断第一个div是否有one的样式类

$(“div”).hasClass(“one”);

Ø2.4切换样式类

//name:须要切换的样式类名，若是有，移除该样式，若是没有，添加该样式。

toggleClass(name);

//例子

$(“div”).toggleClass(“one”);

经验总结：

1.若是操做到的样式很是少，能够考虑css方法

2.若是操做到的样式很是多，那么能够经过class方法来操做，将样式写到一个class类里面。

3.若是考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操做。

 

五：jquery动画

jquery提供了三组动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。

1. 显示与隐藏

显示(show)与隐藏(hide)是一组动画：

1.1show方法详解：

show([speed], [callback]);

//speed(可选)：动画的执行时间

 1.若是不传，就没有动画效果。

 2.毫秒值(好比1000),动画在1000毫秒执行完成(推荐)

     3.固定字符串，slow(200)、normal(400)、fast(600)，若是传其余字符串，则默认为normal。

//callback(可选):执行完动画后执行的回调函数

1.2hide方法详解：

与show方法的用法彻底一致。

show/hide：修改的是元素的width、height、opacity。

1. 滑入与滑出

滑入(slideUp)与滑出(slideDown)是一组动画，效果与卷帘门相似

slideUp/slideDown,使用方法与show/hide基本一致。

slideUp(speed, callback);

//speed(可选)：动画的执行时间

 1.若是不传，默认为normal，注意区分show/hide。

 2.毫秒值(好比1000),动画在1000毫秒执行完成(推荐)

     3.固定字符串，slow(200)、normal(400)、fast(600)

//callback(可选):执行完动画后执行的回调函数

滑入滑出切换

$(selector).slideToggle(speed,callback);

//若是是隐藏状态，那么执行slideDown操做，若是是显示状态，那么执行slideUp操做。

slideUp/slideDown：修改的是元素的height

3. 淡入与淡出

fadeIn/fadeOut使用方法与show/hide、slideDown/slideUp一致。

fadeIn(speed, callback);

//speed(可选)：动画的执行时间

 1.若是不传，默认是normal。

 2.毫秒值(好比1000),动画在1000毫秒执行完成(推荐)

     3.固定字符串，slow(200)、normal(400)、fast(600)

//callback(可选):执行完动画后执行的回调函数

淡入淡出切换：

fadeToggle(speed, callback);

//若是当前元素处于隐藏状态，那么执行fadeIn操做，若是处于显示状态，那么执行fadeOut操做。

淡入淡出到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 彻底不透明 到彻底透明；而fadeTo能够指定元素不透明度的具体值。而且时间参数是必需的！

fadeTo(speed, value, callback)//能够设置具体的透明度

//speed（必须）

//value  0-1之间的数值(好比0.4)，表示淡到某一个值。

//callback(可选) 回调函数

fade系列方法：修改的是元素的opacity

4.动画小结

4.1.jQuery给咱们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut

4.2.动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。

4.3.淡入淡出到某个值：fadeTo方法。

4.4.show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。

4.5.show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，由于带了数字才能作渐变。

 

5.自定义动画

animate：自定义动画

$(selector).animate({params},[speed],[callback]);

// {params}：要执行动画的CSS属性，带数字（必选）

// speed：执行动画时长（可选）

// callback：动画执行完后当即执行的回调函数（可选）

动画支持的属性：

http://www.w3school.com.cn/jquery/effect_animate.asp

6.  easing参数

控制动画在不一样元素的速度，默认为“swing”

“swing”：在开头和结尾移动慢，在中间移动速度快

“linear”：匀速移动

 

7. 动画队列问题

在同一个元素上执行多个动画，那么对于这个动画来讲，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。

8. 中止动画

stop方法：中止动画效果

stop(clearQueue, jumpToEnd);

//第一个参数：是否清除队列

//第二个参数：是否跳转到最终效果

最经常使用的中止动画：stop();

六：jquery操做DOM(节点)

1.建立元素

//$(htmlStr)

//htmlStr：html格式的字符串

$(“<span>这是一个span元素</span>”);

2. 添加元素

Ø2.1添加新建的元素：

//方法一：将jQuery对象添加到调用者内部的最后面。

var $span = $(“<span>这是一个span元素</span>”);

$(“div”).append($span);

 

//方法二：参数传字符串，会自动建立成jquery对象

$(“div”).append(“<span>这是一个span元素</span>”);

Ø2.2添加已经存在的元素

var $p = $(“p”);

$(“div”).append($p);

//注意：若是添加的是已经存在的元素，那么会把以前的元素给干掉。（相似于剪切的功能）。

相似的用法：append  prepend  after  before

3.使用html方法建立元素

//设置内容

$(“div”).html(“<span>这是一段内容</span>”);

//获取内容

$(“div”).html()

4.清空元素

4.1  empty：清空指定节点的全部元素，自身保留(清理门户)

$(“div”).empty();//清空div的全部内容（推荐使用，会清除子元素上绑定的内容，源码）

4.2清空元素的第二种方法

$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会形成内存泄漏，绑定的事件并不会被清除。

5. 删除元素

remove：相比于empty，自身也删除（自杀）

$(“div”).remove();

6. 克隆元素

做用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）

//cloneNode(true)

// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。（如克隆出来的机器人修改个名字并不会影响原来的那个模型的机器人）

$(selector).clone();