JavaScript程序库jQuery学习笔记分享(一)介绍

最新推荐文章于 2024-04-06 15:01:48 发布

原创最新推荐文章于 2024-04-06 15:01:48 发布 · 566 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript

share 同时被 3 个专栏收录

45 篇文章

订阅专栏

html

14 篇文章

订阅专栏

sublime

12 篇文章

订阅专栏

本文介绍了jQuery库的基础知识，包括其发展历程、优势及代码编写方式。通过实例演示了jQuery的链式操作风格，使读者能快速掌握并应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前的文章我把jQuery放在javaWeb里面了，这其实是不准确的。现在我要向大家重新介绍这个优秀的JavaScript库，让大家在学习和使用下能够体会到它的方便。

一：下面先介绍一下jQuery

1.在介绍jQuery之前，先了解一下JavaScript和ajax：
JavaScript：这是一种脚本语言。它可以让网页和用户之间实现一种实时的，动态的和交互的关系，使得网页可以包含更多活跃的元素和更加精彩的内容。但它的一些缺点，比如复杂的文档对象模型(DOM)，不一致的浏览器实现和便捷的开发，调试工具的缺失都使得在发展初期没有得到大家认可。

ajax：在之后的发展阶段，出现了一种新的Web技术，它基于JavaScript，就是Ajax(Asynchronous JavaScript And XML，异步的JavaScript和XML)，这项技术让JacaScript变得受欢迎，现在基于JavaScript的应用越来越多，JavaScript不再是一种仅仅用于制作Web页面的简单脚本。

2.JavaScript库

为了简化JavaScript的开发，一些JavaScript程序库就诞生了。它们封装了很多预定义的对象和实用函数，能够帮助使用者建立高难度的富客户端页面，并且兼容各大浏览器。

比较流行的JavaScript库有Prototype，Dojo，YUI，Ext JS，MooTools，jQuery等。

3.jQuery简介

jQuery是2006年创建的一个优秀的JavaScript库，它是一个轻量级的库，有强大的选择器，出色的DOM操作，可靠的事件处理，完善的兼容性和链式操作等功能。它凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax的操作。

优势有如下几条：

轻量级，强大的选择器，出色的DOM操作，可靠的事件处理机制，完善的Ajax，不污染顶级变量，出色的浏览器兼容性，链式操作方式，隐式迭代，行为层和结构层的分离，丰富的插件支持，完善的文档，开源。

二：jQuery代码的编写

1.有两种方式引入jQuery

(1)在官网下载，会有jquery.js开发版(完整无压缩版本，主要用于测试，学习和开发)，jquery.min.js生产版(最小化和压缩版，主要用于产品和项目)。

(2)可以在其它网站上引用cdn的jQuery。

这样的好处是一些网站已经对一些问题进行了整理，让你的使用更方便。这样就不需要加上<type="text/javascript">这个声明了。

2.一个简单的jQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>我的网页</title>
	<script src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			alert("Hello World!");
		});
	</script>              
</head>
<body> 
	
</body>
</html>

效果如下：

这里我们的jQuery代码可以在<head>，也可以在<body>中。我们还发现，我们的代码是从$(document).ready(function(){});中开始的，它相当于传统的JavaScript中的window.onload方法，关于它们的区别，后面会详细说明。这个函数是学习jQuery的第一步，所有的jQuery代码都在$(document).ready(function(){})函数中，这个函数中的代码在DOM加载完毕后，页面全部内容完全加载完毕前被执行。这里大家只需要先记住我们的jQuery是放在这个函数里边的即可。

3.代码风格

(1)链式操作风格

我们先写一个简单的HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>我的网页</title>
	<script src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>       
</head>
<body>
	<div class="one">
		<u1 class="myMenu">
			<li class="second">
				<a href="#none">食物</a>
				<ul class="third">
					<li><a href="#none"> 奶茶 </a></li>
					<li><a href="#none"> 曲奇饼干 </a></li>
					<li><a href="#none"> 小白兔奶糖 </a></li>
					<li><a href="#none"> 大猪蹄子 </a></li>
				</ul>
			</li>

			<li class="second">
				<a href="#none">文具</a>
				<ul class="third">
					<li><a href="#none"> 三角尺 </a></li>
					<li><a href="#none"> 黑色签字笔 </a></li>
					<li><a href="#none"> 量角器 </a></li>
					<li><a href="#none"> 矩阵卡尺 </a></li>
				</ul>
			</li>

			<li class="second">
				<a href="#none">学术语</a>
				<ul class="third">
					<li><a href="#none"> 二维世界 </a></li>
					<li><a href="#none"> 平行宇宙 </a></li>
					<li><a href="#none"> 程序语言 </a></li>
					<li><a href="#none"> 网络攻防 </a></li>
				</ul>
			</li>
		</u1>
	</div>
</body>
</html>

效果如下：

现在要做一个导航栏，单击不同的商品名称链接，显示相应的内容，同时高亮显示当前选择的商品。

现在用jQuery来实现这个导航栏效果：

$(document).ready(function() {
			$(".second > a").click(function(){
				$(this).addClass('tempSecond').next().show().parent().siblings().children('a').removeClass("tempSecond").next().hide();
					return false;
			});
		});

效果如下：

这段代码的作用是，当鼠标点击到a元素的时候，给其添加一个名为tempSecond的class，然后将紧邻其后面的元素显示出来，同时将它的父辈的同辈元素内部的子元素<a>都去掉一个名为tempSecond的class，并且将紧邻它们后面的元素都隐藏。

这就是jQuery强大的链式操作，可以用一行代码实现需要的功能。但我们需要让程序可读性更强，就需要尽量一行一个功能，如下：

(document).ready(function() {
			$(".second > a").click(function(){
				$(this).addClass('tempSecond')
				.next().show()
				.parent().siblings().children('a').removeClass("tempSecond")
				.next().hide();
				return false;
			});
		});

大家可以有自己的代码风格，但一定要能够方便读写和修改。

(2)为代码添加注释

添加注释的方法和c语言类似，这里就不详细说明了。

这里就先介绍到这里，明天继续介绍jQuery对象和DOM对象和如何避免和其他库的冲突，以及jQuery的强大的选择器。