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

最新推荐文章于 2021-02-19 11:08:07 发布

店伙计

最新推荐文章于 2021-02-19 11:08:07 发布

阅读量6k

点赞数

分类专栏： Web 前端开发笔记文章标签： jquery

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

版权

Web 前端开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：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，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

店伙计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 学习-样式篇（二）：jQuery 对象与原生 DOM 对象

jQuery 对象和原生对象是有区别的。原生的对象不能使用 jQuery 的方法，jQuery 对象也不能使用原生的方法。如果要想将原生对象转换为 jQuery 对象，只需要使用 $() 。使用 $() 包含的对象就会变成 jQuery 对象。使用原生和 jQuery 方式来编写一个示例，首先是原生方式：<!DOCTYPE html><html><head> <title></title> <script type="text/
复制链接

扫一扫