Web学习Day3

最新推荐文章于 2025-06-05 16:04:16 发布

·Cx330·

最新推荐文章于 2025-06-05 16:04:16 发布

阅读量946

点赞数

分类专栏： web前端文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/m0_47854694/article/details/121655575

版权

本文介绍了jQuery的基本概念，强调其简化JavaScript代码的优势，并详细讲解了如何通过jQuery选择器选取HTML元素，包括基本选择器、ID选择器、类选择器等。通过实例展示了如何为按钮绑定点击事件，改变元素背景颜色。

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

JQuery

简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

JQuery·优势

1.极大的简化JS代码
2.可以像CSS选择器一样获取HTML代码
css中获取所有的div，给div添加样式
div{css属性…}
jQuery中获取所有的div，给div添加边框样式
$(“div”).css(“border”,“2px solid red”);

JS获取id为div1的元素
document.getElementById(“div1”);
jQuery获取id为div1的元素
$("#div1")

3.可以通过修改css属性控制页面的效果
4.可以兼容常用的浏览器

JQuery·引入

jQuery的函数库文件就是一个普通的js文件，引入JQuery和引入JS文件的方式一样
注意：
1.在使用jQuery之前，必须先引入jQuery的函数文件

2.在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，会出现如下错误：
$ is not defined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			var h1=document.getElementById("demo");
			alert(h1.innerHTML);
		</script>
	</head>
	<body>
		<h1 id="demo">jQuery的引入示例...</h1>
	</body>
</html>

问题描述：上面的代码在执行时，发生了错误请添加图片描述
原因描述：
在执行获取id为demo的元素时，h1元素还没有被浏览器加载到，所以获取不到h1元素
解决方式1：
将script标签移到body内部，也就是h1元素的后面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
	</head>
	<body>
		<h1 id="demo">jQuery的引入示例...</h1>
		<script>
			var h1=document.getElementById("demo");
			alert(h1.innerHTML);
		</script>
	</body>
</html>

解决方式2：
将获取的元素的代码放在一个自定义函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才会获取h1元素，此时就能够获取到h1元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function fn1(){
     
			var h1=document.getElementById("demo");
			alert(h1.innerHTML);
		}
			
		</script>
		
	</head>
	<body>
		<h1 id

最低0.47元/天解锁文章