jquery的使用

jquery的官网：http://jquery.com/

说白了：jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js）

学习jQuery，主要学习jQuery的一大堆的api。
API：application programming interface：应用程序编程接口，说白了，API就是方法。
obj.funName(params);
注意：方法调用的时候，都带小括号(),使用jQuery的方法的时候，不要忘了小括号。
1.1怎样使用jQuery？（重点）
?下载jquery
官网下载地址：http://jquery.com/download/

?使用jQuery实现div动态展示案例的步骤：
1)引包（引入jQuery文件）
<script src="jquery-1.11.1.js"></script>
2)入口函数
$(document).ready(function () {
});
3)功能实现
$("#btnShowDiv").click(function () {
$("div").show(1000);
});
?div动态展示案例中JavaScript与jquery的对比
JavaScript jquery
入口函数 只能有一个，如果有多个，后面的会覆盖前面 可以有多个，并且不会发生覆盖的情况
代码容错性 代码容错性差，代码出现错误，会影响到后面代码的运行。 代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
浏览器兼容性 兼容性差，比如火狐不支持innerText 对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性 DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦 DOM操作简单，支持隐式迭代，实现动画非常简单。

1.3jQuery详细解释
1.3.1版本介绍
?大版本分类
jquery大版本分为1.x和2.x（3.0）

区别：2.x版本不再支持IE6/7/8
?同一版本分类
jQuery每一个版本又分为压缩版和未压缩版：
?jquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。
?jquery.min.js：压缩版本，去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符，基本没有可读性，推荐在项目生产环境使用，因为文件较小，减少网络压力。
?关于jquery3.0

翻译：jquery3.0现在发布了，这个版本自从2014年10月就开始测试了，我们的目标是创建一个更苗条、更快的jquery版本（并且能向后兼容）。我们已经移除了IE旧版本的解决方案，并且带来了一些较为现代的web API，但这是有道理的。3.0是2.x分支的延续，但是有一些突破性的改变。但是1.12和2.2分支将会在同一时间继续获得关键性的支持补丁。但是他们不会再有任何新的功能和重大的修订。jQuery3是jQuery的未来，如果你需要兼容IE6-8，你可以继续使用1.12版本。
1.3.2引包的注意点
?忘记引包或者引包在入口函数的后面。

?引包路径错误(404)

1.3.3入口函数
?jQuery入口函数的两种写法
//第一种写法
$(document).ready(function() {

});
//第二种写法
$(function() {

});
?对比JavaScript的入口函数jQuery的入口函数,执行时机
1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

1.3.4了解jQuery的$符号
?$是什么
其实$就是一个函数：$();参数不一样，功能不一样
$常用的几种情况：
$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象
补充
$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。
1.3.5jQuery对象与DOM对象之间的转换（难点）
?什么是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对象绑定事件
?什么是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();
?深入了解jQuery对象
jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合）
联想记忆：衣服和洗衣机的关系
?jQuery对象和DOM对象的相互转换
1.jquery对象转DOM对象
var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。
2.DOM对象转jquery对象（联想记忆：我有钱[美元]，所以我的功能就更强大）
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
1.3.6区分jQuery和JavaScript
JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。（联想记忆：不能扛着洗衣机去出差）

