博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery简介
阅读量:5289 次
发布时间:2019-06-14

本文共 2659 字,大约阅读时间需要 8 分钟。

 

jQuery简介

 

  jQuery是继Prototype之后的又一个javascript库,它由John Resig创建于20061月。

 

Javascript库作用比较:

1. Prototypehttp://www.prototypejs.org/

 

   prototype是最早成型的javascript库之一,优点:它对javascript的内置对像(如string对象、Array对象)做了大量扩展。缺点:成型年代早,在整体对于面向对象编程思想上把握不到位,导致结构松散。

2. Dojo(http://www.dojotoolkit.org/)

  优点:提供了一些其它javascript库没有的功能,如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库、Comet支持等,非常适合企业级应用开发。缺点:学习曲线陡,文档不齐全,最要命的是API不稳定,每次升级都可能导致已有的程序失效。

3.YUIhttp://developer.yahoo.com/yui

  YUI全名(The YahooUser 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. jQueryhttp://jquery.com

  优点:拥有强大的选择器、出色的DOM操作、可靠的事件处理、出色的兼容性、链式操作。

jQuery的优势

 1.轻量级

  jQuery非常轻巧,采用Dean Edwardsde Packer压缩后,不到30KB,如果服务器端启用gzip压缩后,只有16KB

 2.强大的选择器

  Jquery支持CSS1CSS3多达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程序:

 

    第一个jQuery程序      //src是引入jquery的路径    其中有这样一段代码:$(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.jsjquery.js,为了避免“$”对象的冲突,我们使用jquery中的.noConflict()来解决冲突,但需要注意引入javascript库的顺序。

  使用.noConflict()

解决方法一:(其它库在前)

    第一个jQuery程序    
//src是引入jquery的路径

test

test

 

解决方法二:(其它库在后)

    

//src是引入jquery的路径

test

test

 

不使用.noConflict()

一:jQuery(function(){

···})内部不使用其它库的代码

    

test

test

 

二:利用闭包特性:

    

test

test

 

 

 

 

 

转载于:https://www.cnblogs.com/chef5-3/p/3420374.html

你可能感兴趣的文章
iOS开发之开发者申请
查看>>
Monkey测试
查看>>
二、Statement 、PreparedStatement 、CallableStatement
查看>>
selenium学习
查看>>
bzoj3110: [Zjoi2013]K大数查询 【树套树,标记永久化】
查看>>
nodejs介绍
查看>>
TCP心跳包
查看>>
Android WebView常见问题解决方案汇总
查看>>
Spring Cloud (3)B Ribbon 负载均衡 IRule
查看>>
==和equals的比较
查看>>
css扁平化博客学习总结(三)header代码实现
查看>>
CF 1003D Coins and Queries【位运算/硬币值都为2的幂/贪心】
查看>>
iOS开发——多线程篇——NSOperation(基于GCD多线程编程),下载图片并合成新图片...
查看>>
(*)(转)要快速学习SSM框架,你需要一套学习曲线平滑的教程
查看>>
Nginx服务介绍
查看>>
结构体位域介绍
查看>>
this_scope_call_apply_bind_柯里化 详细分析
查看>>
HR函数学习01——创建组织单位
查看>>
selenium代理
查看>>
串口号都属于“使用中”的解决方法
查看>>