咱们弄前端的，总少不了跟DOM打交道，项目一多起来，纯JS难免吃力。这个时候，JQuery就派上大用场！特别是处理DOM操作时，它的选择器和方法实在是太给力了。今儿个，咱就聊聊如何把原生JS的DOM对象转换成JQuery对象的小诀窍。
了解啥叫DOM对象，以及和jQuery对象有啥不同
你知道浏览器里那个叫DOM的家伙吗？能编辑HTML和XML文件，厉害！不过，操作起来得写一大堆代码，想想都头大了。不用担心，咱们还有jQuery这个小能手！它就像瑞士军刀一样，用最简单的方式解决所有DOM问题。虽然DOM和jQuery都在处理HTML元素，但其实还是有些不同的用法，比如某些操作就没法直接替换。
var title = document.getElementById("title");
使用$()方法将DOM对象转换为jQuery对象
这事儿简单得很，把普通的JavaScript对象变成jQuery对象，只要在”$(“后面加上对象名，无论什么样的对象，都能轻松转化为jQuery对象！比如说，你通过document.getElementById找到一个DOM对象的话，直接这样操作就行了：
javascript 找到了，domObject就是我们要的那个标题元素。 把这个domObject放进jqueryObject里面。
var title = $("#title");
咱们这儿，把那个普通的DOM对象叫作‘domObject’，然后用$()这神奇的魔法棒，一眨眼它就变成 jQuery 对象，俗称‘jqueryObject’，这下子我们就能随便用jQuery里各种炫酷的方法玩儿转这个对象！
jQuery函数的另一种转换方式
除了大家熟知的$( )用处，你晓得 jQuery 中有个神奇的$函数吗？这玩意儿常常被人忽略，但是这东西有时候真是超级好用接下来就让咱们一起来揭秘怎么巧妙地使用它吧：
我们来把这个DOM对象变成JQuery对象！
这个东西跟那个$(…)函数其实差不多，只是换个名字罢了。说到底，$()和jQuery()这俩其实也差不多，只要你觉得哪一个方便就用哪个。
处理多个DOM对象的转换
你听说过吗？当我们编代码时，总是需要整理一堆DOM元素。比如，要在列表中查找内容，可以利用querySelectorAll工具，然后只需简单地替换成jQuery方法就行了。这样做不仅直观，而且效率也更高。DOM这个东西，变换不同的方法其实效果大同小异：
咱把所有带”.item”名儿的文件全捡过来，扔进个名叫domObjects的数组里！
var title = document.getElementById("title");
var $title = $(title);
咱们把DOM对象变成JQuery对象。
咱先去找下页面里面的DOM元素，这个时候可以用到那个queryselectorAll小帮手。然后，我们把这些元素转化成jQuery对象，装进一个叫做’jqueryObjects’的大袋子里。这么做以后，我们就能玩转各种jQuery集合操作，比如遍历、映射之类的都不在话下！
转换后的jQuery对象的实际应用
把DOM对象变成jQuery对象，就可以轻松摆弄元素无论是加个样式、换个字还是触发个点击，都不再是难事。切换成纯JavaScript，就要花大量时间写一堆代码，还得担心各种逻辑问题。但有了jQuery，操作起来就简简单单，只要几行API语句就能搞定！
注意事项与最佳实践
Jquery好用又简单，想快的话，也可以试试原生的javascript！看情况用，能用哪个就用哪个。有时候我会把他们两个搭配使用，享受下jquery的方便，还不影响性能！
var title = document.getElementById("title");
var $title = jQuery(title);
总结与展望
来看看，如何将JavaScript里的DOM变成jQuery对象哈~为啥要这么干捏？日后我得多学习学习怎么玩转jQuery，让自己的编程能力up up，写出更牛逼、更顺手的代码！
好了好了，终于到最后了，问你们个小问题哈：有啥你最喜欢的jQuery秘诀想和大家分享吗？赶紧留言告诉我们！别忘了给我点赞再转发出去让更多小伙伴儿也能学到新知识！
评论0