谈谈新手对 jQuery的认识

最新推荐文章于 2022-06-15 19:48:12 发布

皮皮攻城狮

最新推荐文章于 2022-06-15 19:48:12 发布

阅读量517

点赞数 2

分类专栏： Java jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44797327/article/details/103329663

版权

Java 同时被 2 个专栏收录

130 篇文章 1 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

谈谈新手开发人员对于 jQuery的认识

内容:

 jQuery概述

 区分JavaScript和JavaScript库

 加入jQuery支持

 编写第一个jQuery程序

 区分jQuery对象和DOM对象

本章重点：

 区分jQuery对象和DOM对象

 编写第一个jQuery程序

概述：

随着JavaScript的兴起，一系列JavaScript库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年ExtJs。可以发现，互联网正在掀起一场JavaScript风暴。在这场风暴中，jQuery以其独特优雅的姿态，始终处于这场风暴的中心，受到越来越多的人的追捧。
jQuery是继Prototype之后又一个优秀的JavaScript库，创建于2006年1月。它简化了遍历HTML文档、操作DOM、处理事件、执行动画和Ajax的操作。它独特而又优雅的代码风格改变了JavaScript程序员编写程序的设计方式和思路。

JavaScript库大致包含以下几种

Prototype
Dojo
ExtJS
MooTools
jQuery

jQuery的优势

jQuery强调的理念是写的少，做的多(write less, do more)。其独特的选择器、链式的DOM操作方式、事件绑定机制、封装完善的Ajax都是其它JavaScript库望尘莫及的。

（1）轻量级
（2）强大的选择器
（3）出色的DOM操作的封装
（4）可靠的事件处理机制
（5）完善的Ajax
（6）不污染顶级变量
（7）出色的浏览器兼容性
（8）链式操作方式
（9）行为层与结构层的分离
（10）丰富的插件支持
（11）完善的文档
（12）开源

配置jQuery环境

 在项目中添加jquery-1.7.2.js

把jquery-1.7.2.js文件放置在具体项目目录下即可方便地引用jQuery库。

 在页面中引入jQuery，在标签内引入jQuery库：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- 在head标签内 引入jQuery  -->
<script src="../scripts/jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

编写第一个jQuery程序

环境配置好后，在jQuery库中， $就是 j Q u e r y 的一个简写形式，比如$ ("#foo")和jQuery("#foo")是等价的， $. a j a x 和 j Q u e r y . a j a x 是等价的, 程序中的$ 符号都是jQuery的一个简写形式。

下面我们开始编写我们第一个jQuery程序：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<!-- 引入 jQuery -->
 <script src="../scripts/jquery-1.7.2.js" type="text/javascript"></script>
 		 <script type="text/javascript">
		$(document).ready(function(){ 		 //等待dom元素加载完毕.
     	    alert("Hello World!");			//弹出一个框。
  		});
 		</script>
</head>
<body>
</body>
</html>

运行后，测试结果如图1-8所示：

输出 Hello World!

代码中有一个也许我们从来没用过的东西，那就是：

$(document).ready(function(){ 
...... 
});

那么这段话是什么意思呢？其实它类似于window.onload，不过跟window.onload还是有些区别。

请看下面的表格对比：

表1-2 window.onload和$(document).ready()对比表

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后(包括图片)才能执行.	网页中所有DOM结构绘制完毕后就执行.
执行时机	不能同时编写多个. 比如：window.onload = function(){alert(“test1”)} ;window.onload = function(){alert(“test2”)} ;结果只会输出”test2”。	能编写多个.比如： $document).ready(function(){ alert("HelloWorld!");});$ (document).ready(function(){ alert(“Hello again!”);});结果两次都输出。
简化写法	无	$document).ready(function(){ ... });可以简写成:$ (function(){… });

表格1-2 window.onload和$(document).ready()对比

jQuery代码风格

杂乱无章的编程

$(".has_children").click(function(){
$(this).addClass("highlight").children("li").show().end().siblings().removeClass("highlight").children("li").hide();
});

不需要理解上面的意思，以后我们会慢慢了解，从上面的代码上来看，这种编程方格无疑是让人眼花缭乱，我们在这里总结了4种情况编程风格：

(1) 对于一个对象不超过3个的操作的，可以直接写成一行，例如：

$("li").show().unbind("click");

(2) 对于多个对象的操作的少量操作，可以每个对象一行，如果涉及到子元素，可以考虑适当的缩进。比如上面提到的代码：

$(this).addClass("highlight")
	.children("li").show().end()
.siblings().removeClass("highlight")
	.children("li").hide();

(3) 对于一个对象的较多操作，建议每行写一个，或者按功能块区分。例如：

$(this).removeClass("mouseout")
	.addClass("mouseover")
	.stop()
	.fadeTo("fast",0.6)
	.fadeTo("fast",1)
	.unbind("click")
.click(function(){
	// do something …. 
});

对于上面的代码，如果你嫌代码行数过多，那以功能块来换行也是个不错的主意。前两个是对class的操作，接下来三个是动画的操作，最后是取消并重新绑定click的事件的处理函数，所以写成这样也是不错的选择：

$(this).removeClass("mouseout").addClass("mouseover")
	.stop().fadeTo("fast",0.6).fadeTo("fast",1)
	.unbind("click").click(function(){
	// do something …. 
});