学习笔记《锋利的jQuery》-认识jQuery

最新推荐文章于 2020-02-13 22:07:50 发布

小虎

最新推荐文章于 2020-02-13 22:07:50 发布

阅读量927

点赞数

分类专栏： JavaScript 文章标签： jQuery JavaScript 链式操作开发插件

本文链接：https://blog.csdn.net/xuweisen/article/details/9069869

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、JavaSrcipt和JavaScript库

JavaScript弊端

复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。

Ajax的诞生（Asynchronous JavaScript And Xml）

使JavaScript不在是一种仅仅用于制作Web页面的简单脚本。

JavaScript库的作用及对比

Prototype(http://www.prototypejs.org/)，最早成型的JavaScript库之一，对JavaScript的内置对象（例如String对象）做了大量的扩展。Prototype可以看着是把很多好的、有用的JavaScript的方法组合在一起而形成的JavaScript库。由于Prototype成型太早，从整体上面向对象的编程思想把握欠佳，导致结构比较松散。不过现在的Prototype也在慢慢改进。

Dojo(http://dojotoolkit.org/)，它的强大之处在于提供了很多其他的JavaScript库所没有提供的功能。例如离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等等。Dojo是一款非常适合企业级应用的JavaScript库，并且得到了IBM、SUN和BEA等一些大公司的支持。但缺点也很明显：学习曲线陡，文档不齐全，最严重的就是API不稳定，每次升级都可能导致已有的程序失效。但自从Dojo的1.0.0版出现以后，情况有所好转，Dojo还是一个很有发展潜力的库。

YUI(http://developer.yahoo.com/yui/)，是由Yahoo公司开发的一套完备的、扩展性良好的富交互网页程序工具集。YUI封装了一系列比较丰富的功能，例如DOM操作和Ajax的应用等，同时还包括了几个核心的CSS文件。该库本身文档极其完备，代码编写也非常规范。

ExtJS(http://www.extjs.com/)，原本是对YUI的一个扩展，主要用于创建前端用户界面，如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础库，而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的副客户端应用，能使B/S应用更加具有活力。但是由于Ext侧重于界面，比较臃肿，使用之前请先权衡利弊。

MooTools(http://mootools.net/)，是一套轻量、简洁、模块化和面向对象的JavaScript框架。语法和Prototype类似，但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化实现非常优秀，是个非常不错的JavaScript库。

jQuery(http://jquery.com/)，是一个轻量级的库，拥有强大的选择器，出色的DOM操作，可靠的事件处理、完善的兼容性和链式操作等功能。

二、jQuery优势

1、轻量级

2、强大的选择器

3、出色的DOM操作的封装

4、可靠的事件处理机制

5、完善的Ajax

6、不污染顶级变量

7、出色的浏览器兼容性

8、链式操作方式

9、隐式迭代

10、行为层与结构层分离

11、丰富的插件支持

12、完善的文档

13、开源

三、jQuery代码的编写

配置jQuery环境

1、获取jQuery最新版本，网址：http://jquery.com/

2、jQuery库类型分为两种，一种是完整无压缩版本，主要用于测试、学习和开发；另外一种是经过JSMin等工具压缩后的版本，主要用于产品和项目。

3、jQuery不需要安装，只需要把文件放在公共目录位置，需要使用的页面引用即可。

window.onload与$(document).ready()的对比

 
   window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后
（包括图片）才能执行 网页中所有DOM结构绘制完毕后就执行，
可能DOM元素关联的东西并没有加载完
编写个数 不能同时编写多个
以下代码执行效果：
window.onload
 = function(){ alert("test1"); };
window.onload = function(){ alert("test2"); };
结果只会输出“test2” 能同时编写多个
以下代码执行效果：
$(doucment).ready(function(){ alert("test1"); });
$(doucment).ready(function(){ alert("test2"); });
结果两次都输出
简化写法 无 $(doucment).ready(function(){    
 //...   });
可以简写成：
$(function(){     //...    });

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片）才能执行	网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数	不能同时编写多个以下代码执行效果： window.onload = function(){ alert("test1"); }; window.onload = function(){ alert("test2"); }; 结果只会输出“test2”	能同时编写多个以下代码执行效果： $(doucment).ready(function(){ alert("test1"); }); $(doucment).ready(function(){ alert("test2"); }); 结果两次都输出
简化写法	无	$(doucment).ready(function(){ //... }); 可以简写成： $(function(){ //... });

链式操作风格

$(".has_children").click(function(){

    $(this).addClass("highlight")               //为当前元素增加highlight类

           .children("a").show().end()          //将子节点的<a>元素显示出来，并重新定位到上次操作的元素

     .siblings().removeClass("highlight")       //获取原素的兄弟元素，并去掉它们的highligth类

           .children("a").hide();               //将兄弟元素下的<a>元素隐藏

});

为代码添加注释

//在一个id为table的表格的tbody中，如果每行最后一列中的checkbox没有被禁用，则把这行的背景色设为红色。

$("#table>tbody>tr:has(td:last:has(:checkbox:enabled))".css("background","red");

四、jQuery对象和DOM对象

DOM对象

Document Object Model，文档对象模型。每一份DOM都可以表示成一棵树。可以通过JavaScript中的方法获取，如下：

var domObj = document.getElementById("domId"); //获取DOM对象

var objHtml = domObj.innerHTML;//使用JavaScript的属性——innerHTML

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

$("#mydiv").html();等价于：document.getElementById("mydiv").innerHTML;

jQuery对象和DOM对象的相互转换

命名规则：

var $variable = jQuery对象;

var variable = DOM对象;

jQuery对象转成DOM对象  实例：

获取jQuery对象：var $cr = $("#cr");

转成DOM对象：var cr = $cr[0];  或者var cr = $cr.get(0);

DOM对象转成jQuery对象 实例：

获取DOM对象：var cr = document.getElementById("cr");

转成jQuery对象：var $cr = $(cr);

五、解决jQuery和其它库的冲突

在jQuery库中，几乎所有的插件都被限制在它的命名空间里。通常，全局（global）对象都被很好的存储在jQuery命名空间里，因此当把jQuery和其它JavaScript库（例如ProtoType、MooTools或YUI)一起使用时，不会引起冲突。

注意：默认情况下，jQuery用$作为自身的快捷方式。

1、jQuery库在其它库之后导入

在其它库和jQuery库都被加载完毕后，可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他的JavaScript库。

方法一

jQuery.noConflict();//将控制权移交给prototype.js

jQuery(function(){  //使用jQuery

    jQuery("#mydiv").html("我的世界");

});

$("pp").style.display = 'none'; //使用prototype

方法二

var $j=jQuery.noConflict();//自定义一个快捷方式

$j(function(){	//使用jQuery,利用自定义的快捷方式

	$j("#mydiv").html("我的世界");

});

$("pp").style.display='none';//使用prototype

方法三

jQuery.noConflict();

jQuery(function($){

	$("#mydiv").html("我的世界");

});

$("pp").style.display = 'none';//使用prototype

方法四

jQuery.noConflict();

(function($){

	$("#mydiv").html("我的世界");

})

(jQuery);

$("pp").style.display = 'none'; //使用prototype

2、jQuery库在其它库之前导入

无需调用jQuery.noConflict()函数。可以直接使用$()方法作为其它库的快捷方式。而调用jQuery方法，需要使用“jQuery”。

六、jQuery开发工具和插件

1、Dreamweaver

Dreamweaver是建立Web站点和应用程序的专业工具。

要使Dreamveaver支持jQuery自动代码提示功能，方法非常简单，只需要下载一个插件即可。在http://xtnd.us/dreamweaver/jquery网址中下载一个名为jQuery_API.mxp的插件。

在Dreamweaver中依次选择“命令”->“扩展功能”->“安装扩展”->“jQuery_API.mxp”命令后，就会自动安装插件了。安装成功后，重启Dreamweaver生效。

2、Aptana

Aptana是一个功能非常强大、开源和专注于JavaScript的Ajax开发IDE。

3、jQueryWTP和Spket插件

jQueryWTP和Spket这两款插件都可以使Eclipse支持jQuery自动提示功能，可以分别在http://www.langtags.com/jquerywtp/和http://spket.com/网址中下载相应的插件。

4、Visual Studio 2008

Visual Studio 2008版本升级。下载补丁jQuery-ver-vsdoc.js，把补丁与jQuery-ver.js放在同一目录，jQuery就有了自动提示功能。

5、其它工具

由于jQuery 本身就是JavaScript，因此可以用任意通用文本编辑器进行开发，例如：EditPlus、EmlEditor和VIM等等。

小虎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记《锋利的jQuery》-认识jQuery

一、JavaSrcipt和JavaScript库JavaScript弊端复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。Ajax的诞生（Asynchronous JavaScript And Xml）使JavaScript不在是一种仅仅用于制作Web页面的简单脚本。JavaScript库的作用及对比Prototype(http://www.pro
复制链接

扫一扫

专栏目录