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

JS扩展篇

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h4>关于函数</h4> <p><strong>函数是可重复执行的包含特定功能的代码段。</strong></p> <p><code>js</code>中的<strong>命名函数</strong>和<strong>匿名函数</strong></p> <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="<button id=&quot;btn1&quot; onclick=&quot;func()&quot;>点击我吧</button><br /> <button id=&quot;btn2&quot;>点击它吧</button> </p> <p><script> //命名函数 function func(){ //代码段 alert('点击我吧'); }</p> <p> //匿名函数 var btn2 = document.getElementById('btn2'); btn2.onclick = function(){ //代码段 alert('点击它吧'); } </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"btn1"</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"func()"</span>&gt;</span>点击我吧<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"btn2"</span>&gt;</span>点击它吧<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-comment">//命名函数</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">//代码段</span> alert(<span class="hljs-string">'点击我吧'</span>); } <span class="hljs-comment">//匿名函数</span> <span class="hljs-keyword">var</span> btn2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'btn2'</span>); btn2.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-comment">//代码段</span> alert(<span class="hljs-string">'点击它吧'</span>); } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <h4>关于<code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code><br /> </h4> <p><code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code>:<code>Document Object Model</code>,称为<a href="http://www.js-code.com/tag/%e6%96%87%e6%a1%a3%e5%af%b9%e8%b1%a1%e6%a8%a1%e5%9e%8b" title="文档对象模型" target="_blank">文档对象模型</a>,在网页加载时,可以将结构化文档在内存中转换为对象结构树。简单的说,<code><a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a></code>并不是一种技术,而是一种访问结构化文档的一种思想。借用<code>DOM</code>模型,我们可以对<code>DOM</code>树进行修改、删除、新增等操作,让结构化文档动态化。<br /><code>DOM</code>模型中的节点--文档可以说是由节点构成的集合。在<code>DOM</code>模型中有以下3种节点:</p> <ul> <li>元素节点:各种标签就是这些元素节点的名称,如<code>&lt;p&gt;</code>、<code>&lt;ul&gt;</code>等</li> <li>属性节点:一般用来修饰元素节点就称为属性节点</li> <li>文本节点:文本节点总是被包含在元素节点的内部</li> </ul> <p>注:为了动态地修改<code>html</code>元素,须先访问<code>html</code>元素。</p> <p><strong>查找<code><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></code>元素</strong></p> <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="document.getElementById() //id document.getElementsByClassName() //class document.getElementsByName() //name document.getElementsByTagName() //tagName " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-built_in">document</span>.getElementById() <span class="hljs-comment">//id </span> <span class="hljs-built_in">document</span>.getElementsBy<a href="http://www.js-code.com/tag/class" title="浏览关于“Class”的文章" target="_blank" class="tag_link">Class</a>Name() <span class="hljs-comment">//class</span> <span class="hljs-built_in">document</span>.getElementsByName() <span class="hljs-comment">//name</span> <span class="hljs-built_in">document</span>.getElementsByTagName() <span class="hljs-comment">//tagName</span> </code></pre> <p><strong>对元素节点的操作:</strong></p> <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="//创建节点 document.createElement(tag); //tag必须是合法的html元素 //复制节点 document.cloneNode(boolean deep); //deep为true,复制所有后带节点,为false,只复制当前节点 //添加节点 node.appendChild(newNode) node.insertBefore(newNode, refNode) //修改 node.replaceChild(newNode, oldNode) //删除 node.removeChild(oldNode) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">//创建节点</span> <span class="hljs-built_in">document</span>.createElement(tag); <span class="hljs-comment">//tag必须是合法的html元素</span> <span class="hljs-comment">//复制节点</span> <span class="hljs-built_in">document</span>.cloneNode(<span class="hljs-built_in">boolean</span> deep); <span class="hljs-comment">//deep为true,复制所有后带节点,为false,只复制当前节点</span> <span class="hljs-comment">//添加节点</span> <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>.appendChild(newNode) node.insertBefore(newNode, refNode) <span class="hljs-comment">//修改</span> node.replaceChild(newNode, oldNode) <span class="hljs-comment">//删除</span> node.removeChild(oldNode) </code></pre> <p><strong>对属性节点的操作:</strong></p> <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="//添加 node.setAttribute('属性名', '值'); //删除 node.removeAttribute('属性名'); //修改 node.setAttribute('属性名', '值'); //查询 node.getAttribute('属性名') " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">//添加</span> node.setAttribute(<span class="hljs-string">'属性名'</span>, <span class="hljs-string">'值'</span>); <span class="hljs-comment">//删除</span> node.removeAttribute(<span class="hljs-string">'属性名'</span>); <span class="hljs-comment">//修改</span> node.setAttribute(<span class="hljs-string">'属性名'</span>, <span class="hljs-string">'值'</span>); <span class="hljs-comment">//查询</span> node.getAttribute(<span class="hljs-string">'属性名'</span>) </code></pre> <p><strong>对文本节点的操作:</strong></p> <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="//添加、删除、修改、查询 node.innerHTML = ''; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">//添加、删除、修改、查询</span> node.inner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a> = <span class="hljs-string">''</span>; </code></pre> <p>注:通过<code>DOM</code>还可以修改<code><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a></code>标签节点的样式:<br /><code>document.getElementById(id).style.property = new style</code></p> <p></code></p>

总结

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

JS扩展篇

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

JS扩展篇

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

80%的人都看过