jQuery 学习-样式篇（二）：jQuery 对象与原生 DOM 对象

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688416

jQuery 对象和原生对象是有区别的。原生的对象不能使用 jQuery 的方法，jQuery 对象也不能使用原生的方法。

如果要想将原生对象转换为 jQuery 对象，只需要使用 $() 。使用 $() 包含的对象就会变成 jQuery 对象。

使用原生和 jQuery 方式来编写一个示例，首先是原生方式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript">
		onload = function (){
     
     
			var mySpan = document.getElementById('myspan');
			mySpan.innerHTML = '原生方式';
			mySpan.style.color = 'red';
		}
	</script>
</head>
<body>
	<span id="myspan"></span>
    <div class='mydiv'></div>
    <div class='mydiv'></div>
    <div class='mydiv'></div>
</body>
</html>

然后使用 jQuery 方式：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
     
     
			$('#myspan').html('jQuery 方式').css('color','pink');
		})
	</script>
</head>
<body>
	<span id="myspan"></span>
    <div class='mydiv'></div>
    <div class='mydiv'></div>
    <div class='mydiv'></div>
</body>
</html>

一、原生对象转换为 jQuery 对象

将上面原生的代码修改如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		onload = function (){
     
     
			var mySpan = document.getElementById('myspan');
			$(mySpan).html('转换成 jQuery 对象').css('color','orange');
		}
	</script>
</head>
<body>
	<span id="myspan"></span>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688416

二、jQuery 对象转换为原生对象

在 jQuery 中，所有的对象都是以数组的形式存储的，所以可以指定索引来将 jQuery 对象转换为原生对象：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
     
     
			$('#myspan')[0].innerHTML = '使用原生方法1';
			$('#myspan')[0].style.color = 'green';

			$('.mydiv')[1].innerHTML = '使用原生方法2';
			$('.mydiv')[1].style.color = 'pink';
		})
	</script>
</head>
<body>
	<span id="myspan"></span>
    <div class='mydiv'></div>
    <div class='mydiv'></div>
    <div class='mydiv'></div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111688416

jQuery 学习-样式篇（二）：jQuery 对象与原生 DOM 对象

一、原生对象转换为 jQuery 对象

二、jQuery 对象转换为原生对象

猜你喜欢