<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function t1() {
var jtest = $('#test');
var dtest = document.getElementById('test');
jtest.css('background','blue');
/*
alert(jtest.style.backgroundColor='blue'); // 不好使,可证明jquery对象不是DOM对象
alert(dtest.style.backgroundColor='blue');
*/
}
function t2() {
var divs = $('div');
// 让你从divs中选出中国对应的DOM对象,然后改变他的背景.
alert(divs[1]);
divs[1].style.backgroundColor='red';
}
function t3() {
var div0 = document.getElementsByTagName('div')[0]; // 选中第1个div
div0.style.backgroundColor="red";
alert('转换为jquery对象并改成蓝色');
// 直接把DOM对象以参数形式传给$方法就可以了.
// 如何来理解jquery的$方法
// $方法是个包装器, 能把给的参数包装成jquery对象.
// 如果给的字符串,他会先当成选择器,并根据选择器选中DOM对象,并打包.
// 如果给的直接是DOM对象, 直接打包.
$(div0).css('background','blue');
}
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>jquery对象和DOM对象的关系</h1>
<p id="test">随便打点</p>
<div>美国</div>
<div>中国</div>
<div>英国</div>
<input type="button" value="选中test" onclick="t1();" />
<input type="button" value="jquery对象转成DOM对象" onclick="t2();" />
<input type="button" value="DOM对象转成jquery对象" onclick="t3();" />
</body>
$(’#test’) 这是一个jquery 对象 不过他是先把 document.getElementById(‘test’) 这个dom对象 放入了 jquery 对象属性里面 放入的数序是从0开始
所以放进去的$(’#test’)[0] 就是存放 document.getElementById(‘test’)
而document.getElementById(‘test’) 要转成jquery 对象 只需要把它作为参数传入$() 就可以了~~
————————————————
版权声明:本文为CSDN博主「公众号:码农富哥」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/a519640026/article/details/8807519