JSP 之JQ 与JS互相转换

最新推荐文章于 2024-06-08 00:10:13 发布

胡萝卜仙

最新推荐文章于 2024-06-08 00:10:13 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5，JSP，JQ 文章标签： javascript jsp

本文链接：https://blog.youkuaiyun.com/m0_37173821/article/details/78334792

HTML5，JSP，JQ 专栏收录该内容

1 篇文章

订阅专栏

本文介绍在项目维护中如何灵活转换JavaScript (JS) 和 jQuery (JQ) 代码，通过实例展示了不同场景下的转换方法，如使用索引、get方法及工厂函数等。

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

由于在做项目维护时，经常会遇到JS语言与JQ语言混用的情况，JQ相对JS来说，代码量更少更简洁，能做到JS做不到的功能，下面我给大家分享几个简单的JQ，JS互相转换的方法。

jq转换为js

a 索引方式

var $abc = $("p"); //$abc p集合对象(jq)
var p2_obj = $abc[1];
p2_obj.style.backgroundColor = blue;

b get方法

var $abc = $("p"); 
var p2_obj = $abc.get(1);
p2_obj.style.backgroundColor = blue;
...

当js转换为jq时我们通常使用工厂函数
语法案例如下：

var h1_obj = document.getEll...()[0];
	$(h1_obj).next().css(xxx);

如下给出了进行连续js，jq转换的例子，希望大家能够理解

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<!-- JQ库包引入至当前网页文件  -->
	<script src="../js/jquery3.js">
	</script>
	
	<script type="text/javascript">
		//JQ网页加载时准备数据和事件
		//JQ的作用域，编辑区
		$(document).ready(function(){
			//1~3 js
			var li_objs = document
			.getElementsByTagName("li");
			li_objs[0].style.backgroundColor
			= "red";
			li_objs[1].style.backgroundColor
			= "yellow";
			li_objs[2].style.backgroundColor
			= "blue";
			//4~6 jq方式 
			var li04 = li_objs[3];
			$(li04).css("background-color","cyan")
			.next().css("background-color","greenyellow")
			.next().css("background-color","deeppink");
			//7~9 js方式
			var $lis = $("li");
			var li07 = $lis[6];
			//JS DOM HTML
			li07.style = "background-color:purple;";
			var li08 = $lis[7];
			li08.style = "background-color:#FF00FF;";
			var li09 = $lis.get(8);
			li09.style = "background-color:orange;";
			//10~12 jq方式
			var li10 = li_objs[9];
			var $vvv = $(li10);
			$vvv.css("background-color","yellow")
			.next().css("background-color","HotPink")
			.next().css("background-color","Salmon");
			$vvv.prev().prev().prev()
			.css("color","orange");
			
		});
	
	</script>
</head>
<body>
	<div>
		<ol>
			<li>诸葛亮之子诸元明</li>
			<li>蔡文姬弟弟蔡潇</li>
			<li>杨先生表弟杨先东</li>
			<li>曹玉涛</li>
			<li>李月华</li>
			<li>王龙</li>
			<li>韦小宝弟弟韦明明</li>
			<li>邵鹏飞</li>
			<li>陆鹏飞</li>
			<li>史鹏飞</li>
			<li>林峰鹏飞</li>
			<li>余琴鹏飞子</li>
		</ol>
	</div>
</body>
</html>