JavaScript交互式网页设计——jQuery

最新推荐文章于 2024-09-02 09:29:01 发布

讨厌睡不着

最新推荐文章于 2024-09-02 09:29:01 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/qq_62296995/article/details/122171958

版权

本文介绍了jQuery，一个广泛使用的JavaScript库，旨在解决浏览器兼容性问题并提供强大的框架。jQuery的核心特性包括DOM操作、事件处理、插件应用和Ajax集成。文章详细讲解了jQuery的选择器，如基本选择器、过滤选择器、内容过滤选择器和属性过滤选择器，以及层次选择器和表单选择器，帮助开发者更高效地选择和操作网页元素。

摘要由CSDN通过智能技术生成

<一>.jQuery概述

<1>.概述：由于不同浏览器对JavaScript解析方式有所区别，随着浏览器的不断更新，JavaScript出现了兼容性问题。为解决此问题，出现了许多JavaScript库，使用最为广泛的是jQuery，如今已发展为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系。它的主旨为以更少的代码实现更多的功能(Write less Do more)

<2>.jQuery基本功能

1.访问和操作DOM元素

2.对页面事件的处理

3.大量插件在页面的运用：引入jQuery库后，还可以使用大量插件来完善页面的功能和效果，如验证插件和UI插件，使用插件可以丰富页面展示效果，使JavaScript代码未能实现的功能通过插件轻松实现

4.与Ajax技术的完美结合：Ajax技术一度读取服务器数据的方法，极大地方便了程序开发，增强了用户页面体验度。引入jQuery库后，Ajax不仅完善了原有的功能，而且简化了代码，只要通过内部对象或函数，加上几行代码就可以实现复杂的功能

	<body>
		<!--引入jQuery库-->
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
		<div id="info">
			<img src="img/mobile.jpg" width="350px" />
		</div>
		<input type="button" value="显示" id="thebtn"/>
		<!--JavaScript脚本-->
		<script>
		$(document).ready(function(){ 
			$("#thebtn").click(function(){
				$("#info").show(3000);
			});
		});
		</script>
	</body>

说明：$(document).ready(function(){ }) 类似于 window.onload = function(){ }。两者上功能是可以互换，但又有所区别，前者是页面框架下载完成后即可执行，后者是页面必须全部下载完才能执行，显然，前者效率更高。例如脚本中设置了一张图片样式，前者只需<img/>标签加载完即可设置样式，而后者必须图片加载完后才能设置样式，而前者又可以简化为$(function(){ })

<3>.jQuery的代码特点