jQuery与DOM的对比

最新推荐文章于 2022-01-22 10:46:30 发布

vhujbvf

最新推荐文章于 2022-01-22 10:46:30 发布

阅读量133

点赞数 1

分类专栏：笔记文章标签： jQuery DOM 转化方法事件处理

本文链接：https://blog.csdn.net/qq_51592187/article/details/115708977

版权

笔记专栏收录该内容

129 篇文章 0 订阅

订阅专栏

jQuery与DOM的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery与DOM</title>
		<script type="text/javascript" src="jquery-3.1.0.js"></script>
		<script type="text/javascript">	
			$(function(){//表示页面加载完成之后 相当于onload事件
			//jQuery的本质是DOM对象的数组加一系列功能
			// 	var a = $("button");
			// 	for(var i = 0;i<a.length;i++){
			// 		alert(a[i]);
			// 	}
			//jQuery与DOM方法上使用的区别
			//jQuery无法使用DOM的属性与方法
			//DOM无法使用jQuery的属性与方法
			// document.getElementById("1").innerHTML = "hello";//DOM对象可以使用
			// $("#1").innerHTML = "nihao";//jQuery对象无法使用
			// 	$("#1").click(function() {
			// 		alert("jQuery对象使用");
			// 	});//jQuery对象可以使用
			// 	document.getElementById("1").click(function() {
			// 		alert("jQuery对象使用");//DOM对象无法使用
			// 	});
			//1.DOM对象转化为jQuery对象
			   //1.先有DOM对象
			   //2.$(DOM对象)就可以转化
			   alert($( document.getElementById("1")));
			//2.jQuery对象转化为DOM对象   
			   //1.先有jQuery对象
			   //2.jQuery对象(下标)取出相应的DOM对象
			   alert($( document.getElementById("1"))[0]);
			});
		</script>
	</head>
	<body>
		<button id="1">使用DOM对象调用DOM方法<^tton>
		<button id="2">使用DOM对象调用jQuery方法<^tton>
		<button id="3">使用jQuery对象调用DOM方法<^tton>
		<button id="4">使用jQuery对象调用jQuery方法<^tton>
	</body>
<cml>

vhujbvf

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery与DOM的对比

jQuery与DOM的区别<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jQuery与DOM</title> <script type="text/javascript" src="jquery-3.1.0.js"></script> <script type="text/javascript"> $
复制链接

扫一扫