1.3 js与jq之间的转换

最新推荐文章于 2025-09-26 19:20:53 发布

原创最新推荐文章于 2025-09-26 19:20:53 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

本文通过一个简单的示例展示了JavaScript与jQuery之间的交互方式，包括如何使用JavaScript调用jQuery方法及反之亦然。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<input type="button" value="JavaScript的修改"  onclick="change()"/>
<input type="button" value="jQuery的修改" id="jq" />
<div id="div1">原本内容</div>

<script type="text/javascript" src="../../js库/jquery-2.1.0.js"></script>
<script>
	function change(){
			var a = document.getElementById("div1");
//			a.innerHTML = "JavaScript修改了内容";//原本
		//j将js对象改成jq对象
			$(a).html("JS转jQ修改了内容");//要先转换后JS才能使用JQ的方法
			
	}

//文档加载完成事件	
	$(function(){
		//给按钮绑定事件
		$("#jq").click(function(){
			//找到修改的内容
//			$("#div1").html("jQuery修改了内容");//原本
			var $a =$("#div1");//a前面的$只是一个普通的符号,为了提醒我们他说JQ转过来的,并没有实际含义
			var b = $a.get(0);//0是代表第一个的意思,有时候不用id用其他的属性区分时就有多个,这个就是用来选择是第几个
			//另一种方法	
			var b = $a[0];
			b.innerHTML = "JQ转jS修改了内容"
		});
	});
	
</script>
</body>
</html>