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简介的更多相关文章

  1. jQuery简介<思维导图>

    jQuery是继prototype之后有一个优秀的Javascript库,它由John Resig创建于2006年1月.它简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.它独特 ...

  2. 原创：整理编辑jQuery全部思维导图【附下载地址】

    主图 全部图已经打包:下载地址 2. 3. 4. 5. 6. 附上一点简单说明 Dom对象和jquer对象之间的转化 如何将一个jquery对象转换为DOM对象? test是一个span元素 var ...

  3. HTML语义化简介思维导图

  4. Web思维导图实现的技术点分析（附完整源码）

    简介 思维导图是一种常见的表达发散性思维的有效工具,市面上有非常多的工具可以用来画思维导图,有免费的也有收费的,此外也有一些可以用来帮助快速实现的JavaScript类库,如:jsMind.KityM ...

  5. jQuery的入门与简介《思维导图》

    <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我知道了jQuery拥有强大的选择器, 出色的DOM操作 ...

  6. jQuery插件的编写和使用 <思维导图>

    以下是jQuery插件的编写和使用的思维导图,全屏观看,请点击:jQuery插件的编写和使用

  7. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  8. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  9. jQuery中的选择器<思维导图>

    选择器是jQuery的重要组成部分,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.如果能熟练地使用选择器,不仅能简化代码,而且可以达到事半功倍的效果. 下面是关于jQuery中 ...

  10. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

随机推荐

  1. 普通图片预览及demo（非分块）

    演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...

  2. MySQL之账户管理

    MySQL之账户管理 账户管理是MySQL用户管理最基本的内容.包括登录,退出MySQL服务器.创建用户.删除用户.密码管理和权限管理等内容. 其中登录方式非常简单,在这个地址有:http://www ...

  3. pom.xml详解

    setting.xml主要用于配置maven的运行环境等一系列通用的属性,是全局级别的配置文件:而pom.xml主要描述了项目的maven坐标,依赖关系,开发者需要遵循的规则,缺陷管理系统,组织和li ...

  4. HEX文件格式和其校验算法

    这次我将在原来的基础上(http://www.cnblogs.com/libra13179/p/5787084.html)继续讲解HEX文件的格式 打开app_valid_setting_apply. ...

  5. Gson---简单入门

    1-1.Diaosi.java(bean) package Bean; import com.google.gson.annotations.SerializedName; public class ...

  6. CubieTruck上安装mjpg_streamer

    最近手头项目需要用到一个上位机,需要在上位机上实现远程访问及视频监控.其中视频监控采用了网上资料较多的mjpg_streamer进行视频处理.在使用中遇到许多坑也一并记录下来. 首先安装依赖环境和检测 ...

  7. Android SDK的安装与环境变量配置

    配置Andriod环境变量前提是要先安装好JAVA环境 1.下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/ind ...

  8. vim的树形菜单NERDTREE的设置

    网上比较好的一篇文章:http://coolshell.cn/articles/1679.html http://coolshell.cn/articles/11312.html 1.Vim安装NER ...

  9. SQL Server中Rowcount与@@Rowcount的用法

    rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...

  10. CentOS6.3连接Xshell出现的问题（连接失败--需要设置ONBOOT=“yes”，开启网卡驱动）

    小白记录: 安装Xshell之后连接CentOS6.3的baseService版本,连接不上, service network restart  只有两个OK, 百度查找资料后--得到结论:网卡设置之 ...