内容简介：首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入，typeOf返回的结果是undefined因为DOM选择器使用起来比较麻烦，jQuery就是是通过封装原生的DOM选择器，让我们使用起来更加方便快捷。
首先明确jQuery是一个JavaScript库，它的类型是函数，这一点可以通过typeOf查看。需要注意的是，script引入方式是本地文件引入，如果是CDN引入，typeOf返回的结果是undefined
<script src="./img/jquery-3.4.1.min.js"></script> console.log(typeof jQuery); function
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"
因为DOM选择器使用起来比较麻烦，jQuery就是是通过封装原生的DOM选择器，让我们使用起来更加方便快捷。
<script src="./script/jquery-3.4.1.min.js"></script> <style> .red { color: red; } </style> <body> <div id=div class="div">div</div> <script> console.log(typeof jQuery); window.jQuery = function (nodeOrTxt) { let nodes; if (typeof nodeOrTxt === "string") { nodes = document.querySelectorAll(nodeOrTxt); } else { nodes = nodeOrTxt; } //判断传入的参数是node还是string return { addClass: function (classes) { for (let i = 0; i < nodes.length; i++) { nodes[i].classList.add(classes); } return nodes; }, setText:function(text){ for(var i=0;i<nodes.length;i++){ nodes[i].textContent=text; } return nodes; } } //返回具体的方法函数 }; window.$ = jQuery; var $div = $('div'); $div.addClass('red'); // 可将所有 div 的 class 添加一个 red $div.setText('hi') // 可将所有 div 的 textContent 变为 hi </script> </body> </html>
1、全局声明window.jQuery，它是一个函数，返回一个对象，对象内有不同的方法，本文例子有2个方法addClass（增加类名），setText修改节点内容。
2、 jQuery
这个全局函数，接受一个参数，可以是node名或者是选择器都可以，因为jQuery函数内调用了原生的 document.querySelectorAll()
3、 jQuery函数已经return了addClass和setText，所以可以直接访问这两个方法。$div.addClass('red')和 $div.setText('hi')
4、addClass函数增加类名的方式是原生的x.classList.add()，setText函数也是原生的x.textContent()方法，但是通过jQuery函数封装后，增加类名和修改内容，我们仅使用三四行代码就可以实现。相比原生方法简单了许多。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Linux/Unix设计思想
甘卡兹 / 漆犇 / 人民邮电出版社 / 2012-3-28 / 39.00元
《Linux\Unix设计思想/图灵程序设计丛书》内容简介：将Linux的开发方式与Unix的原理有效地结合起来，总结出Linux与Unix软件开发中的设计原则。《Linux\Unix设计思想/图灵程序设计丛书》前8章分别介绍了Linux与Unix中9条基本的哲学准则和10条次要准则。第9章和第10章将Unix系统的设计思想与其他系统的设计思想进行了对比。最后介绍了Unix哲学准则在其他领域中的应......一起来看看 《Linux/Unix设计思想》 这本书的介绍吧!
