谁能举例说明一下吗？ 1，dom对象怎么转换jquery对象 2，jquery对象怎么转换dom对
发布网友
发布时间：2022-04-19 22:27
共2个回答
懂视网
时间：2022-04-20 02:48
一、Dom对象和jquery对象
<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">测试</p>
<script>
var oBox = document.getElementById('box');
var oBox2 = document.querySelector('#box');
var $Box = $('#box');
console.log(oBox);
console.log(oBox2);
console.log($Box);
</script>
</body>
</html>运行结果：
从中我们就可以看出区别了，$()把DOM对象封装成jquery对象，而DOM对象也就保存在jquery[0]中，这也就是为什么我们说的把jquery对象转化成DOM对象只需用jquery[0]或者jquery.get(0)了。
二、模拟jquery--根据id，封装jquery对象
这里先简化一下，看看封装jquery对象的一部分过程
<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">测试</p>
<script>
var $Box = $('#box');
console.log('这是jquery对象');
console.log($Box);
console.log('------分界线------');
(function(window,undefined){
var jQ = function(selector){
return new jQ.fn.init(selector);
};
jQ.fn = jQ.prototype = {
jquery:'2.0.0', //jquery版本号信息
constructor: jQ, //添加构造器属性
length:0, //初始length属性
selector:'', //初始selector属性
init: function(selector){
var match, elem, rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/;
match = rquickExpr.exec( selector );
//console.log(match); //正则匹配找出id的值
if ( !selector ) { //如果selector为'',null,undefind直接退出操作
return this;
}
elem = document.getElementById(match[2]);
this[0] = elem;
this.context=document;
this.length = 1;
this.selector = selector;
return this;
}
}
jQ.fn.init.prototype = jQ.fn;
window.$$ = jQ;
})( window );
console.log('这是模拟的对象');
console.log($$('#box')); //输出封装的对象
</script>
</body>②输出结果:（火狐浏览器上打开的）
这里需要注意的是，chrome浏览器在显示上有会些不同
jquery显示的是类数组对象形态。
③、解析
对于上面代码有很多看不明白的朋友建议看一下我前面写的文章【jquery源码】开始学习源码之前需要解决的一些问题。
正则匹配我是直接复制了源码中的正则，可以输出该正则处理后的结果来看看。
三、模拟jquery--根据标签名，封装jquery对象
直接上代码
<body>
<ul class="list">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ul>
<script>
console.log('这是jquery对象');
var aLi1 = $('li');
console.log(aLi1);
console.log('------分界线------');
(function(window,undefined){
var jQ = function(selector,context){
return new jQ.fn.init(selector, context);
};
jQ.fn = jQ.prototype = {
jquery:'2.0.0', //jquery版本号信息
constructor: jQ, //添加构造器属性
length:0, //初始length属性
selector:'', //初始selector属性
init: function(selector, context){
var match, elem;
if ( !selector ) { //如果selector为'',null,undefind直接退出操作
return this;
}
elem = document.getElementsByTagName(selector);
for(var i =0,len=elem.length; i<len; i++){
this[i] = elem[i];
}
this.context=document;
this.length = elem.length;
this.selector = selector;
return this;
}
}
jQ.fn.init.prototype = jQ.fn;
window.$$ = jQ;
})( window );
console.log('这是模拟的对象');
console.log($$('li')); //输出封装的对象
</script>
</body>输出结果：
这里只是单纯的模拟，jq处理起来远远没有那么简单，jquery还进行了大量的判断（下面的文章会继续说这个问题）。还可以在jquery对象中发现prevObject属性，该属性保存的是上一级的查找对象。看看下面的例子就能明白了。
<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<ul class="list">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
</ul>
<script>
var aLi1 = $('li');
console.log(aLi1);
var aLi2 = $('li','.list');
console.log(aLi2);
var aLi3 = $('.list').find('li');
console.log(aLi3);
</script>
</body>
本文讲解了$选择器--是如何将DOM封装成jquery对象，更多相关内容请关注Gxl网。
相关推荐：
css3动画导航栏3D
requests库的基本使用
前端调用微信支付接口
热心网友
时间：2022-04-19 23:56
html代码：
<div id="div1">这是一个层</div>js代码：
var div=document.getElementById("div1");
//这是dom对象
div.innerHTML="层的内容发生改变";
//使用工厂函数将dom对象转换为jQuery对象
$(div).html("这样也变");
//使用jQuery对象操作层
var $div1=$("#div1");
//这是jQuery对象操作层
$div1.html("层的内容发生改变");
//将jQuery对象转换为dom对象
#div1[0].innerHTML="这样也变";
