jQuery简介
jQuery简介
jQuery是继Prototype之后的又一个javascript库，它由John Resig创建于2006年1月。
Javascript库作用比较：
1. Prototype（http://www.prototypejs.org/）
prototype是最早成型的javascript库之一，优点：它对javascript的内置对像（如string对象、Array对象）做了大量扩展。缺点:成型年代早，在整体对于面向对象编程思想上把握不到位，导致结构松散。
2. Dojo(http://www.dojotoolkit.org/)
优点：提供了一些其它javascript库没有的功能，如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库、Comet支持等，非常适合企业级应用开发。缺点：学习曲线陡，文档不齐全，最要命的是API不稳定，每次升级都可能导致已有的程序失效。
3.YUI（http://developer.yahoo.com/yui）
YUI全名(The Yahoo！User Interface Library)是Yahoo打造出来的库。
优点：提供了比较丰富的DOM操作、Ajax应用一系列封装、包括几个核心的CSS、极其完备的文档、编写非常规范的代码、不错的扩展性。
4. ExtJS(http://www.sencha.com/products/extjs/)
ExtJs，也长称Ext。原本是对YUI的扩展。优点：主要用于创建前端用户界面，提供了极其丰富的组件。缺点：由于侧重于界面，所以本身比较臃肿，不压缩的文件上兆(MB)，Ext并非完全免费，在商业用途方面需要付费获得授权许可。
5. MooTools(http://mootools.net/)
优点：轻量级的库、简洁、模块化(模块化思想非常优秀，核心代码只有8K)、面向对象的javascript框架，语法几乎和Prototype一样，彻底的完全的面向对象编程思想、语法简洁直观，文档完善。
6. jQuery（http://jquery.com）
优点：拥有强大的选择器、出色的DOM操作、可靠的事件处理、出色的兼容性、链式操作。
jQuery的优势
1.轻量级
jQuery非常轻巧，采用Dean Edwardsde Packer压缩后，不到30KB,如果服务器端启用gzip压缩后，只有16KB。
2.强大的选择器
Jquery支持CSS1到CSS3多达60多种选择器，和jquery独创的高级而复杂的选择器。
3.出色的DOM操作的封装
Jquery封装了大量常用的DOM操作。
4.可靠的事件处理机制
5.完善的Ajax
Jquery将所有的Ajax操作封装到了一个函数$.ajax里。
6.不污染顶级变量（闭包性）
Jquery只建立一个名为jquery的对象，其所有的方法都在这个对象之下。另外的一个别名$也可以随时交出控制权。
7.出色的浏览器兼容性
8.链式操作
9.行为层与结构层分离
开发者不需要再去html调用事件，而是直接使用jquery选择器选中元素，然后直接给元素添加事件。
10.丰富的插件支持
11.完善的文档
12.开源
13.隐式迭代(省去循环)
编写简单的jquery代码
在jquery库中，$就是jquery的一个简写形式，比如$(“#foo”)和jQuery(“#foo”)是等价的。如果没有特别说明，程序中的$符号都是jQuery的一个简写形式。
编写第一个jquery程序：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>第一个jQuery程序</title>
<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script> //src是引入jquery的路径
</head>
<body>
<script type="text/javascript ">
$(document).ready(function()
{
alert("Hello jQuery!");
});
</script>
</body>
</html>
其中有这样一段代码：
$(document).ready(function ()
{
//代码
});
它类似于window.onload,但与window.onload还是有一定区别。如下：
jQuery对象与DOM对象的相互转换：
1.获取jquery对象：
Var $variable =jQuery对象；
2.获取DOM对象：
Var variable =DOM对象；
将jquery对象转换成DOM对象，可以把jquery对象看作DOM对象的数组，通过索引下标，就能从jquery对象中获取DOM对象：
jQuery 对象[index] 或者 jQuery 对象.get(index)
jQuery对象转换DOM对象：
1.
Var $user=$(“#user”); //获取jQuery对象
Var $user=$ user[0]; //将获取的jQuery对象转换为DOM对象
2.
Var $user=$(“#user”); //获取jQuery对象
Var user=$user.get(0); //将获取的jQuery对象转换为DOM对象
DOM对象转换为jQuery对象：
Var user = document.getElementById(“user”); //获取DOM对象
Var $user = $(“user”); //将获取的DOM对象转换为jQuery对象
jQuery库与其它库冲突问题：
当我们的项目中存在多种javascript库，比如同时存在prototype.js和jquery.js,为了避免“$”对象的冲突，我们使用jquery中的.noConflict()来解决冲突，但需要注意引入javascript库的顺序。
使用.noConflict()
解决方法一：（其它库在前）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>第一个jQuery程序</title>
<!--引入Prototype库-->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<!--引入jquery库-->
<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script> //src是引入jquery的路径
<script type="text/javascript ">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function()
{//使用jQuery,不再使用“$”
jQuery("p").css("color","red"); //使用jQuery
$("ptest").style.display = "none"; //这里的“$”符号是Prototype的方法
});
</script>
</head>
<body>
<p id="ptest">test<p>
<p>test</p>
</body>
</html>
解决方法二：（其它库在后）
<!--引入jquery库-->
<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script> //src是引入jquery的路径
<script type="text/javascript ">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function()
{//使用jQuery,不再使用“$”
jQuery("p").css("color","red"); //使用jQuery
$("ptest").style.display = "none"; //这里的“$”符号是Prototype的方法
});
</script>
<!--引入Prototype库-->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</head>
<body>
<p id="ptest">test<p>
<p>test</p>
</body>
不使用.noConflict()
一：jQuery(function(){···})内部不使用其它库的代码
<head>
<!--引入jquery库-->
<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<!--引入Prototype库-->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script type=”text/javascript”>
jQuery(function($)
{
$(“p”).css(“color”,”red”); //函数内部的$还是jQuery的$。
});
$(“ptest”).style.diaplay=”none”; //函数外部的$是Prototype的$。
</script>
</head>
<body>
<p id=”ptest”>test<p>
<p>test<p>
</body>
二：利用闭包特性:
<head>
<!--引入jquery库-->
<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<!--引入Prototype库-->
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
<script type=”text/javascript”>
(function($)
{
$(“p”).css(“color”,”red”); //函数内部的$还是jQuery的$。
})(jQuery);
$(“ptest”).style.diaplay=”none”; //函数外部的$是Prototype的$。
</script>
</head>
<body>
<p id=”ptest”>test<p>
<p>test<p>
</body>
jQuery简介的更多相关文章
- jQuery简介<思维导图>
jQuery是继prototype之后有一个优秀的Javascript库,它由John Resig创建于2006年1月.它简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.它独特 ...
- 原创：整理编辑jQuery全部思维导图【附下载地址】
主图 全部图已经打包:下载地址 2. 3. 4. 5. 6. 附上一点简单说明 Dom对象和jquer对象之间的转化 如何将一个jquery对象转换为DOM对象? test是一个span元素 var ...
- HTML语义化简介思维导图
- Web思维导图实现的技术点分析（附完整源码）
简介 思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind.KityM ...
- jQuery的入门与简介《思维导图》
<初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我知道了jQuery拥有强大的选择器, 出色的DOM操作 ...
- jQuery插件的编写和使用 <思维导图>
以下是jQuery插件的编写和使用的思维导图,全屏观看,请点击:jQuery插件的编写和使用
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- jQuery中的选择器<思维导图>
选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
随机推荐
- JUC.Condition学习笔记[附详细源码解析]
目录 Condition的概念 大体实现流程 I.初始化状态 II.await()操作 III.signal()操作 3个主要方法 Condition的数据结构 线程何时阻塞和释放 await()方法 ...
- FileInputStream、FileReader、FileInputStream、FileWriter使用小结
本文是基于Linux环境运行,读者阅读前需要具备一定Linux知识 InputStream包含如下三个方法: int read():从输入流中读取单个字节,返回所读取的字节数据(字节数据可直接转化为i ...
- Python-lambda函数，map函数，filter函数
lambda函数主要理解: lambda 参数:操作(参数). lambda语句中,冒号前是参数,可以有多个,用逗号隔开,冒号右边的返回值.lambda语句构建的其实是一个函数对象 map函数: ma ...
- C语言中两种方式表示时间日期值time_t和struct tm类型的相互转换
使用gmtime函数或localtime函数将time_t类型的时间日期转换为structtm类型: 使用time函数返回的是一个long值,该值对用户的意义不大,一般不能根据其值确定具体的年.月.日 ...
- VC++ MFC获取对话框上控件的位置
CRect rect; GetDlgItem(控件ID)->GetWindowRect(&rect);//获取控件的屏幕坐标 ScreenToClient(&rect);//转换 ...
- c#winform窗体嵌入
最近开发项目,错误的理解了需求,自己做了个窗体的嵌套,虽然是错误的理解了,但是功能还是实现了,做下标记,需要时可以拿来看看. 新建两个窗体Form1和Form2,现在需要将Form2显示到Form1里 ...
- Unity3D 物体移动方式
1. 简介 在Unity3D中,有多种方式可以改变物体的坐标,实现移动的目的,其本质是每帧修改物体的position. 2. 通过Transform组件移动物体 Transform 组件用于描述物体在 ...
- python之路-Day11
引子 到目前为止,我们已经学了网络并发编程的2个套路, 多进程,多线程,这哥俩的优势和劣势都非常的明显,我们一起来回顾下 协程 协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程: ...
- sqlserver存取过程-游标
ALTER proc [dbo].[common_proc_temp2] as begin declare @id varchar(50); declare @cbcontractid varcha ...
- Git命令学习摘要
1.git init --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...