1.4jQuery选择器（重点）
1.4.1jQuery选择器概述
?为什么要学习jQuery选择器？
考虑兼容性的话，js提供的获取元素的方法太少了,只有两个，不能够满足我们的要求，比如想要通过class来获取元素就不行了。
document.getElementById(“btnShowDiv”);
document.getElementsByTagName(“div”);
?什么是jQuery选择器？
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
$("#btnShowDiv")//id选择器
$("div")//标签选择器
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。
1.4.2基本选择器
名称 用法 描述
ID选择器 $(“#id”); 获取指定ID的元素
类选择器 $(“.class”); 获取同一类class的元素
标签选择器 $(“div”); 获取同一类标签的所有元素
并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器（标签指定式选择器） $(“div.redClass”); 注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。
总结：跟css的选择器用法一模一样。
1.4.3层级选择器
名称 用法 描述
子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
跟CSS的选择器一模一样。
1.4.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元素中，选择索引号为偶数的元素
1.4.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开始

1.2jQuery操作样式
1.2.1css操作
功能：设置或者修改样式，操作的是style属性。
?设置单个样式
//name：需要设置的样式名称
//value：对应的样式值
css(name, value);
//使用案例
$("#one").css("background","gray");//将背景色修改为灰色
?设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
"background":"gray",
"width":"400px",
"height":"200px"
});
?获取样式
//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");
注意：获取样式操作只会返回第一个元素对应的样式值。
1.2.2class操作
?添加样式类
//name：需要添加的样式类名，注意参数不要带点.
addClass(name);
//例子,给所有的div添加one的样式。
$(“div”).addClass(“one”);
?移除所有样式类
//不带参数，移除所有的样式类
removeClass()
//例子，移除div所有的样式类
$(“div”).removeClass();
?移除单个样式类
//name:需要移除的样式类名
removeClass(“name”);
//例子，移除div中one的样式类名
$(“div”).removeClass(“one”);
?判断是否有样式类
//name:用于判断的样式类名，返回值为true false
hasClass(name)
//例子，判断第一个div是否有one的样式类
$(“div”).hasClass(“one”);
?切换样式类
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
toggleClass(name);
//例子
$(“div”).toggleClass(“one”);
经验总结：
1.如果操作到的样式非常少，可以考虑css方法
2.如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
3.如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。
【案例：tab栏切换案例】
1.3jquery动画
通过下拉菜单引入动画。
jquery提供了三组动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。【演示动画例子】
1.3.1显示与隐藏
显示(show)与隐藏(hide)是一组动画：
show方法详解：
show([speed], [callback]);
//speed(可选)：动画的执行时间
1.如果不传，就没有动画效果。
2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
//callback(可选):执行完动画后执行的回调函数
hide方法详解：
与show方法的用法完全一致。
show/hide：修改的是元素的width、height、opacity。
1.3.2滑入与滑出
滑入(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
【修改案例：下拉菜单案例】
1.3.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
1.3.4动画小结
1.jQuery给我们提供了三组动画，show/hide、slideUp/slideDown、fadeIn/fadeOut
2.动画切换方法：slideToggle、fadeToggle，注意：show和hide没有切换的方法。
3.淡入淡出到某个值：fadeTo方法。
4.show/slideDown/fadeIn三个是显示效果、hide/slideUp/fadeOut三个是隐藏效果。
5.show/hide修改的是元素的height,width,opacity。slide系列方法修改的是元素的height。fade系列方法修改的是元素的opacity。这三种方法修改的这些值，都是带数字的，因为带了数字才能做渐变。

1.3.5自定义动画
animate：自定义动画
$(selector).animate({params},[speed],[callback]);
// {params}：要执行动画的CSS属性，带数字（必选）
// speed：执行动画时长（可选）
// callback：动画执行完后立即执行的回调函数（可选）
动画支持的属性：
http://www.w3school.com.cn/jquery/effect_animate.asp
案例【360开机动画】
1.3.6easing参数
控制动画在不同元素的速度，默认为“swing”
“swing”：在开头和结尾移动慢，在中间移动速度快
“linear”：匀速移动

1.3.7动画队列问题
引出事件队列效果【案例：二级菜单案例】
在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：地铁进站）。
1.3.8停止动画
stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
//第一个参数：是否清除队列
//第二个参数：是否跳转到最终效果
最常用的停止动画：stop();
1.4jquery操作DOM(节点)
1.4.1创建元素
//$(htmlStr)
//htmlStr：html格式的字符串
$(“<span>这是一个span元素</span>”);
1.4.2添加元素
?添加新建的元素：
//方法一：将jQuery对象添加到调用者内部的最后面。
var $span = $(“<span>这是一个span元素</span>”);
$(“div”).append($span);

//方法二：参数传字符串，会自动创建成jquery对象
$(“div”).append(“<span>这是一个span元素</span>”);
?添加已经存在的元素
var $p = $(“p”);
$(“div”).append($p);
//注意：如果添加的是已经存在的元素，那么会把之前的元素给干掉。（类似于剪切的功能）。
类似的用法：append prepend after before
【案例：省市选择】
?使用html方法创建元素
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()
【案例：表格创建案例】
1.4.3清空元素
empty：清空指定节点的所有元素，自身保留(清理门户)
$(“div”).empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
清空元素的第二种方法
$(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。
1.4.4删除元素
remove：相比于empty，自身也删除（自杀）
$(“div”).remove();
【案例】：表格删除
1.4.5克隆元素
作用：复制匹配的元素
// 复制$(selector)所匹配到的元素（深度复制）
//cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
$(selector).clone();

1.2.1jQuery操作属性（重点）
?设置单个属性
//第一个参数：需要设置的属性名
//第二个参数：对应的属性值
attr(name, value);
//用法举例
$(“img”).attr(“title”,”哎哟，不错哦”);
$(“img”).attr(“alt”,“哎哟，不错哦”);
?设置多个属性
//参数是一个对象，包含了需要设置的属性名和属性值
attr(obj)
//用法举例
$("img").attr({
title:"哎哟，不错哦",
alt:"哎哟，不错哦",
style:"opacity:.5"
});
?获取属性
//传需要获取的属性名称，返回对应的属性值
attr(name)
//用法举例
var oTitle = $("img").attr("title");
alert(oTitle);
注意：
1.获取属性时，只会获取到第一个元素对应的属性，与css方法一样
2.获取属性时，如果该属性不存在，那么会返回undefined
【案例：美女相册】
?移除属性
//参数：需要移除的属性名，如果传空，那么不会有任何操作，注意，并不是移除所有的属性。区分removeClass。
removeAttr(name);
//用法举例
$("img").removeAttr("title");
?prop
注意：在jQuery1.6之后，对于checked、selected、disable这类boolean类型的属性来说，如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。，使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。
//设置属性
$(“:checked”).prop(“checked”,true);
//获取属性
$(“:checked”).prop(“checked”);//返回true或者false
【案例：表格全选、反选案例】
1.2.2jQuery操作值与内容
?val方法
val方法用于设置和获取表单元素的值，例如input、select、textarea的值
//设置值
$(“#name”).val(“张三”);
//获取值
$(“#name”).val();
【案例：搜索提示框】
?html方法
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()
?text方法
//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()
html方法与text方法的区别：
html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
1.2.3jQuery操作尺寸
?height
设置或者获取高度
//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();
返回值是number类型（比如200），而使用$(“img”).css(“width”)返回的是字符串（比如200px）
?width
设置获取获取宽度，与高度操作功能一样
//带参数表示设置宽度
$(“img”).width(200);
//不带参数获取宽度
$(“img”).width();
1.2.4jQuery操作坐标值
?offset
设置或者获取元素相对于文档document的位置。
//设置位置
$(selector).offset({left:100, top: 150});
//获取位置
$(selector).offset();
注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top
?position
获取相对于其最近的有定位的父元素的位置。
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();
注意：position方法只能获取，不能设置
?scrollTop
设置或者获取垂直滚动条的位置
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);
// 无参数表示获取偏移
$(selector).scrollTop();
?scrollLeft
设置或者获取水平滚动条的位置
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollLeft(100);
// 无参数表示获取偏移
$(selector).scrollLeft();
【案例：仿腾讯固定菜单栏案例】
1.3jQuery事件机制
JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
1.3.1jQuery事件的发展历程
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
?简单事件绑定
click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
scroll(handler) 滚动事件
缺点：一次只能绑定一个事件
?bind事件绑定
不推荐使用，jQuery1.7版本后被on取代
//绑定多个事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
缺点：不支持动态创建出来的元素绑定事件。
?delegate事件绑定
支持动态绑定事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
理解：为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。
?on事件绑定
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
1.3.2on事件绑定（重点）
优势：最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

例子：
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。
$(selector).on( "click", function() {});

1.3.3事件解绑
?unbind() 方式（不用）
作用：解绑事件
$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
?undelegate() 方式（不用）
作用：解绑事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
?off方式（重点）
作用：解绑事件
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off(“click”);
// 解绑所有代理的click事件，元素本身的事件不会被解绑
$(selector).off( “click”, “**” );
1.3.4事件触发
简单事件触发
$(selector).click(); //触发 click事件
trigger方法触发事件
$(selector).trigger(“click”);
triggerHandler触发 事件响应方法，不触发浏览器行为
比如:文本框获得焦点的默认行为
$(selector).triggerHandler(“focus”);

1.3.5jQuery事件对象（）
对象属性 解释
event.type 事件类型
event.data 存储绑定事件时传递的附加数据
event.target 点了谁就是谁
event.currentTarget 当前DOM元素，等同于this
event.delegateTarget 代理对象
screenX和screenY 对应屏幕最左上角的值
offsetX和offsetY 点击的位置距离元素的左上角的位置
clientX和clientY 距离页面左上角的位置（忽视滚动条）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.switch 鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode 按下的键盘代码
event.stopPropagation() 阻止事件冒泡行为
event.preventDefault() 阻止浏览器默认行为
案例【按键变色】
1.4jQuery补充
1.4.1链式编程
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
1.4.2隐式迭代
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

案例【五角星评分控件】
1.4.3each方法
有了隐式迭代，为什么还要使用each函数遍历？
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
如果要对每个元素做不同的处理，这时候就用到了each方法

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

【案例】 什么都看不见
1.4.4多库共存
我们知道jQuery占用了$这个标识符，如果引用的其他库也用到$这个标识符，这时候为了保证每个库都能正常使用，这时候就存在了多库共存的问题。
后引入的$的会覆盖掉先引入的库中的$。
$ === jQuery
解决办法：
jQuery的$和jQuery是两个相同的变量，因此遇到多库共存的时候，可以让jquery交出$符的控制权，这个时候还是可以使用$.
console.log($);//function(selector, context){}
//$.noConflict();//释放$的控制权
console.log($);{name:”zhangsan”,age:12}

jQuery(function () {
jQuery("div").html("我不是div的内容");
});
1.5jQuery插件机制
1.5.1第三方插件
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
jquery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
如何使用第三方插件：
1.引入jQuery文件
2.引入插件
3.使用插件
1.5.2制作插件
全局jQuery函数扩展方法
$.pluginName = function() {};

jQuery对象扩展方法
$.fn. pluginName = function() {};
1.5.3jQuery UI
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：http://api.jqueryui.com/category/all/