脚本宝典收集整理的这篇文章主要介绍了

jQuery初长成

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h3 id="articleHeader0">代码部分</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> window.<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>=function(<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>OrSelector){ <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>s={} <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>1=[] if(typeof nodeOrSelector==='string'){ <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> temp=document.querySelectorAll(nodeOrSelector) for(let i=0;i<temp.length;i++){ node1[i]=temp[i] } }else if(nodeOrSelector instanceof Node){ node1={ 0:nodeOrSelector, length:1 } } nodes.addClass=function(classes){ classes.forEach(value => { for(let i=0;i<node1.length;i++){ node1[i].classList.add(value) } }) } nodes.setText=function(text){ for(let i=0;i<node1.length;i++){ node1[i].textContent=text } } return nodes } window.$=<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a> var $<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>=$('<a href="http://www.js-code.com/tag/div" title="div" target="_blank">div</a>') $<a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a>.add<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>(['red']) $div.setText('hi') </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-built_in">window</span>.<a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a>=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeOrSelector</span>)</span>{ <span class="hljs-keyword">let</span> nodes={} <span class="hljs-keyword">let</span> node1=[] <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> nodeOrSelector===<span class="hljs-string">'string'</span>){ <span class="hljs-keyword">let</span> temp=<span class="hljs-built_in">document</span>.querySelectorAll(nodeOrSelector) <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;temp.length;i++){ node1[i]=temp[i] } }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(nodeOrSelector <span class="hljs-keyword">instanceof</span> Node){ node1={ <span class="hljs-number">0</span>:nodeOrSelector, <span class="hljs-attr">length</span>:<span class="hljs-number">1</span> } } nodes.add<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">classes</span>)</span>{ classes.forEach(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> { <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;node1.length;i++){ node1[i].classList.add(value) } }) } nodes.setText=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">text</span>)</span>{ <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;node1.length;i++){ node1[i].textContent=text } } <span class="hljs-keyword">return</span> nodes } <span class="hljs-built_in">window</span>.$=jQuery <span class="hljs-keyword">var</span> $div=$(<span class="hljs-string">'div'</span>) $div.addClass([<span class="hljs-string">'red'</span>]) $div.setText(<span class="hljs-string">'hi'</span>) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <h3 id="articleHeader1">思路</h3> <p>首先声明函数jQuery()并在函数中声明一个封装了两个函数的对象,以实现给元素加class和添加文本的功能;<br />其次在函数中判断所传参数是否为字符串还是节点;<br />接着编写add<a href="http://www.js-code.com/tag/class" title="Class" target="_blank">Class</a>与setText方法;<br />最后返回对象nodes,可以调用对象中的方法,大功告成。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

jQuery初长成

全部内容,希望文章能够帮你解决

jQuery初长成

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过