JQuery学习16篇(jQuery对象与DOM对象的关系与转换)

最新推荐文章于 2024-09-22 11:17:00 发布

程宇寒

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量154

点赞数

文章标签： JQuery javascript js jQuery对象与DOM对象的关系与转换前端开发

本文链接：https://blog.csdn.net/czh500/article/details/103636158

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习16篇(jQuery对象与DOM对象的关系与转换)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习16篇(jQuery对象与DOM对象的关系与转换)</h3>
	<ul>
		<li>于都县</li>
		<li>兴国县</li>
		<li>赣县</li>
		<li>会昌县</li>
		<li>宁都县</li>
		<li>信丰县</li>
	</ul>
	<p id="test">江西省赣州市于都县	</p>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//下面这行代码，充分证明$('选择器')的返回值不是Dom对象
//$('#test').style.background = 'blue';//报错TypeError: $(...).style is undefined

//下面这2行代码，充分证明Dom对象也不是$()的返回值
var p_node = document.getElementById('test'); //返回的是Dom对象
//p_node.css('background', 'blue');//报错TypeError: p_node.css is not a function

// $()返回的到底是什么? 是对象,但不是DOM对象,而是jQuery对象
/* 
jquery对象与DOM对象有什么关系?
答: jQuery按选择器,选中1个或多个DOM对象,把这些DOM对象,放在jQuery对象上,索引分别是 0  1 2 3 ...N
*/		
console.log($('li')); //jQuery对象,dom对象被放置在jQuery对象内部
console.log($('li')[2]); //这个是存储在jQuery对象内的第3个li DOM对象
//jquery对象转化为DOM对象, 直接[索引]即可
$('li')[2].style.background = 'Gray';
//也可以用get(索引)方法
$('li').get(5).style.background = 'Khaki';

//DOM对象,转化为 jquery对象, 直接把DOM对象,传给$()
$(p_node).css('background', 'OrangeRed');

var liNodes = document.getElementsByTagName('li');
console.log(liNodes);
console.log($(liNodes));
console.log('*********************');

var jquery_obj = $('li');
console.log(jquery_obj);
console.log(jquery_obj[0]);
console.log(jquery_obj.get(0));
console.log('*********************');

$('li')[0]; //这个是存储在jQuery对象内的第1个li DOM对象
//jQuery对象与DOM对象的转换
var li = $('li').get(0);// 得到第1个li DOM对象
li.style.background = 'SeaGreen';
var li3 = document.getElementsByTagName('li')[3];
$(li3).css('background', 'PaleVioletRed'); //DOM对象li3作为参数传给$(),转为jQuery对象
$('#test').css('background', 'Plum');
</script>
</html>