jQuery学习笔记1

来源：互联网发布：留学文书怎么写知乎编辑：程序博客网时间：2024/05/19 10:14

1、jQuery简介

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有65%使用了jQuery，是目前最受欢迎的JavaScript库。jQuery 是开源软件，使用MIT许可证授权。[4] jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择DOM元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery 也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 jQuery 函数库能够创建功能强大的动态网页以及网络应用程序。

2、jquery的优势

相对于传统的Javascript和DOM来说了,现在将JQuery的优势总结如下:
（1）轻量级：JQuery非常小,压缩包只有18KB左右。
（2）强大的选择器：JQuery不仅支持CSS里的所有选择器,还有JQuery独有的选择器。
（3）出色的DOM操作封装：JQuery封装了大量常用的DOM操作。
（4）完善的事件和事件对象兼容机制：JQuery能够在不同浏览器中兼容,同时还修复了一些浏览器之间的差异。
（5）链式编程：即对发生在同一个JQuery对象上的一组动作,可以直接连写而无需重复获取对象,使得JQuery的代码无比优雅。
（6）隐式迭代（一般情况下不需要for循环遍历dom对象）
（7）行为与结构分离
（8）完善的文档（官方文档相当完备，官方blog每次更新都会有详细说明）
（9）丰富的插件
（10）完善的ajax

（11）不污染全局变量($可以随时交出控制权)

下面对第（5）和（6）两点进行解释：

关于（5）链式编程，对于一个需求：有一个超链接，当页面加载完毕的时候，要让链接里的文字变成红色，当我点击这个链接的时候，我需要让这个链接有一个黄色的边框，如果用Javascript实现，代码如下：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>demo1</title><script src="jquery.js"></script></head><body><a href="#">我是一个链接</a><script>alert(1);var a = document.getElementsByTagName('a')[0];a.style.color="red";a.onclick=function(){this.style.border="10px solid #f90";};</script></body></html>

这里要分两步，第一步是将获得的元素的样式设置成红色，第二部是触发点击事件的时候给链接加一个边框。

再看使用jQuery的实现：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>demo1</title><script src="jquery.js"></script></head><body><a href="#">我是一个链接</a><script>alert(1);var a = $('a');a.css('color','red').click(function(){$(this).css('border','10px solid #38a38a');});</script></body></html>

这里实现需求也是两步，但这两步是连续的，即：a.css('color','red').click

关于（6）隐式迭代（一般情况下不需要for循环遍历dom对象）

对于一个需求：有三个标签p，每点击一个标签p弹出当前标签里的内容，Javascript实现如下：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>demo2</title><script src="jquery.js"></script></head><body><p>我是第1个标签</p><p>我是第2个标签</p><p>我是第3个标签</p><script>var p = document.getElementsByTagName('p');for(var i=0;i<p.length;i++){p[i].onclick=function(){alert(this.innerHTML);};}</script></body></html>

这里需要用到一个for循环，再来看jQuery的实现：

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>demo2</title><script src="jquery.js"></script></head><body><p>我是第1个标签</p><p>我是第2个标签</p><p>我是第3个标签</p><script>var p = $('p');p.click(function(){alert($(this).html());});</script></body></html>

这里并不需要for循环，也就是说，一般情况下，jQuery不需要for循环遍历dom对象。

3、jquery的不足

（1）不能向后兼容
新版本可能不兼容早期版本，如果想要升级jquery版本可能会付出额外的维护成本
（2）插件兼容
和上一点相同
（3）插件之间的冲突
如果在同一张页面上引用多个插件时，可能会引起冲突现象，特别是用这些插件依赖相同事件或相同选择器时最容易出错，虽然这不是jquery本身的错误。
（4）在大型框架框架中，特别是在开发后台UI框架的时候，jquery对于动画支持相对来说不太给力，需要用引用jquery UI来进行弥补

4、获取jquery最新版本的途径

① 官方网站：http://www.jquery.com
② cdn获取：
a) 谷歌CDN： http://www.google-jquery-cdn.com/
b) 百度CDN：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
c) 微软CDN：http://msdn.microsoft.com/zh-cn/library/ee517318.aspx
d) 新浪CDN：http://sae.sina.com.cn/?m=devcenter&catId=147

5、引入jquery

本地引入
<script src="jquery.js"></script>
引入CDN的jquery（以百度为例）
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

注意：优先引入CDN上的jquery,如果失效再引入本地的jquery，引入必须在head标签里。

什么是CDN？

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。（百度百科）

6、$(document).ready()和window.onload的区别

通常我们想要在页面内容加载完成后运行 JS 时，都会使用 window.onload 来处理，比如：

<script language="javascript">        window.onload = function () {                alert('Hello World!');         } </script>

这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框，但是众所周知，window.onload 的特点是页面元素全部加载完成后才执行，比如页面内有大量的图片之类，当打开网页时，其实相关的 DOM 已经全部加载完成，此时已经可以执行你想要执行的脚本了，可是图片的加载速度要很慢于页面的 HTML，这显然在大多数情况下不是我们想要的。 jQuery 提供一个 $(document).ready(); 来解决此问题，当页面 DOM 加载完成后，ready() 里的函数便会立即执行。

$(document).ready()和window.onload的区别:

7、DOM对象和jQuery对象简介

（1）DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树。可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。DOM对象不能使用任何jquery中的方法，只能使用DOM对象中的方法。
（2）jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。jquery对象不能使用DOM对象中的方法，只能使用jquery中的方法。如果DOM对象中的方法在jquery库中被改写过，那么可以使用DOM对象中的方法。

8、jQurey对象和DOM对象的相互转换

在讨论jQurey对象和DOM对象的相互转换之前，先约定好定义变量的风格。如果获取的对象是jQuery对象，那么在变量前面加上$，例如：

var  $variable   =   jQuery 对象;

如果获取的是DOM对象，则定义如下：

var  variable    =   DOM对象;

（1）jQuery对象转成DOM对象
jQuery对象不能使用DOM中的方法，但如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
（2）DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)。转换后，可以任意使用jQuery中的方法。通过以上方法，可以任意地相互转换jQuery对象和DOM对象。最后再次强调，DOM对象才能使用DOM中的方法，jQuery对象不可以使用DOM中的方法。
注意：平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

0 0