JQuery 在 JavaScript 基础上的便捷改进小结

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

学习总结专栏收录该内容

10 篇文章

订阅专栏

本文介绍了JavaScript和jQuery在网页操作中的应用，强调jQuery如何简化DOM操作、对象转换、方法优化和事件处理，从而提升前端代码的简洁性和效率。通过实例展示了jQuery在标签获取、对象转换、HTML操作和事件绑定等方面的便利性，并提醒读者在使用jQuery时需要注意引入jQuery库。

引言

Js(JavaScript): 基于HTML页面的脚本语言。

也就是对网页的代码控制。我们可以通过编程，达到自己想要的界面效果：丰富多彩的动画，随心而动的操作反馈等等。

尽管前端部分的代码已经不像Java代码那样的高规范性，不过其代码仍有很大的简化空间。

Jq(JQuery): 一个 JavaScript 库。极大地简化了 Js 编程。

第一次接触这个名词的时候，以为其是一种全新的知识。当了解其功能之后，无疑是震撼和兴奋的：它将Js语言变得简单而又有趣。

方式与改进

(一) 标签的获取

对页面的操作无非就是对一个个标签的操作，而在Jq代码中大大简化了获取标签的过程：

<body>
	<p id = "p">p标签</p>
</body>

<script>
	//方式一：id获取
	document.getElementById("p");
	
	//方式二：标签名获取
	document.getElementsByTagName("p")[0];

	//其它等等
</script>

<body>
	<p id = "p" class = "one" name = "name">p标签</p>
</body>

<script>
	//方式一：id获取(亦可class获取)
	$('#p');

	//方式二：标签名获取
	//此处 p标签为 p标签数组的第一个,类似于Js中的方式二
	$('p');

	//方式三：索引获取
	//同一标签名第一个索引为0, 后累加
	$('p:eq(0)')

	//方式四：具体属性值获取
	$('p[name = name]')
</script>

(二) Dom对象和 Jquery对象的转换

由于 Dom 对象和 Jquery 对象无法调用另一方的方法或实现其功能，所以在有些时候可以对其进行转换：

<body>
</body>

<script>
	//1. 转换为Jq对象
	$(Dom对象)

	//2.转换为Dom对象
		//方式一：
		Jquery对象[0];
	
		//方式二：
		Jquery对象.get[0];
</script>

(三) 方法优化

在 Jq 中，不光将代码书写简化且直观了许多，方法名也做出了很多简化：

<body>
	<p id = p>萧炎</p>
	<input id = "input"/>
</body>

<script>
	//1. HTML: 更改标签内所有内容
	var p = document.getElementById("p");
	p.innerHTML = "<font color = red>云韵</font>"

	//2. Text: 更改标签中的文本内容
	var p = document.getElementById("p");
	p.innerHTML = "云韵"

	//3. 修改value 属性
	var input = document.getElementById("input");
	input.value = "请输入内容";

	//4. 添加类
	var p = document.getElementById("p");
	p.className = "one";
	
	//等等
</script>

<body>
	<p id = p>萧炎</p>
	<input id = "input"/>
</body>

<script>
	//1. HTML
	$('#p').html("<font color = red>云韵</font>")

	//2. Text
	$('#p').html("云韵")

	//3. value
	$('input').val("请输入内容");

	//4. class
	$('#p').addClass("one");
	
	//等等
</script>

(四) 事件

事件对于代码量的需求是毋庸置疑的，所以在此处的应用便很直观的可以看出优化所带来的便捷：

<body onload = "init()"> 
	<p></p>;
	<button id = "btn"></button>
<body>

<script>
	//预加载函数
	init() {
		
		//添加单击事件
		var btn = document.getElementById("btn");
		btn.onclick = function() {

		};
	};
</script>

<body> 
	<p></p>
	<button id = "btn"></button>
<body>

<script>
	//预加载函数
	$(function() {
	
	//添加单击事件
		$('#btn').click(function() {
		
		});
    });
</script>

注意的问题

Jq是Js的一个库，使用的时候需要引入，否则无法被识别：

//加入此句
<script src="./js/jquery-3.5.0.min.js"></script>

Jq中标志性的符号是 ‘$’ ，几乎每个语句都会用到；
身为后端开发学者，对前端学习尚且薄弱，总结尚浅，欢迎交流科普。