认识jQuery

一、JavaScript库

把一些浏览器兼容性的代码或者需要常用的函数装在一个js文件里,封装了很多js代码的一个js文件就是一个库

二、jQuery

是一个JavaScript库，免费开源的，体积小，链式编程，隐式迭代，很多优点
jQuery 的功能概括：html 的元素选取、html的元素操作、html dom遍历和修改、js特效和动画效果、css操作、html事件操作、ajax异步请求方式

三、版本

网址：jquery.com

jQuery的js文件每个版本有两个，第一个是正常版本，第二个是压缩版本，开发的时候两个都可以使用，上线的时候推荐使用压缩版本

jQuery 版本 2 以上不支持 IE6，7，8 浏览器。如果需要支持 IE6/7/8，那么请选择1.9，你还可以通过条件注释在使用 IE6/7/8 时只包含进1.9。

<!--[if lt IE 9]><script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!--><script src="jquery-2.0.0.js"></script>
<!--<![endif]-->

四、初体验

1.常识：

如果需要使用jQuery中的属性或者方法，那么需要jQuery.属性或者jQuery.方法（）来使用
简单的写法：$.属性，或者$.方法
大多数情况下，jQuery中使用的都是方法，属性很少
jQuery中几乎把DOM的事件都封装成了一个方法，在jQuery中几乎是把on去掉，然后变成方法了

    <!-- 例子:DOM中注册事件: document.getElementById("id的属性值").οnclick=匿名函数;jQuery中注册事件:$("#id属性值").click(匿名函数)-->

2.案例

    <input type="button" value="设置" id="btn"><div id="dv"></div><!-- 引入js文件(百度cdn) --><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>//点击按钮.设置div的宽和高,以及背景颜色
        $("#btn").click(function(){$("#dv").css({"width":"200px","height":"200px","backgroundColor":"yellow"});});</script>

    <input type="button" value="修改" id="btn"><p></p><p></p><p></p><p></p><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>//修改所有p标签的内容
        $("#btn").click(function(){$("p").text("标签p的内容被修改了");});</script>

五、顶级对象

jQuery的顶级对象jQuery------符号$代替，方便使用
浏览器的顶级对象window
页面的顶级对象document

六、jQuery对象和DOM对象互转的问题

元素通过DOM获取就是DOM对象，通过jQuery获取就是jQuery对象
DOM对象调用jQuery的方法不能实现，必须是jQuery对象才能调用jQuery方法
jQuery对象调用DOM对象的属性和方法也不能实现，但可以使用jQuery对象[0]转DOM对象

    <input type="button" value="点击" id="btn1"><input type="button" value="点击" id="btn2"><!-- 引入jQuery文件 --><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>//通过DOM获取的DOM对象var btnObj1=document.getElementById("btn1");btnObj1.click(function(){console.log("哈哈");//无效
        });//通过jQuery获取的jQuery对象---转DOM对象var btnObj2=$("#btn2");btnObj2[0].onclick=function(){console.log("哈哈");//哈哈
        };</script>

七、jQuery文件的引入

下载代码文件至本地项目中，引入。

<script src="jQuery文件的地址"></script>

通过 CDN（内容分发网络）引用它

使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。

同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

菜鸟教程CDN：<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>百度CDN：<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>又拍云：<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>新浪：<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>Google：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> （站点用户是国外的才使用google的，国内使用google不稳定）Microsoft：<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

八、案例：网页开关灯

    <!-- DOM版本的写法 --><input type="button" value="DOM关灯" id="btn1"><script>document.getElementById("btn1").onclick=function(){var body=document.body;if(body.style.backgroundColor=="black"){body.style.backgroundColor="";this.value="DOM关灯";}else{body.style.backgroundColor="black";this.value="DOM开灯";}};</script>

 <!-- jQuery版本写法 --><input type="button" value="jQuery关灯" id="btn2"><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$("#btn2").click(function(){if($(this).val()=="jQuery关灯"){$("body").css("backgroundColor","black");$(this).val("jQuery开灯");}else{$("body").css("backgroundColor","");$(this).val("jQuery关灯");}});</script>