<!DOCTYPE html>
<html>
<head>
<title>jquery对象与Dom对象的区别、联系和相互转换</title>
<script src="./jquery.js"></script>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div id="box"></div>
<script type="text/javascript">
// console.log( document.getElementById('btn') );
// console.log( $('#btn') ); //返回的是jq对象
// console.log( $('#btn')[0] ); //jq对象中包含了dom对象
// 区别： jq对象 调用jq对象的属性方法
// dom对象 调用dom对象的属性和方法
//
// 相互转化：
// dom对象 转化为jq对象 一种写法 $(dom对象)
// jq对象 转化为dom对象 两种写法 $('div')[0] $('div').get(0)
// DOM对象的属性方法
// var box = document.getElementById('box');
// 错误
// box.text('hello');
// box.html('hello');
// 正确
// box.innerText = 'hello';
// box.innerHTML = 'hello';
// jQuery对象的属性方法
// jQuery对象，jQuery对象加前缀$，用以区分DOM对象
// var $box = $('#box');
// 错误
// $box.innerText = 'hello';
// $box.innerHTML = 'hello';
// 正确
// $box.text('hello');
// DOM对象转化为jq对象
// var box = document.getElementById('box');
// $(box).text('hello');//这样就可以使用jquery对象的方法
// jQuery对象转为DOM对象
// 我们习惯于在jQuery对象的变量加前缀$，用以区分DOM对象
var $box = $('#box');
$box[0].innerHTML = 'hello';//这样就可以使用DOM对象的方法
</script>
</body>
</html>
请大家把以上代码复制出来认真测试理解。
|
窥视卡
雷达卡
发表于 2023-1-30 18:09:28
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-24 22:26:03
