欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript 第五章 作业 jQuery

程序员文章站 2022-07-12 17:50:12
...

1.简述jQuery的优势

1、轻量级
jQuery非常轻巧，采用UglifyJS压缩后，大小保持在30KB左右。

2、强大的选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器，以及jQuery独创的高级而且复杂的选择器，另外还可以加入插件使其支持XPath选择器，甚至开发者可以编写属于自己的选择器。由于jQuery支持选择器这一特性，因此有一定CSS经验的开发人员可以很容易的切入到jQuery的学习中来。

3、出色的DOM操作的封装
jQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手。jQuery轻松地完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程序。

4、可靠的事件处理机制
jQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华，使得jQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面，jQuery也做得非常不错。

5、完善的Ajax
jQuery将所有的Ajax操作封装到一个函数$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

6、不污染*变量
jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。该特性使jQuery可以与其他JavaScript库共存，在项目中放心地引用而不需要考虑到后期的冲突。

7、出色的浏览器兼容性
作为一个流行的JavaScript库，浏览器的兼容性是必须具备的条件之一。jQuery能够在IE6.0+、FF 3.6+、Safari 5.0+、Opera和Chrome等浏览器下正常运行。jQuery同时修复了一些浏览器之间的的差异，使开发者不必在开展项目前建立浏览器兼容库。

8、链式操作方式
jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需要重复获取对象。这一特点使jQuery的代码无比优雅。

9、隐式迭代
当用jQuery找到带有“.myClass”类的全部元素，然后隐藏他们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。

10、行为层与结构层的分离
开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思想，可以使jQuery开发人员和HTML或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开发模式。同时，后期维护也非常方便，不需要在HTML代码中寻找某些函数和重复修改HTML代码。

11、丰富的插件支持
jQuery的易扩展性，吸引了来自全球开发者来编写jQuery的扩展插件。目前已经有成百上千的官方插件支持，而且还不断有新插件面世。

12、完善的文档
jQuery的文档非常丰富，不管是英文文档，还是中文文档。

13、开源
jQuery是一个开源的产品，任何人都可以*地使用并提出修改意见。

2.什么是jQuery对象，如何把DOM对象转换为jQuery对象？
jQuery对象:在JQuery库中，可以通过本身自带的方法获取页面DOM元素的对象叫做JQuery对象，对象以var开头定义。
DOM对象转换为jQuery对象:对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 如：var v=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象 转换后，就可以任意使用jQuery的方法了。 通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
3.jQuery的语法由哪几部分组成？

jQuery语句主要包含三大部分：$()、document和ready()分别被称为工厂函数、选择器、方法
语法为$(document).ready(){}

4.使用css()方法添加图片边框，单击图片显示图片边框
实现代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
			text-align: center;
			}
		</style>
	</head>
	<body>
		<img src="img/pic.gif"/>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("img").click(function(){
					$("img").css('border','1px solid gray');
				});
			});
		</script>
	</body>
</html>

5.制作林徽因简介页面，单击林徽因简介链接显示简介内容，单击主要作品链接显示对应作品
实现代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
        body,h1,h2,ul,li,p{margin: 0; padding: 0; font-family: "微软雅黑"; line-height: 28px;}
        p{ font-size: 14px; text-indent: 2em; display: none;}
        ul{display: none;}
        h1{text-align: center; line-height: 60px;font-size: 32px; background: #333333; color: #fff; margin-bottom: 5px; cursor: pointer;}
        h2{text-align: center; line-height: 50px;font-size:28px;  background: #333333; color: #fff; margin-top: 5px; cursor: pointer;}    
		</style>
	</head>

	<body>
		<h1>林徽因简介</h1>
		<p>林徽因，女，汉族，原名林徽音，出生于浙江杭州，祖籍福建福州。中国著名建筑家、诗人、作家。人民英雄纪念碑和*国徽深化方案的设计者 <br /> 林徽因是建筑师梁思成的第一任妻子。三十年代初，与夫婿梁思成用现代科学方法研究方法研究中国古代建筑，成为这个学术领域的开拓者。
		</p>
		<h2>主要作品</h2>
		<ul>
			<li>《你是人间四月天》</li>
			<li>《宝莲灯》</li>
			<li>《九十九度中》</li>
		</ul>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("h1").click(function(){
					$("p").css('display','block');
				});
					$("h2").click(function(){
					$("ul").css('display','block');
				});
			});
		</script>
	</body>

</html>

上一篇： JavaScript第五章总结

下一篇： Effective c++ 读书总结 16-20

推荐阅读