<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>特爱瞎折腾</title>
  
  
  <link href="/blog/atom.xml" rel="self"/>
  
  <link href="https://gitee.com/hkjjsgdd/blog/"/>
  <updated>2020-07-20T05:24:36.726Z</updated>
  <id>https://gitee.com/hkjjsgdd/blog/</id>
  
  <author>
    <name>ZRS</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>图片相对路径的写法</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/07/20/%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%86%99%E6%B3%95/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/07/20/%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%86%99%E6%B3%95/</id>
    <published>2020-07-20T04:29:52.281Z</published>
    <updated>2020-07-20T05:24:36.726Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><p><strong>相对路径</strong></p><div class="note success">            <p>图片在html下一级目录里        写法： 文件夹名称/图片名称</p>          </div><div class="note default">            <p>图片在html的上一级目录里   写法：  ../图片名称</p>          </div><div class="note info">            <p>图片在html上一级的其他目录里  写法 : ../文件夹名称/图片名称</p>          </div><div class="note warning">            <p>在上一级加  ../, 两级则加两个  </p>          </div><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/beijing.css"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"dd"</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!--&lt;img src="images/1.jpg"&gt;--&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.dd</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">1000px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">1000px</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="number">#00ff00</span> <span class="built_in">url</span>(<span class="string">"../images/1.jpg"</span>) no-repeat center;</span><br><span class="line">    <span class="attribute">background-size</span>: cover;</span><br><span class="line">    <span class="attribute">background-attachment</span>: fixed;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>]]></content>
    
    <summary type="html">
    
      菜鸟的成长之路
    
    </summary>
    
    
      <category term="相对路径" scheme="https://gitee.com/hkjjsgdd/blog/categories/%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84/"/>
    
    
      <category term="相对路径" scheme="https://gitee.com/hkjjsgdd/blog/tags/%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84/"/>
    
  </entry>
  
  <entry>
    <title>jQuery基础篇-DOM篇</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/05/05/jQuery%E5%9F%BA%E7%A1%80%E7%AF%87-DOM%E7%AF%87/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/05/05/jQuery%E5%9F%BA%E7%A1%80%E7%AF%87-DOM%E7%AF%87/</id>
    <published>2020-05-05T13:03:16.539Z</published>
    <updated>2020-05-07T13:24:38.358Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="DOM节点的创建"><a href="#DOM节点的创建" class="headerlink" title="DOM节点的创建"></a>DOM节点的创建</h1><ul><li>创建元素：document.createElement</li><li>设置属性：setAttribute</li><li>添加文本：innerHTML</li><li>加入文档：appendChild</li></ul><h2 id="jQuery节点创建与属性的处理"><a href="#jQuery节点创建与属性的处理" class="headerlink" title="jQuery节点创建与属性的处理"></a>jQuery节点创建与属性的处理</h2><p><strong>创建元素节点</strong>：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"&lt;div&gt;&lt;/div&gt;"</span>)</span><br></pre></td></tr></table></figure><p><strong>创建文本节点</strong>：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"&lt;div&gt;我是文本节点&lt;/div&gt;"</span>)</span><br></pre></td></tr></table></figure><p><strong>创建为属性节点</strong>：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"&lt;div id='test' class='aaron'&gt;我是文本节点&lt;/div&gt;"</span>)</span><br></pre></td></tr></table></figure><h1 id="DOM节点的插入"><a href="#DOM节点的插入" class="headerlink" title="DOM节点的插入"></a>DOM节点的插入</h1><h2 id="DOM内部插入append-与appendTo"><a href="#DOM内部插入append-与appendTo" class="headerlink" title="DOM内部插入append()与appendTo()"></a>DOM内部插入append()与appendTo()</h2><p>动态创建的元素是不够的，它只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。那么问题来了，怎么放到文档上？</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/05/MC5UTnbXvGoai1J.png" alt=""></p><p>append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。</p><p>appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。</p><p>简单的总结就是：</p><p>.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">append()前面是被插入的对象，后面是要在对象内插入的元素内容</span><br><span class="line">appendTo()前面是要插入的元素内容，而后面是被插入的对象</span><br></pre></td></tr></table></figure><h2 id="DOM外部插入after-与before"><a href="#DOM外部插入after-与before" class="headerlink" title="DOM外部插入after()与before()"></a>DOM外部插入after()与before()</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/05/niBSlyvtd6NhXV7.png" alt=""></p><p><strong>注意点：</strong></p><ul><li>after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入</li><li>before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插</li></ul><h2 id="DOM内部插入prepend-与prependTo"><a href="#DOM内部插入prepend-与prependTo" class="headerlink" title="DOM内部插入prepend()与prependTo()"></a>DOM内部插入prepend()与prependTo()</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/05/ec8MHXBvZSzLhqp.png" alt=""></p><p>这里总结下内部操作四个方法的区别：</p><ul><li>append()向每个匹配的元素内部追加内容</li><li>prepend()向每个匹配的元素内部前置内容</li><li>appendTo()把所有匹配的元素追加到另一个指定元素的集合中</li><li>prependTo()把所有匹配的元素前置到另一个指定的元素集合中</li></ul><h2 id="DOM外部插入insertAfter-与insertBefore"><a href="#DOM外部插入insertAfter-与insertBefore" class="headerlink" title="DOM外部插入insertAfter()与insertBefore()"></a>DOM外部插入insertAfter()与insertBefore()</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/05/kRnU6IduFrm58Yp.png" alt=""></p><ul><li>.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。 对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面</li><li>.after()和.insertAfter() 实现同样的功能。主要的不同是语法——特别是（插入）内容和目标的位置。 对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面</li><li>before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理</li></ul><p>注意事项：</p><ul><li>insertAfter将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；</li><li>insertBefore将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；</li></ul><h1 id="DOM节点的删除"><a href="#DOM节点的删除" class="headerlink" title="DOM节点的删除"></a>DOM节点的删除</h1><h2 id="DOM节点删除之empty-的基本用法"><a href="#DOM节点删除之empty-的基本用法" class="headerlink" title="DOM节点删除之empty()的基本用法"></a>DOM节点删除之empty()的基本用法</h2><p>empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。</p><p>这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"hello"</span>&gt;<span class="xml"><span class="tag">&lt;<span class="name">p</span>&gt;</span>慕课网<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span>&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure><p>如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//通过empty处理</span></span><br><span class="line">$(<span class="string">'.hello'</span>).empty()</span><br><span class="line"></span><br><span class="line"><span class="comment">//结果：&lt;p&gt;慕课网&lt;/p&gt;被移除</span></span><br><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"hello"</span>&gt;&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure><h2 id="DOM节点删除之remove-的有参用法和无参用法"><a href="#DOM节点删除之remove-的有参用法和无参用法" class="headerlink" title="DOM节点删除之remove()的有参用法和无参用法"></a>DOM节点删除之remove()的有参用法和无参用法</h2><p>remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。</p><p>通过remove方法移除div及其内部所有元素，remove内部会自动操作事件销毁方法，所以使用使用起来非常简单</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//通过remove处理</span></span><br><span class="line">$(<span class="string">'.hello'</span>).remove()</span><br><span class="line"><span class="comment">//结果：&lt;div class="hello"&gt;&lt;p&gt;慕课网&lt;/p&gt;&lt;/div&gt; 全部被移除</span></span><br><span class="line"><span class="comment">//节点不存在了,同事事件也会被销毁</span></span><br></pre></td></tr></table></figure><h2 id="DOM节点删除之empty和remove区别"><a href="#DOM节点删除之empty和remove区别" class="headerlink" title="DOM节点删除之empty和remove区别"></a>DOM节点删除之empty和remove区别</h2><p><strong>empty方法</strong></p><ul><li>严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点</li><li>empty不能删除自己本身这个节点</li></ul><p><strong>remove方法</strong></p><ul><li>该节点与该节点所包含的所有后代节点将同时被删除</li><li>提供传递一个筛选的表达式，删除指定合集中的元素</li></ul><h2 id="DOM节点删除之保留数据的删除操作detach"><a href="#DOM节点删除之保留数据的删除操作detach" class="headerlink" title="DOM节点删除之保留数据的删除操作detach()"></a>DOM节点删除之保留数据的删除操作detach()</h2><p>如果我们希望临时删除页面上的节点，但是又不希望节点上的数据与事件丢失，并且能在下一个时间段让这个删除的节点显示到页面，这时候就可以使用detach方法来处理</p><p>来看看jquery官方文档的解释：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。</span><br><span class="line">$(<span class="string">"div"</span>).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。</span><br></pre></td></tr></table></figure><p>当然这里要特别注意，detach方法是JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据</p><h2 id="DOM节点删除之detach-和remove-区别"><a href="#DOM节点删除之detach-和remove-区别" class="headerlink" title="DOM节点删除之detach()和remove()区别"></a>DOM节点删除之detach()和remove()区别</h2><p><strong>remove移除节点</strong></p><ul><li>无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据</li><li>有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据</li></ul><p><strong>detach移除节点</strong></p><ul><li>移除的处理与remove一致</li><li>与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来</li><li>例如：$(“p”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。</li></ul><h1 id="DOM节点的复制与替换"><a href="#DOM节点的复制与替换" class="headerlink" title="DOM节点的复制与替换"></a>DOM节点的复制与替换</h1><h2 id="DOM拷贝clone"><a href="#DOM拷贝clone" class="headerlink" title="DOM拷贝clone()"></a>DOM拷贝clone()</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。</span><br></pre></td></tr></table></figure><p>clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了</p><p>示例：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">HTML部分</span><br><span class="line">&lt;div&gt;&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">JavaScript部分</span></span><br><span class="line"><span class="regexp">$("div").on('click', function() &#123;/</span><span class="regexp">/执行操作&#125;)</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/clone处理一</span></span><br><span class="line"><span class="regexp">$("div").clone()   /</span><span class="regexp">/只克隆了结构，事件丢失</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">/</span><span class="regexp">/clone处理二</span></span><br><span class="line"><span class="regexp">$("div").clone(true) /</span><span class="regexp">/结构、事件与数据都克隆</span></span><br></pre></td></tr></table></figure><p>使用克隆的我们需要额外知道的细节：</p><ul><li>clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css(‘color’,’red’) 增加了一个颜色</li><li>通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上</li><li>clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据</li><li>元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个</li></ul><h2 id="DOM替换replaceWith-和replaceAll"><a href="#DOM替换replaceWith-和replaceAll" class="headerlink" title="DOM替换replaceWith()和replaceAll()"></a>DOM替换replaceWith()和replaceAll()</h2><p><strong>.replaceWith( newContent )</strong>：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;第一段&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;第二段&lt;/</span>p&gt;</span><br><span class="line">    &lt;p&gt;第三段&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure><p>替换第二段的节点与内容</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;p:eq(1)&quot;).replaceWith(&#39;&lt;a style&#x3D;&quot;color:red&quot;&gt;替换第二段的内容&lt;&#x2F;a&gt;&#39;)</span><br></pre></td></tr></table></figure><p>通过jQuery筛选出第二个p元素，调用replaceWith进行替换，结果如下</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;第一段&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;a style="color:red"&gt;替换第二段的内容&lt;/</span>a&gt;<span class="string">'</span></span><br><span class="line"><span class="string">    &lt;p&gt;第三段&lt;/p&gt;</span></span><br><span class="line"><span class="string">&lt;/div&gt;</span></span><br></pre></td></tr></table></figure><p><strong>.replaceAll( target )</strong> <strong>：</strong>用集合的匹配元素替换每个目标元素</p><p>.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'&lt;a style="color:red"&gt;替换第二段的内容&lt;/a&gt;'</span>).replaceAll(<span class="string">'p:eq(1)'</span>)</span><br></pre></td></tr></table></figure><p>总结：</p><ul><li>.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别</li><li>.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序</li><li>.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用</li><li>.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点</li></ul><h2 id="DOM包裹wrap-方法"><a href="#DOM包裹wrap-方法" class="headerlink" title="DOM包裹wrap()方法"></a>DOM包裹wrap()方法</h2><p>如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法</p><p><strong>.wrap( wrappingElement )**</strong>：**在集合中匹配的每个元素周围包裹一个HTML结构</p><p>简单的看一段代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br></pre></td></tr></table></figure><p>给p元素增加一个div包裹</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).wrap(<span class="string">'&lt;div&gt;&lt;/div&gt;'</span>)</span><br></pre></td></tr></table></figure><p>最后的结构，p元素增加了一个父div的结构</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure><p><strong>.wrap( function )</strong> <strong>：</strong>一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象</p><p>使用后的效果与直接传递参数是一样，只不过可以把代码写在函数体内部，写法不同而已</p><p>以第一个案例为例：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).wrap(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'&lt;div&gt;&lt;/div&gt;'</span>;   <span class="comment">//与第一种类似，只是写法不一样</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><strong>注意：</strong></p><p>.wrap()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。</p><h2 id="DOM包裹unwrap-方法"><a href="#DOM包裹unwrap-方法" class="headerlink" title="DOM包裹unwrap()方法"></a>DOM包裹unwrap()方法</h2><p>我们可以通过wrap方法给选中元素增加一个包裹的父元素。相反，如果删除选中元素的父元素要如何处理 ?</p><p>jQuery提供了一个unwrap()方法 ，作用与wrap方法是相反的。将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。</p><p>看一段简单案例：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure><p>我要删除这段代码中的div，一般常规的方法会直接通过remove或者empty方法</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).remove();</span><br></pre></td></tr></table></figure><p>但是如果我还要保留内部元素p，这样就意味着需要多做很多处理，步骤相对要麻烦很多，为了更便捷，jQuery提供了unwrap方法很方便的处理了这个问题</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).unwrap();</span><br></pre></td></tr></table></figure><p>找到p元素，然后调用unwrap方法，这样只会删除父辈div元素了</p><p>结果：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br></pre></td></tr></table></figure><h2 id="DOM包裹wrapAll-方法"><a href="#DOM包裹wrapAll-方法" class="headerlink" title="DOM包裹wrapAll()方法"></a>DOM包裹wrapAll()方法</h2><p><strong>.wrapAll( wrappingElement )**</strong>：**给集合中匹配的元素增加一个外面包裹HTML结构</p><p>简单的看一段代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;p&gt;p元素&lt;/</span>p&gt;</span><br></pre></td></tr></table></figure><p>给所有p元素增加一个div包裹</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).wrapAll(<span class="string">'&lt;div&gt;&lt;/div&gt;'</span>)</span><br></pre></td></tr></table></figure><p>最后的结构，2个P元素都增加了一个父div的结构</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">    &lt;p&gt;p元素&lt;/</span>p&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure><p><strong>.wrapAll( function )</strong> <strong>：</strong>一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象</p><p>通过回调的方式可以单独处理每一个元素</p><p>以上面案例为例，</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'p'</span>).wrapAll(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'&lt;div&gt;&lt;div/&gt;'</span>; </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>以上的写法的结果如下，等同于warp的处理了</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure><p>注意：</p><p>.wrapAll()函数可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套多层，但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体，在这个整体的外部用指定的 HTML 结构进行包裹。</p><h2 id="DOM包裹wrapInner-方法"><a href="#DOM包裹wrapInner-方法" class="headerlink" title="DOM包裹wrapInner()方法"></a>DOM包裹wrapInner()方法</h2><p><strong>.wrapInner( wrappingElement )**</strong>：**给集合中匹配的元素的内部，增加包裹的HTML结构</p><p>听起来有点绕，可以用个简单的例子描述下，简单的看一段代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;p元素&lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;div&gt;p元素&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure><p>给所有元素增加一个p包裹</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).wrapInner(<span class="string">'&lt;p&gt;&lt;/p&gt;'</span>)</span><br></pre></td></tr></table></figure><p>最后的结构，匹配的di元素的内部元素被p给包裹了</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure><p><strong>.wrapInner( function )</strong> <strong>：</strong>允许我们用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容</p><p>以上面案例为例，</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'div'</span>).wrapInner(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">'&lt;p&gt;&lt;/p&gt;'</span>; </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>以上的写法的结果如下，等同于第一种处理了</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;p&gt;p元素&lt;<span class="regexp">/p&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure><p>注意：</p><div class="note info">            <p>当通过一个选择器字符串传递给.wrapInner() 函数，其参数应该是格式正确的 HTML，并且 HTML 标签应该是被正确关闭的。</p>          </div><p><strong>做以上笔记为了以后更好的查找，而不用再去翻</strong></p><hr><h1 id="jQuery遍历"><a href="#jQuery遍历" class="headerlink" title="jQuery遍历"></a>jQuery遍历</h1><h2 id="children"><a href="#children" class="headerlink" title="children( )"></a>children( )</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div <span class="class"><span class="keyword">class</span></span>=<span class="string">"div"</span>&gt;</span><br><span class="line">    &lt;ul <span class="class"><span class="keyword">class</span></span>=<span class="string">"son"</span>&gt;</span><br><span class="line">        &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"grandson"</span>&gt;<span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;/u</span>l&gt;</span><br><span class="line">&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure><p>代码如果是$(“div”).children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。</p><div class="note info">            <p>注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素</p>          </div><h2 id="find"><a href="#find" class="headerlink" title="find( )"></a>find( )</h2><p>代码如果是$(“div”).find(“li”)，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。</p><p><strong>.find()方法要注意的知识点：</strong></p><ul><li>find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。</li><li>与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*’。</li><li>find只在后代中遍历，不包括自己。</li><li>选择器 context 是由 .find() 方法实现的；因此，$(‘.item-ii’).find(‘li’) 等价于 $(‘li’, ‘.item-ii’)(找到类名为item-ii的标签下的li标签)。</li></ul><p><strong>注意重点：</strong></p><ul><li>.find()和.children()方法是相似的</li><li>1.children只查找第一级的子节点</li><li>2.find查找范围包括子节点的所有后代节点</li></ul><h2 id="parent"><a href="#parent" class="headerlink" title="parent( )"></a>parent( )</h2><p>jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法</p><p>查找ul的父元素div, $(ul).parent()，就是这样简单的表达</p><p><strong>parent()无参数</strong></p><p>parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象</p><h2 id="parents"><a href="#parents" class="headerlink" title="parents( )"></a>parents( )</h2><p>jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法</p><p>其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点</p><p>在li节点上找到祖 辈元素div， 这里可以用$(“li”).parents()方法</p><p><strong>parents()无参数</strong></p><p>parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;</p><p>返回的元素秩序是从离他们最近的父级元素开始的</p><h2 id="closest"><a href="#closest" class="headerlink" title="closest( )"></a>closest( )</h2><p><strong>closest()**</strong>方法接受一个匹配元素的选择器字符串**</p><p>从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素</p><p>例如：在div元素中，往上查找所有的li元素，可以这样表达</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"div"</span>).closet(<span class="string">"li')</span></span><br></pre></td></tr></table></figure><p><strong>注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一个元素的祖先元素</strong></p><p>closest()方法给定的jQuery集合或元素来过滤元素</p><p>同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个jQuery的对象</p><p><strong>注意事项：</strong>在使用的时候需要特别注意下</p><p>粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了</p><ol><li>起始位置不同：.closest开始于当前元素 .parents开始于父元素</li><li>遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合</li><li>结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象</li></ol><h2 id="next"><a href="#next" class="headerlink" title="next( )"></a>next( )</h2><p>jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法</p><p><strong>理解节点查找关系：</strong></p><p>如下class=”item-1”元素就是红色部分，那蓝色的class=”item-2”就是它的兄弟元素</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul <span class="class"><span class="keyword">class</span></span>=<span class="string">"level-3"</span>&gt;</span><br><span class="line">    &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"item-1"</span>&gt;<span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li class="item-2"&gt;2&lt;/</span>li&gt;</span><br><span class="line">    &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"item-3"</span>&gt;<span class="number">3</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br></pre></td></tr></table></figure><p><strong>next()无参数</strong></p><p>允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。</p><h2 id="prev"><a href="#prev" class="headerlink" title="prev( )"></a>prev( )</h2><p>jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法</p><p><strong>理解节点查找关系：</strong></p><p>如下蓝色的class=”item-2”的li元素，红色的节点就是它的prev兄弟节点</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul <span class="class"><span class="keyword">class</span></span>=<span class="string">"level-3"</span>&gt;</span><br><span class="line">    &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"item-1"</span>&gt;<span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li class="item-2"&gt;2&lt;/</span>li&gt;</span><br><span class="line">    &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"item-3"</span>&gt;<span class="number">3</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br></pre></td></tr></table></figure><p><strong>prev()无参数</strong></p><p>取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合</p><h2 id="sibling"><a href="#sibling" class="headerlink" title="sibling( )"></a>sibling( )</h2><p>jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法</p><p><strong>理解节点查找关系：</strong></p><p>如下蓝色的class=”item-2”的li元素，红色的节点就是它的siblings兄弟节点</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul <span class="class"><span class="keyword">class</span></span>=<span class="string">"level-3"</span>&gt;</span><br><span class="line">    &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"item-1"</span>&gt;<span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li class="item-2"&gt;2&lt;/</span>li&gt;</span><br><span class="line">    &lt;li <span class="class"><span class="keyword">class</span></span>=<span class="string">"item-3"</span>&gt;<span class="number">3</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br></pre></td></tr></table></figure><p><strong>siblings()无参数</strong></p><p>取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合</p><h2 id="add"><a href="#add" class="headerlink" title="add( )"></a>add( )</h2><p>.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。</p><p>简单的看一个案例：</p><p>操作：选择所有的li元素，之后把p元素也加入到li的合集中</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">    &lt;li&gt;list item <span class="number">1</span>&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li&gt;list item 3&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br><span class="line"><span class="regexp">&lt;p&gt;新的p元素&lt;/</span>p&gt;</span><br></pre></td></tr></table></figure><p><strong>处理一</strong>：传递选择器</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li'</span>).add(<span class="string">'p'</span>)</span><br></pre></td></tr></table></figure><p><strong>处理二</strong>：传递dom元素</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li'</span>).add(<span class="built_in">document</span>.getElementsByTagName(<span class="string">'p'</span>)[<span class="number">0</span>])</span><br></pre></td></tr></table></figure><p>还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'li'</span>).add(<span class="string">'&lt;p&gt;新的p元素&lt;/p&gt;'</span>).appendTo(目标位置)</span><br></pre></td></tr></table></figure><h2 id="each"><a href="#each" class="headerlink" title="each( )"></a>each( )</h2><p>。要一个一个给合集中每一个li设置颜色，这里方法就是each</p><p>.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数</p><p>所以大体上了解3个重点：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">each是一个for循环的包装迭代器</span><br><span class="line">each通过回调的方式处理，并且会有2个固定的实参，索引与元素</span><br><span class="line">each回调方法中的this指向当前迭代的dom元素</span><br></pre></td></tr></table></figure><p>看一个简单的案例</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul&gt;</span><br><span class="line">    &lt;li&gt;慕课网&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">    &lt;li&gt;Aaron&lt;/</span>li&gt;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br></pre></td></tr></table></figure><p>开始迭代li，循环2次</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"li"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params">index, element</span>) </span>&#123;</span><br><span class="line">     index 索引 <span class="number">0</span>,<span class="number">1</span></span><br><span class="line">     element是对应的li节点 li,li</span><br><span class="line">     <span class="keyword">this</span> 指向的是li</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循</p>]]></content>
    
    <summary type="html">
    
      jQuery的学习之路
    
    </summary>
    
    
      <category term="jQuery" scheme="https://gitee.com/hkjjsgdd/blog/categories/jQuery/"/>
    
    
      <category term="jQuery" scheme="https://gitee.com/hkjjsgdd/blog/tags/jQuery/"/>
    
  </entry>
  
  <entry>
    <title>jQuery基础篇-样式篇</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/05/03/JQuery%E5%9F%BA%E7%A1%80%E7%AF%87-%E6%A0%B7%E5%BC%8F%E7%AF%87/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/05/03/JQuery%E5%9F%BA%E7%A1%80%E7%AF%87-%E6%A0%B7%E5%BC%8F%E7%AF%87/</id>
    <published>2020-05-03T12:27:00.097Z</published>
    <updated>2020-05-04T13:51:53.682Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="jQuery环境搭建"><a href="#jQuery环境搭建" class="headerlink" title="jQuery环境搭建"></a>jQuery环境搭建</h1><p><a href="https://www.imooc.com/code/8066" target="_blank" rel="noopener">慕课网</a></p><h1 id="jQuery-HelloWorld"><a href="#jQuery-HelloWorld" class="headerlink" title="jQuery HelloWorld"></a>jQuery HelloWorld</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>/&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>第一个简单的jQuery程序<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">        div&#123;</span><br><span class="line"><span class="css">            <span class="selector-tag">padding</span><span class="selector-pseudo">:8px</span> 0<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css">            <span class="selector-tag">font-size</span><span class="selector-pseudo">:12px</span>;</span></span><br><span class="line"><span class="css">            <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span></span><br><span class="line"><span class="css">            <span class="selector-tag">border</span><span class="selector-pseudo">:solid</span> 1<span class="selector-tag">px</span> <span class="selector-id">#888</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">            $(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">               $(<span class="string">"div"</span>).html(<span class="string">"您好！通过慕课网学习jQuery才是最佳的途径。"</span>);</span></span><br><span class="line">            &#125;);</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="jQuery对象和DOM对象"><a href="#jQuery对象和DOM对象" class="headerlink" title="jQuery对象和DOM对象"></a>jQuery对象和DOM对象</h1><h2 id="DOM对象"><a href="#DOM对象" class="headerlink" title="DOM对象"></a>DOM对象</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> p = <span class="built_in">document</span>.getElementById(<span class="string">'imooc'</span>);</span><br><span class="line">p.innerHTML = <span class="string">'您好！通过慕课网学习jQuery才是最佳的途径'</span>;</span><br><span class="line">p.style.color = <span class="string">'red'</span>;</span><br></pre></td></tr></table></figure><h2 id="jQuery对象"><a href="#jQuery对象" class="headerlink" title="jQuery对象"></a>jQuery对象</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $p = $(<span class="string">'#imooc'</span>);</span><br><span class="line">$p.html(<span class="string">'您好！通过慕课网学习jQuery才是最佳的途径'</span>).css(<span class="string">'color'</span>,<span class="string">'red'</span>);</span><br></pre></td></tr></table></figure><h1 id="jQuery对象转化成DOM对象"><a href="#jQuery对象转化成DOM对象" class="headerlink" title="jQuery对象转化成DOM对象"></a>jQuery对象转化成DOM对象</h1><div class="note info">            <p>数组的索引是从0开始的，也就是第一个元素下标是0</p>          </div><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>元素一<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>元素二<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>元素三<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $div = $(<span class="string">'div'</span>) <span class="comment">//jQuery对象</span></span><br><span class="line"><span class="keyword">var</span> div = $div[<span class="number">0</span>] <span class="comment">//转化成DOM对象</span></span><br><span class="line">div.style.color = <span class="string">'red'</span> <span class="comment">//操作dom对象的属性</span></span><br></pre></td></tr></table></figure><div class="note success">            <p>数组的索引是从0开始的，也就是第一个元素下标是0</p>          </div><h2 id="还可以用jQuery自带的get（）方法"><a href="#还可以用jQuery自带的get（）方法" class="headerlink" title="还可以用jQuery自带的get（）方法"></a>还可以用jQuery自带的get（）方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $div = $(<span class="string">'div'</span>) <span class="comment">//jQuery对象</span></span><br><span class="line"><span class="keyword">var</span> div = $div.get(<span class="number">0</span>) <span class="comment">//通过get方法，转化成DOM对象</span></span><br><span class="line">div.style.color = <span class="string">'red'</span> <span class="comment">//操作dom对象的属性</span></span><br></pre></td></tr></table></figure><h1 id="DOM对象转化成jQuery对象"><a href="#DOM对象转化成jQuery对象" class="headerlink" title="DOM对象转化成jQuery对象"></a>DOM对象转化成jQuery对象</h1><div class="note info">            <p>如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象</p>          </div><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'div'</span>); <span class="comment">//dom对象</span></span><br><span class="line"><span class="keyword">var</span> $div = $(div); <span class="comment">//jQuery对象</span></span><br><span class="line"><span class="keyword">var</span> $first = $div.first(); <span class="comment">//找到第一个div元素</span></span><br><span class="line">$first.css(<span class="string">'color'</span>, <span class="string">'red'</span>); <span class="comment">//给第一个元素设置颜色</span></span><br></pre></td></tr></table></figure><div class="note warning">            <p>如果是想设置第二个，第三个颜色，则需要改成下列代码</p>          </div><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'div'</span>); <span class="comment">//dom对象</span></span><br><span class="line"><span class="keyword">var</span> $div = $(div); <span class="comment">//jQuery对象</span></span><br><span class="line">$div.eq(<span class="number">1</span>).css(<span class="string">'color'</span>,<span class="string">'red'</span>); <span class="comment">//给第2个元素设置颜色,依次类推，eq（2）是第三个元素</span></span><br></pre></td></tr></table></figure><p>jQuery第一天学习结束</p><hr><h1 id="jQuery选择器"><a href="#jQuery选择器" class="headerlink" title="jQuery选择器"></a>jQuery选择器</h1><h2 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( &quot;#id&quot; )</span><br></pre></td></tr></table></figure><h2 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( &quot;.class&quot; )</span><br></pre></td></tr></table></figure><h2 id="元素选择器"><a href="#元素选择器" class="headerlink" title="元素选择器"></a>元素选择器</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( &quot;element&quot; )  &#x2F;&#x2F;根据给定（html）标记名称选择所有的元素</span><br></pre></td></tr></table></figure><h2 id="全选择器"><a href="#全选择器" class="headerlink" title="全选择器"></a>全选择器</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$( &quot;*&quot; )</span><br></pre></td></tr></table></figure><h2 id="层选择器"><a href="#层选择器" class="headerlink" title="层选择器"></a>层选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/8d2HSfi9TEywnGa.png" alt=""></p><p>子元素 后代元素 兄弟元素 相邻元素</p><h2 id="特殊选择器this"><a href="#特殊选择器this" class="headerlink" title="特殊选择器this"></a>特殊选择器this</h2><p><strong>jQuery做法</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(&#39;p&#39;).click(function()&#123;</span><br><span class="line">    &#x2F;&#x2F;把p元素转化成jQuery的对象</span><br><span class="line">    var $this&#x3D; $(this) </span><br><span class="line">    $this.css(&#39;color&#39;,&#39;red&#39;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p>详情点击<a href="https://www.imooc.com/code/8353" target="_blank" rel="noopener">jQuery选择器之特殊选择器this</a></p><h2 id="基本筛选选择器"><a href="#基本筛选选择器" class="headerlink" title="基本筛选选择器"></a>基本筛选选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/D8oan5AMTXiz4Ic.png" alt=""></p><p>示例：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(&quot;.div:first&quot;)</span><br><span class="line">$(&quot;.aaron:eq(2)&quot;)</span><br></pre></td></tr></table></figure><div class="note success">            <p>注意jQuery合集都是从0开始索引</p>          </div><h2 id="内容筛选选择器"><a href="#内容筛选选择器" class="headerlink" title="内容筛选选择器"></a>内容筛选选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/jApGVI2WRX4N3mH.png" alt=""></p><p><strong>注意事项：</strong></p><ul><li><p>:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素</p></li><li><p>如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。</p></li><li><p>:parent与:empty是相反的，两者所涉及的子元素，包括文本节点</p></li></ul><h2 id="可见性筛选选择器"><a href="#可见性筛选选择器" class="headerlink" title="可见性筛选选择器"></a>可见性筛选选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/rzk2wpxjR6N517E.png" alt=""></p><div class="note success">            <p>:hidden选择器，不仅仅包含样式是display=”none”的元素，还包括隐藏表单、visibility等等</p><p>虽然我还不知道是啥意思，先记录一下</p>          </div><h2 id="属性筛选选择器"><a href="#属性筛选选择器" class="headerlink" title="属性筛选选择器"></a>属性筛选选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/G6iTnMQRSLEt749.png" alt=""></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">[attr&#x3D;&quot;value&quot;]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type&#x3D;&quot;text&quot;],input[type&#x3D;&quot;checkbox&quot;]等</span><br><span class="line">[attr*&#x3D;&quot;value&quot;]能在网站中帮助我们匹配不同类型的文件</span><br></pre></td></tr></table></figure><h2 id="子元素筛选选择器"><a href="#子元素筛选选择器" class="headerlink" title="子元素筛选选择器"></a>子元素筛选选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/eWHJlAwvs8dP6Nq.png" alt=""></p><p>注意事项：</p><ul><li><p>:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)</p></li><li><p>:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素</p></li><li><p>如果子元素只有一个的话，:first-child与:last-child是同一个</p></li><li><p>:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配</p></li><li><p>jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的</p></li><li><p>nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算</p></li></ul><h2 id="单元素选择器"><a href="#单元素选择器" class="headerlink" title="单元素选择器"></a>单元素选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/LvrnukMoRQwBHhN.png" alt=""></p><p>注意事项：</p><p>除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(‘:password’) == $(‘[type=password]’)</p><h2 id="表单对象属性筛选选择器"><a href="#表单对象属性筛选选择器" class="headerlink" title="表单对象属性筛选选择器"></a>表单对象属性筛选选择器</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/04/Xdh5Abnm93iSWTy.png" alt=""></p><p>注意事项：</p><ul><li><p>选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器</p></li><li><p>在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素</p></li></ul><h1 id="jQuery的属性与样式"><a href="#jQuery的属性与样式" class="headerlink" title="jQuery的属性与样式"></a>jQuery的属性与样式</h1><h2 id="attr-与-removeAttr"><a href="#attr-与-removeAttr" class="headerlink" title=".attr()与.removeAttr()"></a>.attr()与.removeAttr()</h2><p>每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()</p><p><strong>attr()有4个表达式</strong></p><ul><li><p>attr(传入属性名)：获取属性的值</p></li><li><p>attr(属性名, 属性值)：设置属性的值</p></li><li><p>attr(属性名,函数值)：设置属性的函数值</p></li><li><p>attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }</p></li></ul><p><strong>.removeAttr( attributeName )</strong> : 为匹配的元素集合中的每个元素中移除一个属性（attribute）</p><h2 id="html-及-text"><a href="#html-及-text" class="headerlink" title="html()及.text()"></a>html()及.text()</h2><p><strong>.html()方法</strong> </p><p>获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：</p><ul><li><p>.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容</p></li><li><p>.html( htmlString ) 设置每一个匹配元素的html内容</p></li><li><p>.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数</p></li></ul><div class="note info">            <p>.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）</p>          </div><p><strong>.text()方法</strong></p><p>得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：</p><ul><li><p>.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代</p></li><li><p>.text( textString ) 用于设置匹配元素内容的文本</p></li><li><p>.text( function(index, text) ) 用来返回设置文本内容的一个函数</p></li></ul><div class="note info">            <p>.text()结果返回一个字符串，包含所有匹配元素的合并文本</p>          </div><p><strong>.html与.text的异同:</strong></p><ul><li><p>.html与.text的方法操作是一样，只是在具体针对处理对象不同</p></li><li><p>.html处理的是元素内容，.text处理的是文本内容</p></li><li><p>.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用</p></li><li><p>如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的</p></li><li><p>火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器</p></li></ul><h2 id="val"><a href="#val" class="headerlink" title=".val()"></a>.val()</h2><p>jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。</p><p><strong>.val()方法</strong></p><ul><li><p>.val()无参数，获取匹配的元素集合中第一个元素的当前值</p></li><li><p>.val( value )，设置匹配的元素集合中每个元素的值</p></li><li><p>.val( function ) ，一个用来返回设置值的函数</p><p><strong>注意事项：</strong></p></li><li><p>通过.val()处理select元素， 当没有选择项被选中，它返回null</p></li><li><p>.val()方法多用来设置表单的字段的值</p></li><li><p>如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值</p></li></ul><h2 id="html-text-和-val-的差异总结："><a href="#html-text-和-val-的差异总结：" class="headerlink" title=".html(),.text()和.val()的差异总结："></a><strong>.html(),.text()和.val()的差异总结：</strong></h2><ul><li><p>.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的”value”值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的”value”值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。</p></li><li><p>.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。</p></li><li><p>.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。</p></li></ul><h2 id="增加样式-addClass"><a href="#增加样式-addClass" class="headerlink" title="增加样式.addClass()"></a>增加样式.addClass()</h2><p><strong>.addClass( className )方法</strong></p><ul><li><p>.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名</p></li><li><p>.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名</p></li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上</span><br></pre></td></tr></table></figure><p>例子：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;p class&#x3D;&quot;orgClass&quot;&gt;</span><br><span class="line">$(&quot;p&quot;).addClass(&quot;newClass&quot;)</span><br></pre></td></tr></table></figure><h2 id="删除样式-removeClass"><a href="#删除样式-removeClass" class="headerlink" title="删除样式.removeClass()"></a>删除样式.removeClass()</h2><p><strong>.removeClass( )方法</strong></p><ul><li><p>.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名</p></li><li><p>.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名</p></li></ul><p><strong>注意事项</strong></p><p>如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除</p><h2 id="切换样式-toggleClass"><a href="#切换样式-toggleClass" class="headerlink" title="切换样式.toggleClass()"></a>切换样式.toggleClass()</h2><p>jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass</p><p><strong>.toggleClass( )方法：</strong>在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类</p><ul><li><p>.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名</p></li><li><p>.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除</p></li><li><p>.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值</p></li><li><p>.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数</p></li></ul><p><strong>注意事项：</strong></p><ul><li><p>toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加</p></li><li><p>toggleClass会保留原有的Class名后新增，通过空格隔开</p></li></ul><h2 id="样式操作-css"><a href="#样式操作-css" class="headerlink" title="样式操作.css()"></a>样式操作.css()</h2><p><strong>.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性</strong></p><p><strong>获取：</strong></p><ul><li><p>.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值</p></li><li><p>.css( propertyNames )：传递一组数组，返回一个对象结果</p></li></ul><p><strong>设置：</strong></p><ul><li><p>.css(propertyName, value )：设置CSS</p></li><li><p>.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理</p></li><li><p>.css( properties )：可以传一个对象，同时设置多个样式</p></li></ul><p><strong>注意事项：</strong></p><ul><li><p>浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px</p></li><li><p>.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理</p></li><li><p>当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css(“width”,50}) 与 .css(“width”,”50px”})一样</p></li></ul><p><strong>.css方法设置的样式属性优先级要高于.addClass方法，.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则</strong><br><strong>如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式</strong></p><h2 id="元素的数据存储"><a href="#元素的数据存储" class="headerlink" title="元素的数据存储"></a>元素的数据存储</h2><p>jQuery提供的存储接口</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">jQuery.data( element, key, value )   &#x2F;&#x2F;静态接口,存数据</span><br><span class="line">jQuery.data( element, key )  &#x2F;&#x2F;静态接口,取数据   </span><br><span class="line">.data( key, value ) &#x2F;&#x2F;实例接口,存数据</span><br><span class="line">.data( key ) &#x2F;&#x2F;实例接口,存数据</span><br></pre></td></tr></table></figure><p>以上笔记来自慕课网<strong>jQuery基础 (一)—样式篇</strong>，写这篇博客为了督促自己再回来看一眼</p>]]></content>
    
    <summary type="html">
    
      jQuery的学习之路
    
    </summary>
    
    
      <category term="jQuery" scheme="https://gitee.com/hkjjsgdd/blog/categories/jQuery/"/>
    
    
      <category term="jQuery" scheme="https://gitee.com/hkjjsgdd/blog/tags/jQuery/"/>
    
  </entry>
  
  <entry>
    <title>JS进阶篇完结</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/05/02/JS%E8%BF%9B%E9%98%B6%E7%AF%87%E5%AE%8C%E7%BB%93/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/05/02/JS%E8%BF%9B%E9%98%B6%E7%AF%87%E5%AE%8C%E7%BB%93/</id>
    <published>2020-05-02T12:34:19.046Z</published>
    <updated>2020-05-02T15:21:58.895Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><p><strong>通过 JavaScript实现选项卡的切换</strong></p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/02/tQfxemRXBjMrvSG.gif" alt="选项卡切换"></p><p><strong>代码如下</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>实践题 - 选项卡<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line">     /* </span><br><span class="line">     标签和文本结合区域效果制作：</span><br><span class="line">     1.用ul做分类标签</span><br><span class="line">     2.把ul的display定义为block使ul区域和下面div区域结合在一起</span><br><span class="line">     3.给ul定义一个下边框或者给div内容区域定义一个上边框</span><br><span class="line"><span class="css">     4.所有<span class="selector-tag">li</span>标签默认样式不设下边框，作为激活显示的<span class="selector-tag">li</span>标签加宽其<span class="selector-id">#fff</span>（白色）</span></span><br><span class="line">     区域的下边框，覆盖。</span><br><span class="line">     */  </span><br><span class="line">*&#123;</span><br><span class="line"><span class="css">    <span class="selector-tag">margin</span><span class="selector-pseudo">:0px</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">padding</span><span class="selector-pseudo">:0px</span>; </span></span><br><span class="line"><span class="css">    <span class="selector-tag">font</span><span class="selector-pseudo">:12px</span> <span class="selector-tag">normal</span>;</span></span><br><span class="line">    font-family:微软雅黑;</span><br><span class="line">    &#125;       </span><br><span class="line"><span class="css"> <span class="selector-id">#tabs</span>&#123;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">width</span><span class="selector-pseudo">:290px</span>;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">height</span><span class="selector-pseudo">:150px</span>; </span></span><br><span class="line"><span class="css">     <span class="selector-tag">padding</span><span class="selector-pseudo">:5px</span>; </span></span><br><span class="line"><span class="css">     <span class="selector-tag">margin</span><span class="selector-pseudo">:20px</span>;</span></span><br><span class="line"> &#125;</span><br><span class="line"><span class="css"> <span class="selector-id">#tabs</span> <span class="selector-tag">ul</span>&#123;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">list-style</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">display</span><span class="selector-pseudo">:block</span>;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">height</span><span class="selector-pseudo">:30px</span>; </span></span><br><span class="line"><span class="css">     <span class="selector-tag">line-height</span><span class="selector-pseudo">:30px</span>;</span></span><br><span class="line"> &#125;</span><br><span class="line"><span class="css"> <span class="selector-id">#tabs</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">float</span><span class="selector-pseudo">:left</span>; <span class="selector-tag">width</span><span class="selector-pseudo">:60px</span>; <span class="selector-tag">height</span><span class="selector-pseudo">:28px</span>; </span></span><br><span class="line"><span class="css">     <span class="selector-tag">line-height</span><span class="selector-pseudo">:28px</span>; <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">display</span><span class="selector-pseudo">:inline-block</span>;<span class="selector-tag">margin</span><span class="selector-pseudo">:0px</span> 3<span class="selector-tag">px</span>;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">border</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-id">#aaa</span>;  </span></span><br><span class="line"><span class="css">     <span class="selector-tag">border-bottom</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">cursor</span><span class="selector-pseudo">:pointer</span>; <span class="selector-tag">background</span>:<span class="selector-id">#fff</span>; <span class="selector-tag">list-style</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line"> &#125;</span><br><span class="line"><span class="css"> <span class="selector-id">#tabs</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-class">.on</span>&#123;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">border-top</span><span class="selector-pseudo">:2px</span> <span class="selector-tag">solid</span> <span class="selector-tag">saddlebrown</span>; </span></span><br><span class="line"><span class="css">     <span class="selector-tag">border-bottom</span><span class="selector-pseudo">:2px</span> <span class="selector-tag">solid</span> <span class="selector-id">#fff</span>;</span></span><br><span class="line"> &#125;</span><br><span class="line"><span class="css"> <span class="selector-id">#tabs</span> <span class="selector-tag">div</span>&#123;</span></span><br><span class="line"><span class="css">     <span class="selector-tag">height</span><span class="selector-pseudo">:120px</span>; <span class="selector-tag">line-height</span><span class="selector-pseudo">:25px</span>; <span class="selector-tag">border</span><span class="selector-pseudo">:1px</span> <span class="selector-tag">solid</span> <span class="selector-id">#336699</span>;  </span></span><br><span class="line"><span class="css">     <span class="selector-tag">border-top</span><span class="selector-pseudo">:2px</span> <span class="selector-tag">saddlebrown</span> <span class="selector-tag">solid</span>;<span class="selector-tag">padding</span><span class="selector-pseudo">:5px</span>;</span></span><br><span class="line"> &#125;</span><br><span class="line"><span class="css"> <span class="selector-class">.hide</span>&#123;<span class="attribute">display</span>:none;&#125;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span>     </span><br><span class="line"></span><br><span class="line"><span class="javascript">    <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> oTab = <span class="built_in">document</span>.getElementById(<span class="string">"tabs"</span>)</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> li = <span class="built_in">document</span>.getElementsByTagName(<span class="string">"li"</span>);</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> div = oTab.getElementsByTagName(<span class="string">"div"</span>);<span class="comment">//oTabs.get...  </span></span></span><br><span class="line">        是为了定义className作用对象为id为tabs下的所有文本div</span><br><span class="line">        </span><br><span class="line"><span class="actionscript">        <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;li.length;i++)&#123;<span class="comment">//获取所有i编号的元素</span></span></span><br><span class="line"><span class="actionscript">            li[i].index = i;  <span class="comment">//定义一个index属性对li进行编号</span></span></span><br><span class="line"><span class="actionscript">            li[i].onclick = <span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;<span class="comment">//再注册一个点击事件  </span></span></span><br><span class="line">            当点击的时候所有标签都恢复最初状态</span><br><span class="line"><span class="actionscript">            <span class="keyword">for</span>(<span class="keyword">var</span> n=<span class="number">0</span>;n&lt;li.length;n++)&#123;<span class="comment">//这步是相对于未被点击部分的样式</span></span></span><br><span class="line"><span class="actionscript">                li[n].className = <span class="string">""</span>;</span></span><br><span class="line"><span class="actionscript">                div[n].className = <span class="string">"hide"</span>;</span></span><br><span class="line">            &#125;</span><br><span class="line"><span class="actionscript">            <span class="keyword">this</span>.className = <span class="string">"on"</span>;<span class="comment">//再对点击事件添加相应的属性</span></span></span><br><span class="line"><span class="actionscript">            div[<span class="keyword">this</span>.index].className = <span class="string">""</span>;</span></span><br><span class="line"><span class="actionscript">            <span class="comment">//通过之前的index编号绑定的指定div</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"> </span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- HTML页面布局 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"tabs"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"on"</span>&gt;</span>房产<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>家居<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>二手房<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    275万购昌平邻铁三居 总价20万买一居<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    200万内购五环三居 140万安家东三环<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    北京首现零首付楼盘 53万购东5环50平<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    京楼盘直降5000 中信府 公园楼王现房<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hide"</span>&gt;</span></span><br><span class="line">     40平出租屋大改造 美少女的混搭小窝<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">     经典清新简欧爱家 90平老房焕发新生<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">     新中式的酷色温情 66平撞色活泼家居<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">     瓷砖就像选好老婆 卫生间烟道的设计<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"hide"</span>&gt;</span></span><br><span class="line">     通州豪华3居260万 二环稀缺2居250w甩<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">     西3环通透2居290万 130万2居限量抢购<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">     黄城根小学学区仅260万 121平70万抛!<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">     独家别墅280万 苏州桥2居优惠价248万<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"> </span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p><strong>更新</strong></p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/05/02/zIAflT4UaPorYnE.png" alt=""></p><p>在B站看到的另一种，代码如下</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>选项卡切换<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line">        *&#123;</span><br><span class="line"><span class="css">          <span class="selector-tag">margin</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">padding</span><span class="selector-pseudo">:0</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line">        body&#123;</span><br><span class="line">            background-image: url(https://i.loli.net/2020/05/02/dgPwHx76CLalENS.jpg);</span><br><span class="line"><span class="css">            <span class="comment">/* 网页的背景图 ，ctrl+k+c注释，ctrl+k+u  取消注释   */</span></span></span><br><span class="line">        &#125;</span><br><span class="line"><span class="css">        <span class="selector-class">.tab</span>&#123;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">width</span><span class="selector-pseudo">:800px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">height</span><span class="selector-pseudo">:500px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">background-color</span>: <span class="selector-tag">rgba</span>(0, 0, 0, 0<span class="selector-class">.4</span>);</span></span><br><span class="line"><span class="css">          <span class="selector-tag">margin</span><span class="selector-pseudo">:60px</span> <span class="selector-tag">auto</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line"><span class="css">        <span class="selector-class">.tab_list</span> <span class="selector-tag">ul</span>&#123;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">width</span><span class="selector-pseudo">:800px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">height</span><span class="selector-pseudo">:60px</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line"><span class="css">        <span class="selector-class">.tab_list</span> <span class="selector-tag">ul</span> <span class="selector-tag">li</span>&#123;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">width</span><span class="selector-pseudo">:200px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">height</span><span class="selector-pseudo">:60px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">background-color</span><span class="selector-pseudo">:rgba(122</span>,133,122,0<span class="selector-class">.5</span>);</span></span><br><span class="line"><span class="css">          <span class="selector-tag">list-style</span><span class="selector-pseudo">:none</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">float</span><span class="selector-pseudo">:left</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">text-align</span><span class="selector-pseudo">:center</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">line-height</span><span class="selector-pseudo">:60px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">font-size</span><span class="selector-pseudo">:20px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">color</span><span class="selector-pseudo">:white</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line"><span class="css">        <span class="selector-class">.tab_content</span>&#123;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">width</span><span class="selector-pseudo">:800px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">height</span><span class="selector-pseudo">:440px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">position</span><span class="selector-pseudo">:absolute</span>;</span></span><br><span class="line">        &#125;</span><br><span class="line"><span class="css">        <span class="selector-class">.tab_content</span> <span class="selector-class">.item</span>&#123;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">width</span><span class="selector-pseudo">:800px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">height</span><span class="selector-pseudo">:440px</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">position</span><span class="selector-pseudo">:absolute</span>;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">color</span><span class="selector-pseudo">:white</span>;</span></span><br><span class="line">          font-size: 50px;</span><br><span class="line">          text-align: center;</span><br><span class="line">        &#125;</span><br><span class="line"><span class="css">        <span class="selector-class">.tab_list</span> <span class="selector-class">.bgc</span>&#123;</span></span><br><span class="line"><span class="css">          <span class="selector-tag">background-color</span><span class="selector-pseudo">:rgb(61</span>, 9, 182);</span></span><br><span class="line">        &#125;</span><br><span class="line">  <span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab"</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab_list"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"bgc"</span>&gt;</span>张凯<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span>蔡徐坤<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span>胡康进<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span>舔狗<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab_content"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span> <span class="attr">style</span>=<span class="string">"display:block;"</span>&gt;</span>测试<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>篮球少年<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>弟弟吧你!<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"item"</span>&gt;</span>舔到最后一无所有<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span></span><br><span class="line"><span class="actionscript">            <span class="comment">//操作的元素</span></span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> lis=<span class="built_in">document</span>.getElementsByTagName(<span class="string">"li"</span>);</span></span><br><span class="line"><span class="javascript">            <span class="keyword">var</span> items=<span class="built_in">document</span>.getElementsByClassName(<span class="string">"item"</span>);</span></span><br><span class="line"><span class="actionscript">            <span class="comment">//遍历节点，给节点添加事件</span></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;lis.length;i++)&#123;</span></span><br><span class="line">                lis[i].index=i;</span><br><span class="line"><span class="actionscript">                lis[i].onmousemove=<span class="function"><span class="keyword">function</span><span class="params">()</span></span>&#123;</span></span><br><span class="line"><span class="actionscript">                  <span class="comment">//再次for循环遍历，排空其余的，添加自己的展示类</span></span></span><br><span class="line"><span class="actionscript">                  <span class="keyword">for</span>(<span class="keyword">var</span> j=<span class="number">0</span>;j&lt;items.length;j++)&#123;</span></span><br><span class="line"><span class="actionscript">                    lis[j].className=<span class="string">''</span>;</span></span><br><span class="line"><span class="actionscript">                    <span class="comment">//同样的操作，给下面的内容添加展示先排空</span></span></span><br><span class="line"><span class="actionscript">                    items[j].style.display=<span class="string">"none"</span>;</span></span><br><span class="line">                  &#125;</span><br><span class="line"><span class="actionscript">                  <span class="keyword">this</span>.className=<span class="string">"bgc"</span></span></span><br><span class="line"><span class="actionscript">                  <span class="comment">//添加相应的展示内容</span></span></span><br><span class="line"><span class="actionscript">                  items[<span class="keyword">this</span>.index].style.display=<span class="string">"block"</span>;</span></span><br><span class="line"></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">      <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure><p>相比之下，第二种可能更好理解，但还是有些不明白的地方，以上代码是JS进阶篇结课任务，copy了dalao的代码，虽然现在有些还不太明白，打算过段时间回头继续看。</p>]]></content>
    
    <summary type="html">
    
      JS进阶篇学习完毕
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/categories/JavaScript/"/>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>数据结构之最小生成树</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/04/28/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%9C%80%E5%B0%8F%E7%94%9F%E6%88%90%E6%A0%91/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/04/28/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B9%8B%E6%9C%80%E5%B0%8F%E7%94%9F%E6%88%90%E6%A0%91/</id>
    <published>2020-04-27T16:00:00.000Z</published>
    <updated>2020-04-28T13:03:00.933Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="什么是最小生成树"><a href="#什么是最小生成树" class="headerlink" title="什么是最小生成树"></a>什么是最小生成树</h1><h2 id="是一棵树"><a href="#是一棵树" class="headerlink" title="是一棵树"></a>是一棵树</h2><ul><li><p>无回路</p></li><li><p>v个顶点一定有v-1条边</p></li></ul><h2 id="是生成树"><a href="#是生成树" class="headerlink" title="是生成树"></a>是生成树</h2><ul><li><p>包含全部顶点</p></li><li><p>v-1条边都在图里</p></li></ul><h2 id="边和权重都最小"><a href="#边和权重都最小" class="headerlink" title="边和权重都最小"></a>边和权重都最小</h2><h1 id="Prim算法-让一棵小树长大"><a href="#Prim算法-让一棵小树长大" class="headerlink" title="Prim算法-让一棵小树长大"></a>Prim算法-让一棵小树长大</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">void Prim()</span><br><span class="line">&#123;</span><br><span class="line">MST&#x3D;&#123;s&#125;;</span><br><span class="line">while(1)&#123;</span><br><span class="line">V&#x3D; 未收录顶点中dist最小者;</span><br><span class="line">if( 这样的v不存在)</span><br><span class="line">break;</span><br><span class="line">将v收录进MST: dist[V]&#x3D;0;</span><br><span class="line">for(V的每个邻接点w)</span><br><span class="line">if(dist[w]！&#x3D;0)</span><br><span class="line">if(E(v,w)&lt;dist[w])&#123;</span><br><span class="line">dist[w]&#x3D;E(v,w);</span><br><span class="line">parent[w]&#x3D;v;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line">if(MST中收到的顶点不到v个)</span><br><span class="line">Error(&quot;生成树不存在&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>时间复杂度<strong>T=O（v^2)</strong></p><h1 id="Kruskal算法-将森林合并成树"><a href="#Kruskal算法-将森林合并成树" class="headerlink" title="Kruskal算法-将森林合并成树"></a>Kruskal算法-将森林合并成树</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">void Kruskal( Graph G)</span><br><span class="line">&#123;</span><br><span class="line">MST&#x3D;&#123; &#125;;</span><br><span class="line">while(MST中不到V-1条边&amp;&amp; E中还有边)&#123;</span><br><span class="line">从E中取一条权重最小的边E(v,w);</span><br><span class="line">将E(v,w)从E中删除;</span><br><span class="line">if(E(v,w)不在MST中构成回龙路)</span><br><span class="line">将E(v,w)加入MST;</span><br><span class="line">else</span><br><span class="line">彻底无视E(v,w);</span><br><span class="line">&#125;</span><br><span class="line">if (MST中不到v-1条边)</span><br><span class="line">Error(&quot;生成树不存在&quot;);</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>时间复杂度 <strong>T=O（ElogE)</strong></p><div class="note success">            <p>以上笔记来自于mooc中国大学数据结构浙江大学</p>          </div>]]></content>
    
    <summary type="html">
    
      目前正在学习
    
    </summary>
    
    
      <category term="数据结构" scheme="https://gitee.com/hkjjsgdd/blog/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/"/>
    
    
      <category term="数据结构" scheme="https://gitee.com/hkjjsgdd/blog/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript学习笔记（4）-事件和JS内置对象（上）</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/04/19/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%884%EF%BC%89-%E4%BA%8B%E4%BB%B6%E5%92%8CJS%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1%EF%BC%88%E4%B8%8A%EF%BC%89/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/04/19/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%884%EF%BC%89-%E4%BA%8B%E4%BB%B6%E5%92%8CJS%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1%EF%BC%88%E4%B8%8A%EF%BC%89/</id>
    <published>2020-04-19T13:51:55.040Z</published>
    <updated>2020-04-19T14:19:54.236Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="什么是事件"><a href="#什么是事件" class="headerlink" title="什么是事件"></a>什么是事件</h1><p>JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。</p><p>比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/19/kyD7HT9rJvewqEj.png" alt=""></p><h2 id="JS完成一个简单的计算器"><a href="#JS完成一个简单的计算器" class="headerlink" title="JS完成一个简单的计算器"></a>JS完成一个简单的计算器</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line"> &lt;head&gt;</span><br><span class="line">  &lt;title&gt; 事件&lt;&#x2F;title&gt;  </span><br><span class="line">  &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">   function count()&#123;</span><br><span class="line">       var d &#x3D; &quot;&quot;;</span><br><span class="line">    var a&#x3D;document.getElementById(&quot;txt1&quot;).value;   </span><br><span class="line">    &#x2F;&#x2F;获取第一个输入框的值</span><br><span class="line">    var b&#x3D;document.getElementById(&quot;txt2&quot;).value;</span><br><span class="line">&#x2F;&#x2F;获取第二个输入框的值</span><br><span class="line">    var c&#x3D;document.getElementById(&quot;select&quot;).value;</span><br><span class="line">&#x2F;&#x2F;获取选择框的值</span><br><span class="line">    switch(c)</span><br><span class="line">&#123;</span><br><span class="line">     case &quot;+&quot;:</span><br><span class="line">     &#x2F;&#x2F;d &#x3D; a + b;</span><br><span class="line">     d &#x3D; parseInt(a)+parseInt(b);</span><br><span class="line">     break;</span><br><span class="line">     case &quot;-&quot;:</span><br><span class="line">     d &#x3D; a-b;</span><br><span class="line">     break;</span><br><span class="line">     case &quot;*&quot;:</span><br><span class="line">     d &#x3D; a*b;</span><br><span class="line">     break;</span><br><span class="line">     default:</span><br><span class="line">     d &#x3D; a&#x2F;b;</span><br><span class="line">     &#125;</span><br><span class="line">    document.getElementById(&quot;fruit&quot;).value   &#x3D; d;</span><br><span class="line">    </span><br><span class="line">   &#125;</span><br><span class="line">  &lt;&#x2F;script&gt; </span><br><span class="line"> &lt;&#x2F;head&gt; </span><br><span class="line"> &lt;body&gt;</span><br><span class="line">   计数器：&lt;input type&#x3D;&#39;text&#39; id&#x3D;&#39;txt1&#39; &#x2F;&gt; </span><br><span class="line">   &lt;select id&#x3D;&#39;select&#39;&gt;</span><br><span class="line">&lt;option value&#x3D;&#39;+&#39;&gt;+&lt;&#x2F;option&gt;</span><br><span class="line">&lt;option value&#x3D;&quot;-&quot;&gt;-&lt;&#x2F;option&gt;</span><br><span class="line">&lt;option value&#x3D;&quot;*&quot;&gt;*&lt;&#x2F;option&gt;</span><br><span class="line">&lt;option value&#x3D;&quot;&#x2F;&quot;&gt;&#x2F;&lt;&#x2F;option&gt;</span><br><span class="line">   &lt;&#x2F;select&gt;</span><br><span class="line">   &lt;input type&#x3D;&#39;text&#39; id&#x3D;&#39;txt2&#39; &#x2F;&gt; </span><br><span class="line">   &lt;input type&#x3D;&#39;button&#39; value&#x3D;&#39;&#x3D;&#39; onclick&#x3D;&quot;count()&quot;&#x2F;&gt; &lt;!--通过 &#x3D; 按钮来调用创建的函数，得到结果--&gt; </span><br><span class="line">   &lt;input type&#x3D;&#39;text&#39; id&#x3D;&#39;fruit&#39; &#x2F;&gt;   </span><br><span class="line"> &lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure><div class="note info">            <p>info 注意:获取元素的值设置和获取方法为：  </p><p>例：赋值：document.getElementById(“id”）.value = 1；   </p><p>取值：var = document.getElementById(“id”）.value；</p>          </div><div class="note info">            <p>info 注意:在函数中为了运算，需要将传递到函数中的文本内容采用parseInt()  </p><p>或者是parseFloat()函数将文本转换为整型Int或者是浮点Float数字;</p>          </div><h1 id="什么是对象"><a href="#什么是对象" class="headerlink" title="什么是对象"></a>什么是对象</h1><p>JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有<strong>属性</strong>和<strong>方法</strong>。</p><p><strong>对象的属性：</strong>反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；</p><p><strong>对象的方法：</strong>能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；</p><p>JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：</p><p><strong>访问对象属性的方法</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">objectName.propertyName</span><br></pre></td></tr></table></figure><p><strong>访问对象的方法：</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">objectName.methodName()</span><br></pre></td></tr></table></figure><h2 id="Date日期对象"><a href="#Date日期对象" class="headerlink" title="Date日期对象"></a>Date日期对象</h2><p><strong>定义一个时间对象</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var Udate&#x3D;new Date();</span><br></pre></td></tr></table></figure><p><strong>自定义初始值</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var d &#x3D; new Date(2012, 10, 1);  &#x2F;&#x2F;2012年10月1日</span><br><span class="line">var d &#x3D; new Date(&#39;Oct 1, 2012&#39;); &#x2F;&#x2F;2012年10月1日</span><br></pre></td></tr></table></figure><h2 id="返回-设置年份方法"><a href="#返回-设置年份方法" class="headerlink" title="返回/设置年份方法"></a>返回/设置年份方法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">get&#x2F;setFullYear()</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var mydate&#x3D;new Date();&#x2F;&#x2F;当前时间2014年3月6日</span><br><span class="line">document.write(mydate+&quot;&lt;br&gt;&quot;);&#x2F;&#x2F;输出当前时间</span><br><span class="line">document.write(mydate.getFullYear()+&quot;&lt;br&gt;&quot;);&#x2F;&#x2F;输出当前年份</span><br><span class="line">mydate.setFullYear(81); &#x2F;&#x2F;设置年份</span><br><span class="line">document.write(mydate+&quot;&lt;br&gt;&quot;); &#x2F;&#x2F;输出年份被设定为 0081年。</span><br></pre></td></tr></table></figure><h2 id="返回星期方法"><a href="#返回星期方法" class="headerlink" title="返回星期方法"></a>返回星期方法</h2><p><strong>getDay()</strong> 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  var mydate&#x3D;new Date();&#x2F;&#x2F;定义日期对象</span><br><span class="line">  var weekday&#x3D;[&quot;星期日&quot;,&quot;星期一&quot;,&quot;星期二&quot;,&quot;星期三&quot;,&quot;星期四&quot;,&quot;星期五&quot;,&quot;星期六&quot;];</span><br><span class="line">&#x2F;&#x2F;定义数组对象,给每个数组项赋值</span><br><span class="line">  var mynum&#x3D;mydate.getDay();&#x2F;&#x2F;返回值存储在变量mynum中</span><br><span class="line">  document.write(mydate.getDay());&#x2F;&#x2F;输出getDay()获取值</span><br><span class="line">  document.write(&quot;今天是：&quot;+ weekday[mynum]);&#x2F;&#x2F;输出星期几</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><h2 id="返回-设置时间方法"><a href="#返回-设置时间方法" class="headerlink" title="返回/设置时间方法"></a>返回/设置时间方法</h2><p><strong>get/setTime()</strong> 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。</p><p>如果将目前日期对象的时间推迟1小时，代码如下:</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  var mydate&#x3D;new Date();</span><br><span class="line">  document.write(&quot;当前时间：&quot;+mydate+&quot;&lt;br&gt;&quot;);</span><br><span class="line">  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);</span><br><span class="line">  document.write(&quot;推迟一小时时间：&quot; + mydate);</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><p>如果是两个小时以上，则只需在第一个60前面再*2即可</p><h2 id="String-字符串对象"><a href="#String-字符串对象" class="headerlink" title="String 字符串对象"></a>String 字符串对象</h2><p><strong>访问字符串对象的属性length:</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var mystr&#x3D;&quot;Hello World!&quot;;</span><br><span class="line">var myl&#x3D;mystr.length;</span><br></pre></td></tr></table></figure><p>使用 String 对象的 toUpperCase() 方法来将字符串小写字母转换为大写：</p><p>使用 String 对象的 toLowerCase() 方法来将字符串大写字母转换为小写：</p><h2 id="返回指定位置的字符"><a href="#返回指定位置的字符" class="headerlink" title="返回指定位置的字符"></a>返回指定位置的字符</h2><p>1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。</p><p>2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  var mystr&#x3D;&quot;I love JavaScript!&quot;</span><br><span class="line">  document.write(mystr.charAt(2));</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><div class="note info">            <p>info 注意: 一个空格也算一个字符。</p>          </div><h2 id="返回指定的字符串首次出现的位置"><a href="#返回指定的字符串首次出现的位置" class="headerlink" title="返回指定的字符串首次出现的位置"></a>返回指定的字符串首次出现的位置</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">stringObject.indexOf(substring, startpos)</span><br></pre></td></tr></table></figure><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/19/uLIrmds8BF1fGTY.png" alt=""></p><p><strong>说明</strong></p><p>1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。</p><p>2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。</p><p>3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。</p><p><strong>注意</strong></p><p>1.indexOf() 方法区分大小写。</p><p>2.如果要检索的字符串值没有出现，则该方法返回 -1。</p><p>例如：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  var str&#x3D;&quot;I love JavaScript!&quot;</span><br><span class="line">  document.write(str.indexOf(&quot;I&quot;) + &quot;&lt;br &#x2F;&gt;&quot;);</span><br><span class="line">  document.write(str.indexOf(&quot;v&quot;) + &quot;&lt;br &#x2F;&gt;&quot;);</span><br><span class="line">  document.write(str.indexOf(&quot;v&quot;,8));</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><p>以上结果：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">0</span><br><span class="line">4</span><br><span class="line">9</span><br></pre></td></tr></table></figure><h2 id="字符串分割split"><a href="#字符串分割split" class="headerlink" title="字符串分割split()"></a>字符串分割split()</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">stringObject.split(separator,limit)</span><br></pre></td></tr></table></figure><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/19/TdQKhIA5sLzjgVB.png" alt=""></p><p><strong>注意：</strong>如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。</p><p>举例：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var mystr &#x3D; &quot;www.imooc.com&quot;;</span><br><span class="line">document.write(mystr.split(&quot;.&quot;)+&quot;&lt;br&gt;&quot;);</span><br><span class="line">document.write(mystr.split(&quot;.&quot;, 2)+&quot;&lt;br&gt;&quot;);</span><br></pre></td></tr></table></figure><p><strong>运行结果:</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">www,imooc,com</span><br><span class="line">www,imooc</span><br></pre></td></tr></table></figure><h2 id="提取字符串substring"><a href="#提取字符串substring" class="headerlink" title="提取字符串substring()"></a>提取字符串substring()</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">stringObject.substring(startPos,stopPos)</span><br></pre></td></tr></table></figure><p>同理，stopPos不选的话返回的子串会一直到字符串对象的结尾。</p><p><strong>注意：</strong></p><ol><li><p>返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。</p></li><li><p>如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。</p></li><li><p>如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。</p></li><li><p>举例：</p></li></ol><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">  var mystr&#x3D;&quot;I love JavaScript&quot;;</span><br><span class="line">  document.write(mystr.substring(7));</span><br><span class="line">  document.write(mystr.substring(2,6));</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><p><strong>运行结果**</strong>:**</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">JavaScript</span><br><span class="line">love</span><br></pre></td></tr></table></figure><p>以上笔记来自于慕课网，白嫖的感觉是真好！加油</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;link rel=&quot;stylesheet&quot; class=&quot;aplayer-secondary-style-marker&quot; href=&quot;\blog\assets\css\APlayer.min.css&quot;&gt;&lt;script src=&quot;\blog\assets\js\APlayer.m
      
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/categories/JavaScript/"/>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript学习笔记（3）-循环和函数</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/04/18/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%883%EF%BC%89-%E5%BE%AA%E7%8E%AF%E5%92%8C%E5%87%BD%E6%95%B0/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/04/18/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%883%EF%BC%89-%E5%BE%AA%E7%8E%AF%E5%92%8C%E5%87%BD%E6%95%B0/</id>
    <published>2020-04-18T13:48:38.354Z</published>
    <updated>2020-04-18T14:13:01.652Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="循环"><a href="#循环" class="headerlink" title="循环"></a>循环</h1><h2 id="switch-语句"><a href="#switch-语句" class="headerlink" title="switch  语句"></a>switch  语句</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">switch(表达式)</span><br><span class="line">&#123;</span><br><span class="line">case值1:</span><br><span class="line">  执行代码块 1</span><br><span class="line">  break;</span><br><span class="line">case值2:</span><br><span class="line">  执行代码块 2</span><br><span class="line">  break;</span><br><span class="line">...</span><br><span class="line">case值n:</span><br><span class="line">  执行代码块 n</span><br><span class="line">  break;</span><br><span class="line">default:</span><br><span class="line">  与 case值1 、 case值2...case值n 不同时执行的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句  </span><br><span class="line">并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。</span><br></pre></td></tr></table></figure><div class="note default">            <p>default 这里只记录switch语句，其实都和c语言一样</p>          </div><h1 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h1><h2 id="定义一个函数"><a href="#定义一个函数" class="headerlink" title="定义一个函数"></a>定义一个函数</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function  函数名( )</span><br><span class="line">&#123;</span><br><span class="line">     函数体;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="函数的调用"><a href="#函数的调用" class="headerlink" title="函数的调用"></a>函数的调用</h2><p><strong>第一种情况:在标签内调用。</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"> &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">    function add2()</span><br><span class="line">    &#123;</span><br><span class="line">         sum &#x3D; 1 + 1;</span><br><span class="line">         alert(sum);</span><br><span class="line">    &#125;</span><br><span class="line">  add2();&#x2F;&#x2F;调用函数，直接写函数名。</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><p><strong>第二种情况:</strong>在HTML文件中调用，如通过点击按钮后调用定义好的函数。</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">   function add2()</span><br><span class="line">   &#123;</span><br><span class="line">         sum &#x3D; 5 + 6;</span><br><span class="line">         alert(sum);</span><br><span class="line">   &#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;form&gt;</span><br><span class="line">&lt;input type&#x3D;&quot;button&quot; value&#x3D;&quot;click it&quot; onclick&#x3D;&quot;add2()&quot;&gt;  &#x2F;&#x2F;按钮,onclick点击事件，直接写函数名</span><br><span class="line">&lt;&#x2F;form&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure><h2 id="带参数的函数"><a href="#带参数的函数" class="headerlink" title="带参数的函数"></a>带参数的函数</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">function 函数名(参数1,参数2)</span><br><span class="line">&#123;</span><br><span class="line">     函数代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="返回值的函数"><a href="#返回值的函数" class="headerlink" title="返回值的函数"></a>返回值的函数</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function add2(x,y)</span><br><span class="line">&#123;</span><br><span class="line">   sum &#x3D; x + y;</span><br><span class="line">   return sum; &#x2F;&#x2F;返回函数值,return后面的值叫做返回值。</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><div class="note info">            <p>info 注意:函数中参数和返回值不只是数字，还可以是字符串等其它类型。</p>          </div><p>以上笔记来自慕课网，很开心，又水了一篇博文。</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;link rel=&quot;stylesheet&quot; class=&quot;aplayer-secondary-style-marker&quot; href=&quot;\blog\assets\css\APlayer.min.css&quot;&gt;&lt;script src=&quot;\blog\assets\js\APlayer.m
      
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/categories/JavaScript/"/>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript学习笔记（2）-变量和数组</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/04/17/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%882%EF%BC%89-%E5%8F%98%E9%87%8F%E5%92%8C%E6%95%B0%E7%BB%84/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/04/17/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%882%EF%BC%89-%E5%8F%98%E9%87%8F%E5%92%8C%E6%95%B0%E7%BB%84/</id>
    <published>2020-04-17T13:37:15.687Z</published>
    <updated>2020-04-18T13:51:40.400Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="什么是变量"><a href="#什么是变量" class="headerlink" title="什么是变量"></a>什么是变量</h1><p>什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服、玩具、水果…等。</p><h2 id="变量名"><a href="#变量名" class="headerlink" title="变量名"></a>变量名</h2><p><strong>1.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字。</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">正确:           </span><br><span class="line">    mysum            </span><br><span class="line">    _mychar         </span><br><span class="line">    $numa1</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">错误:</span><br><span class="line">  6num  &#x2F;&#x2F;开头不能用数字</span><br><span class="line">  %sum &#x2F;&#x2F;开头不能用除(_ $)外特殊符号,如(%  + &#x2F;等)</span><br><span class="line">  sum+num &#x2F;&#x2F;开头中间不能使用除(_ $)外特殊符号，如(%  + &#x2F;等)</span><br></pre></td></tr></table></figure><p><strong><em>2.变量名区分大小写，B和b不是同一个变量</em></strong></p><p><strong>3.不允许使用JavaScript关键字和保留字做变量名**</strong></p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/17/XeVPgL8JhKaRs9y.png" alt=""></p><h2 id="amp-amp-并且"><a href="#amp-amp-并且" class="headerlink" title="&amp;&amp;并且"></a>&amp;&amp;并且</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">b&gt;a &amp;&amp; b&lt;c    &#x2F;&#x2F;“&amp;&amp;”是并且的意思, 读法&quot;b大于a&quot;并且&quot; b小于c &quot;</span><br></pre></td></tr></table></figure><p>“&amp;&amp;”是逻辑与操作符，只有“&amp;&amp;”两边值同时满足(同时为真)，整个表达式值才为真。</p><h2 id="逻辑-或者"><a href="#逻辑-或者" class="headerlink" title="||逻辑  或者"></a>||逻辑  或者</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var a&#x3D;3;</span><br><span class="line">var b&#x3D;5;</span><br><span class="line">var c;</span><br><span class="line">c&#x3D;b&gt;a ||a&gt;b;  &#x2F;&#x2F;b&gt;a是true，a&gt;b是false，c是true</span><br></pre></td></tr></table></figure><div class="note info">            <p>info 注意 ：如果A为真，A || B为真，不会在执行B; 反之，如果A为假，要由 B 的值来决定 A || B 的值。</p>          </div><h2 id="！逻辑非操作符"><a href="#！逻辑非操作符" class="headerlink" title="！逻辑非操作符"></a>！逻辑非操作符</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var a&#x3D;3;</span><br><span class="line">var b&#x3D;5;</span><br><span class="line">var c;</span><br><span class="line">c&#x3D;!(b&gt;a);  &#x2F;&#x2F; b&gt;a值是true,! (b&gt;a）值是false</span><br><span class="line">c&#x3D;!(b&lt;a);  &#x2F;&#x2F; b&lt;a值是false, ! (b&lt;a）值是true</span><br></pre></td></tr></table></figure><h2 id="操作符之间的优先级（高到低）"><a href="#操作符之间的优先级（高到低）" class="headerlink" title="操作符之间的优先级（高到低）"></a>操作符之间的优先级（高到低）</h2><p>算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号</p><h1 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h1><p><strong>创建数组语法：</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var myarray&#x3D;new Array();</span><br></pre></td></tr></table></figure><p>或</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var myarray&#x3D; new Array(8); &#x2F;&#x2F;创建数组，存储8个数据。</span><br></pre></td></tr></table></figure><p><strong>注意</strong></p><p>1.创建的新数组是空数组，没有值，如输出，则显示undefined。<br>2.虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存储在规定长度以外。</p><h2 id="数组赋值"><a href="#数组赋值" class="headerlink" title="数组赋值"></a>数组赋值</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var myarray&#x3D;new Array(); &#x2F;&#x2F;创建一个新的空数组</span><br><span class="line">myarray[0]&#x3D;66; &#x2F;&#x2F;存储第1个人的成绩</span><br><span class="line">myarray[1]&#x3D;80; &#x2F;&#x2F;存储第2个人的成绩</span><br><span class="line">myarray[2]&#x3D;90; &#x2F;&#x2F;存储第3个人的成绩</span><br><span class="line">myarray[3]&#x3D;77; &#x2F;&#x2F;存储第4个人的成绩</span><br><span class="line">myarray[4]&#x3D;59; &#x2F;&#x2F;存储第5个人的成绩</span><br></pre></td></tr></table></figure><p>第一种方法：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var myarray &#x3D; new Array(66,80,90,77,59);&#x2F;&#x2F;创建数组同时赋值</span><br></pre></td></tr></table></figure><p>第二种方法：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var myarray &#x3D; [66,80,90,77,59];&#x2F;&#x2F;直接输入一个数组（称 “字面量数组”）</span><br></pre></td></tr></table></figure><div class="note info">            <p>info 注意 ：数组存储的数据可以是任何类型（数字、字符、布尔值等）</p>          </div><h2 id="向数组添加一个新的元素"><a href="#向数组添加一个新的元素" class="headerlink" title="向数组添加一个新的元素"></a>向数组添加一个新的元素</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">myarray[5]&#x3D;88; &#x2F;&#x2F;使用一个新索引，为数组增加一个新元素</span><br></pre></td></tr></table></figure><h2 id="获取数组里的元素"><a href="#获取数组里的元素" class="headerlink" title="获取数组里的元素"></a>获取数组里的元素</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">myarray[0]     myarray[2]</span><br></pre></td></tr></table></figure><h2 id="数组属性length"><a href="#数组属性length" class="headerlink" title="数组属性length"></a>数组属性length</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">myarray.length; &#x2F;&#x2F;获得数组myarray的长度</span><br></pre></td></tr></table></figure><p><strong>注意：</strong>因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1。如数组的长度是5，数组的上下限分别是0和4</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var arr&#x3D;[55,32,5,90,60,98,76,54];&#x2F;&#x2F;包含8个数值的数组arr </span><br><span class="line">document.write(arr.length); &#x2F;&#x2F;显示数组长度8</span><br><span class="line">document.write(arr[7]); &#x2F;&#x2F;显示第8个元素的值54</span><br></pre></td></tr></table></figure><p>JS中数组的length属性是可变的</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.length&#x3D;10; &#x2F;&#x2F;增大数组的长度</span><br><span class="line">document.write(arr.length); &#x2F;&#x2F;数组长度已经变为10</span><br></pre></td></tr></table></figure><h2 id="二维数组"><a href="#二维数组" class="headerlink" title="二维数组"></a>二维数组</h2><p><strong>二维数组的定义方法一</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">var myarr&#x3D;new Array();  &#x2F;&#x2F;先声明一维 </span><br><span class="line">for(var i&#x3D;0;i&lt;2;i++)&#123;   &#x2F;&#x2F;一维长度为2</span><br><span class="line">   myarr[i]&#x3D;new Array();  &#x2F;&#x2F;再声明二维 </span><br><span class="line">   for(var j&#x3D;0;j&lt;3;j++)&#123;   &#x2F;&#x2F;二维长度为3</span><br><span class="line">   myarr[i][j]&#x3D;i+j;   &#x2F;&#x2F; 赋值，每个数组元素的值为i+j</span><br><span class="line">   &#125;</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><p><strong>二维数组的定义方法二</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var Myarr &#x3D; [[0 , 1 , 2 ],[1 , 2 , 3]]</span><br></pre></td></tr></table></figure><p>二维数组中左边表示<strong>行</strong>，右边表示<strong>列</strong></p><p>以上笔记来自慕课网，</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;link rel=&quot;stylesheet&quot; class=&quot;aplayer-secondary-style-marker&quot; href=&quot;\blog\assets\css\APlayer.min.css&quot;&gt;&lt;script src=&quot;\blog\assets\js\APlayer.m
      
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/categories/JavaScript/"/>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>JavaScript学习笔记（1）—网页互动操作</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/04/16/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%881%EF%BC%89-%E7%BD%91%E9%A1%B5%E4%BA%92%E5%8A%A8%E6%93%8D%E4%BD%9C/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/04/16/JavaScript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%881%EF%BC%89-%E7%BD%91%E9%A1%B5%E4%BA%92%E5%8A%A8%E6%93%8D%E4%BD%9C/</id>
    <published>2020-04-16T12:17:54.831Z</published>
    <updated>2020-05-02T12:57:32.771Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="JavaScript四种输出内容"><a href="#JavaScript四种输出内容" class="headerlink" title="JavaScript四种输出内容"></a>JavaScript四种输出内容</h1><h2 id="第一种-输出内容用””括起，直接输出””号内的内容。"><a href="#第一种-输出内容用””括起，直接输出””号内的内容。" class="headerlink" title="第一种: 输出内容用””括起，直接输出””号内的内容。"></a>第一种: 输出内容用””括起，直接输出””号内的内容。</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">  <span class="built_in">document</span>.write(<span class="string">"I love JavaScript！"</span>); <span class="comment">//内容用""括起来，""里的内容直接输出。</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="第二种-通过变量，输出内容"><a href="#第二种-通过变量，输出内容" class="headerlink" title="第二种: 通过变量，输出内容"></a>第二种: 通过变量，输出内容</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="keyword">var</span> mystr=<span class="string">"hello world!"</span>;</span></span><br><span class="line"><span class="javascript">  <span class="built_in">document</span>.write(mystr);  <span class="comment">//直接写变量名，输出变量存储的内容。</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="第三种-输出多项内容，内容之间用-号连接。"><a href="#第三种-输出多项内容，内容之间用-号连接。" class="headerlink" title="第三种: 输出多项内容，内容之间用 + 号连接。"></a>第三种: 输出多项内容，内容之间用 + 号连接。</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="keyword">var</span> mystr=<span class="string">"hello"</span>;</span></span><br><span class="line"><span class="javascript">  <span class="built_in">document</span>.write(mystr+<span class="string">"I love JavaScript"</span>); <span class="comment">//多项内容之间用+号连接</span></span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="第四种-输出HTML标签，并起作用，标签使用””括起来。"><a href="#第四种-输出HTML标签，并起作用，标签使用””括起来。" class="headerlink" title="第四种: 输出HTML标签，并起作用，标签使用””括起来。"></a>第四种: 输出<code>HTML</code>标签，并起作用，标签使用””括起来。</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="keyword">var</span> mystr=<span class="string">"hello"</span>;</span></span><br><span class="line"><span class="javascript"><span class="built_in">document</span>.write(mystr+<span class="string">"&lt;br&gt;"</span>);<span class="comment">//输出hello后，输出一个换行符</span></span></span><br><span class="line"><span class="javascript">  <span class="built_in">document</span>.write(<span class="string">"JavaScript"</span>);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h1 id="aler消息对话框"><a href="#aler消息对话框" class="headerlink" title="aler消息对话框"></a>aler消息对话框</h1><p><strong>语法</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">alert(字符量或变量);</span><br></pre></td></tr></table></figure><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">   <span class="keyword">var</span> mynum = <span class="number">30</span>;</span></span><br><span class="line"><span class="actionscript">   alert(<span class="string">"hello!"</span>);</span></span><br><span class="line">   alert(mynum);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><div class="note info">            <p>info alert弹出消息对话框（只包含一个确定按钮）</p>          </div><h1 id="confirm-消息对话框"><a href="#confirm-消息对话框" class="headerlink" title="confirm 消息对话框"></a>confirm 消息对话框</h1><p><strong>语法</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">confirm(str);</span><br></pre></td></tr></table></figure><p><strong>参数说明</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">str：在消息对话框中要显示的文本</span><br><span class="line">返回值: Boolean值</span><br></pre></td></tr></table></figure><p><strong>返回值</strong></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">当用户点击"确定"按钮时，返回true</span><br><span class="line">当用户点击"取消"按钮时，返回false</span><br></pre></td></tr></table></figure><p><strong>举例</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;</span><br><span class="line">    var mymessage&#x3D;confirm(&quot;你喜欢JavaScript吗?&quot;);</span><br><span class="line">    if(mymessage&#x3D;&#x3D;true)</span><br><span class="line">    &#123;   document.write(&quot;很好,加油!&quot;);   &#125;</span><br><span class="line">    else</span><br><span class="line">    &#123;  document.write(&quot;JS功能强大，要学习噢!&quot;);   &#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><h1 id="prompt消息对话框"><a href="#prompt消息对话框" class="headerlink" title="prompt消息对话框"></a>prompt消息对话框</h1><p><strong>语法</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">prompt(str1, str2);</span><br></pre></td></tr></table></figure><p><strong>参数说明</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">str1: 要显示在消息对话框中的文本，不可修改</span><br><span class="line">str2：文本框中的内容，可以修改</span><br></pre></td></tr></table></figure><p><strong>返回值</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">1. 点击确定按钮，文本框中的内容将作为函数返回值</span><br><span class="line">2. 点击取消按钮，将返回null</span><br></pre></td></tr></table></figure><p><strong>举例</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var myname&#x3D;prompt(&quot;请输入你的姓名:&quot;);</span><br><span class="line">if(myname!&#x3D;null)</span><br><span class="line">  &#123;   alert(&quot;你好&quot;+myname); &#125;</span><br><span class="line">else</span><br><span class="line">  &#123;  alert(&quot;你好 my friend.&quot;);  &#125;</span><br></pre></td></tr></table></figure><h1 id="JavaScript-打开新窗口（window-open）"><a href="#JavaScript-打开新窗口（window-open）" class="headerlink" title="JavaScript-打开新窗口（window.open）"></a>JavaScript-打开新窗口（window.open）</h1><p><strong>语法</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.open([URL], [窗口名称], [参数字符串])</span><br></pre></td></tr></table></figure><p><strong>参数说明</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。</span><br><span class="line">窗口名称：可选参数，被打开窗口的名称。</span><br><span class="line">    1.该名称由字母、数字和下划线字符组成。</span><br><span class="line">    2.&quot;_top&quot;、&quot;_blank&quot;、&quot;_self&quot;具有特殊意义的名称。</span><br><span class="line">       _blank：在新窗口显示目标网页</span><br><span class="line">       _self：在当前窗口显示目标网页</span><br><span class="line">       _top：框架网页中在上部窗口中显示目标网页</span><br><span class="line">    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。</span><br><span class="line">   4.name 不能包含有空格。</span><br><span class="line">参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。</span><br></pre></td></tr></table></figure><p><strong>参数表</strong></p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/16/synKYwEFjMu3Tc7.jpg" alt=""></p><p><strong>举例</strong></p><p>例如:打开<a href="http://www.imooc.com网站，大小为300px" target="_blank" rel="noopener">http://www.imooc.com网站，大小为300px</a> * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt; window.open(&#39;http:&#x2F;&#x2F;www.imooc.com&#39;,&#39;_blank&#39;,&#39;width&#x3D;300,height&#x3D;200,menubar&#x3D;no,toolbar&#x3D;no, status&#x3D;no,scrollbars&#x3D;yes&#39;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure><h1 id="JavaScript关闭窗口（window-close"><a href="#JavaScript关闭窗口（window-close" class="headerlink" title="JavaScript关闭窗口（window.close)"></a>JavaScript关闭窗口（window.close)</h1><p><strong>语法</strong></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">window.close();   &#x2F;&#x2F;关闭本窗口</span><br></pre></td></tr></table></figure><p>或者</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;窗口对象&gt;.close();   &#x2F;&#x2F;关闭指定的窗口</span><br></pre></td></tr></table></figure><p>以上是mooc初学JavaScript的笔记，大部分来自慕课网，也可以说全部吧！</p>]]></content>
    
    <summary type="html">
    
      
      
        &lt;link rel=&quot;stylesheet&quot; class=&quot;aplayer-secondary-style-marker&quot; href=&quot;\blog\assets\css\APlayer.min.css&quot;&gt;&lt;script src=&quot;\blog\assets\js\APlayer.m
      
    
    </summary>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/categories/JavaScript/"/>
    
    
      <category term="JavaScript" scheme="https://gitee.com/hkjjsgdd/blog/tags/JavaScript/"/>
    
  </entry>
  
  <entry>
    <title>hexo+gitee搭建个人博客</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/04/15/hexo+gitee%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/04/15/hexo+gitee%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/</id>
    <published>2020-04-15T12:37:08.248Z</published>
    <updated>2020-04-17T06:51:12.807Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><h1 id="首先你需要下载node-js"><a href="#首先你需要下载node-js" class="headerlink" title="首先你需要下载node.js"></a>首先你需要下载node.js</h1><p><a href="http://nodejs.org/download/" target="_blank" rel="noopener">node.js</a></p><h1 id="下载并安装git"><a href="#下载并安装git" class="headerlink" title="下载并安装git"></a>下载并安装git</h1><p><a href="https://git-scm.com/download/win" target="_blank" rel="noopener">git</a></p><h1 id="搭建hexo"><a href="#搭建hexo" class="headerlink" title="搭建hexo"></a>搭建hexo</h1><h2 id="创建一个空文件夹储存博客文件"><a href="#创建一个空文件夹储存博客文件" class="headerlink" title="创建一个空文件夹储存博客文件"></a>创建一个空文件夹储存博客文件</h2><p>1 首先创建一个文件夹来装你blog的东西，文件名随意，</p><h2 id="安装hexo"><a href="#安装hexo" class="headerlink" title="安装hexo"></a>安装hexo</h2><p>在gitbash 输入</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo -g</span><br></pre></td></tr></table></figure><h2 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h2><p>在新建的文件里鼠标右键，点击gitbash，在命令行里输入</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br></pre></td></tr></table></figure><h1 id="生成网站"><a href="#生成网站" class="headerlink" title="生成网站"></a>生成网站</h1><p>在 gitbash命令行里输入</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br></pre></td></tr></table></figure><p>或者</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo generate</span><br></pre></td></tr></table></figure><p>之后输入</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure><p>此时</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/BJehan2d15ZmTQl.png" alt=""></p><p>将上面生成的网址复制下来，到浏览器打开，便可在本地浏览你建的博客了，</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/1vRAF87id4EaHIx.png" alt=""></p><p>由于刚开始官方给的主题是landscape，所以就呈现上面的样子</p><h1 id="配置ssh"><a href="#配置ssh" class="headerlink" title="配置ssh"></a>配置ssh</h1><h2 id="查看本地是否有公钥"><a href="#查看本地是否有公钥" class="headerlink" title="查看本地是否有公钥"></a>查看本地是否有公钥</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat ~&#x2F;.ssh&#x2F;id_rsa.pub</span><br></pre></td></tr></table></figure><h3 id="出现下列情况则本地无公钥"><a href="#出现下列情况则本地无公钥" class="headerlink" title="出现下列情况则本地无公钥"></a>出现下列情况则本地无公钥</h3><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/8itcwP2Wv6LsKyH.png" alt=""></p><h3 id="若出现下列情况则本地有公钥"><a href="#若出现下列情况则本地有公钥" class="headerlink" title="若出现下列情况则本地有公钥"></a>若出现下列情况则本地有公钥</h3><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/HG3UXME6LIpRw7C.png" alt=""></p><p>并将上面的密钥复制下来，用记事本先保存下来</p><div class="note primary no-icon">            <p>一定要将 ssh-rsa  一并复制下来</p>          </div><h2 id="若无密钥-，执行下列命令生成密钥"><a href="#若无密钥-，执行下列命令生成密钥" class="headerlink" title="若无密钥 ，执行下列命令生成密钥"></a>若无密钥 ，执行下列命令生成密钥</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C &quot;&quot;</span><br></pre></td></tr></table></figure><p>默认一直Enter</p><h1 id="部署到Gitee上"><a href="#部署到Gitee上" class="headerlink" title="部署到Gitee上"></a>部署到Gitee上</h1><h2 id="创建gitee账号"><a href="#创建gitee账号" class="headerlink" title="创建gitee账号"></a>创建gitee账号</h2><p><a href="https://gitee.com/">码云</a></p><div class="note default">            <p>因为gitee 是国内版本，相比于Github，我推荐使用gitee</p>          </div><h2 id="新建仓库"><a href="#新建仓库" class="headerlink" title="新建仓库"></a>新建仓库</h2><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/8dVwT5hF91uMozn.png" alt=""></p><div class="note primary no-icon">            <p>仓库名字建议和自己注册码云的名字一样，这样别人访问你的博客时不会访问二级目录</p>          </div><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/iAoyYlaHht7OExM.png" alt=""></p><p>复制仓库地址：</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/vnqorIuAfZ6YGLt.png" alt=""></p><h1 id="配置根目录-config-yml"><a href="#配置根目录-config-yml" class="headerlink" title="配置根目录_config.yml"></a>配置根目录_config.yml</h1><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/7uGtHkac1SbyBFx.png" alt=""></p><p>将上面的<code>repo</code>换成刚才你复制的仓库地址就行了</p><div class="note warning">            <p>一定要注意冒号后面要有空格，不然会报错，这是Yml的写法</p>          </div><h1 id="将本地和远程仓库通过ssh连接"><a href="#将本地和远程仓库通过ssh连接" class="headerlink" title="将本地和远程仓库通过ssh连接"></a>将本地和远程仓库通过ssh连接</h1><p>找到刚才新建的仓库，添加公钥</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/ioCH21XE5FGBaMs.png" alt=""></p><h1 id="发布到Gitee以及Gitee-Pages设置"><a href="#发布到Gitee以及Gitee-Pages设置" class="headerlink" title="发布到Gitee以及Gitee Pages设置"></a>发布到Gitee以及Gitee Pages设置</h1><h2 id="安装自动部署工具"><a href="#安装自动部署工具" class="headerlink" title="安装自动部署工具"></a>安装自动部署工具</h2><p>在博客文件夹打开命令行</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><p>安装完后</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br></pre></td></tr></table></figure><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g -d</span><br></pre></td></tr></table></figure><p>如果你是第一次发布，则输入输入你在码云上注册的账号和密码</p><h2 id="Gitee-Pages设置"><a href="#Gitee-Pages设置" class="headerlink" title="Gitee Pages设置"></a>Gitee Pages设置</h2><ul><li><input disabled="" type="checkbox"> <img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/ioCH21XE5FGBaMs.png" alt=""></li></ul><p>点击上面的服务，会出现Gitee Pages，点击</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/xq3d9lPORg8kfpB.png" alt=""></p><p>首次更新按钮是启动，启动之后上面会生成你的网址，点击即可登录你的博客网站</p><p>最后在博客根目录下配置</p><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/15/QL3b7g1pPJM8sdC.png" alt=""></p><h1 id="配置好后开启你的博客之旅吧"><a href="#配置好后开启你的博客之旅吧" class="headerlink" title="配置好后开启你的博客之旅吧"></a>配置好后开启你的博客之旅吧</h1><h2 id="新建一篇文章"><a href="#新建一篇文章" class="headerlink" title="新建一篇文章"></a>新建一篇文章</h2><p>可以直接在命令行里输入</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new &quot;文章名&quot;</span><br></pre></td></tr></table></figure><p>之后 </p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo clean      </span><br><span class="line">hexo g -d</span><br></pre></td></tr></table></figure><p>即可</p><h1 id="主题修改"><a href="#主题修改" class="headerlink" title="主题修改"></a>主题修改</h1><p><a href="https://hexo.io/themes/" target="_blank" rel="noopener">hexo 主题</a></p><p>里面有大量的主题可供挑选，我的主题<a href="https://jerryc.me/" target="_blank" rel="noopener">Butterfly</a>,好看，细节很多</p>]]></content>
    
    <summary type="html">
    
      此文章给新手小白搭建个人博客观看，大佬可以忽略
    
    </summary>
    
    
      <category term="搭建博客" scheme="https://gitee.com/hkjjsgdd/blog/categories/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/"/>
    
    
      <category term="Gitee" scheme="https://gitee.com/hkjjsgdd/blog/tags/Gitee/"/>
    
  </entry>
  
  <entry>
    <title>测试文章</title>
    <link href="https://gitee.com/hkjjsgdd/blog/2020/04/14/%E6%B5%8B%E8%AF%95%E6%96%87%E7%AB%A0/"/>
    <id>https://gitee.com/hkjjsgdd/blog/2020/04/14/%E6%B5%8B%E8%AF%95%E6%96%87%E7%AB%A0/</id>
    <published>2020-04-13T16:00:00.000Z</published>
    <updated>2020-05-23T05:27:37.395Z</updated>
    
    <content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\blog\assets\css\APlayer.min.css"><script src="\blog\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><script class="meting-secondary-script-marker" src="\blog\assets\js\Meting.min.js"></script><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">code_word_wrap:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>    <div id="aplayer-TBpwgfPi" class="aplayer aplayer-tag-marker meting-tag-marker"         data-id="29732992" data-server="netease" data-type="song" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#555"    ></div><div class="note default">            <p>default 此文章为测试作用，详情可看大佬的主题文档<a href="https://jerryc.me/posts/21cfbf15/" target="_blank" rel="noopener">博客安装文档</a>    <a href="https://jerryc.me/posts/198a4240/" target="_blank" rel="noopener">主题更新日志</a></p>          </div><div class="note success">            <p>success 提示塊標籤</p>          </div><div class="note info">            <p>info 提示塊標籤</p>          </div><div class="note warning">            <p>warning 提示塊標籤</p>          </div><div class="note danger">            <p>danger 提示塊標籤</p>          </div><div class="gallery-group-main">  <figure class="gallery-group">  <img class="gallery-group-img" src= "/blog/img/loading.gif" data-src='https://i.loli.net/2020/04/11/KjonqcYLvTedgGy.jpg'>  <figcaption>  <div class="gallery-group-name">动漫壁纸</div>  <p>收藏的一些壁纸</p>  <a href='/blog/Gallery/bizhi'></a>  </figcaption>  </figure>  </div><div class="hide-block"><button class="hide-button button--animated" style="">查看答案    </button><span class="hide-content"><div class="justified-gallery"><p><img src= "/blog/img/loading.gif" data-src="https://i.loli.net/2020/04/11/wpWFtJxC3c1qH26.jpg" alt="你的名字壁纸.jpg"></p>          </div></span></div><p>更新博客首页音乐</p><ul><li>去网易云官网，生成音乐外链</li><li>然后我们复制一份butterfly/layout/includes/widget文件夹里面的<code>card_announcement.pug</code>文件，改名为<code>card_music.pug</code>，把里面改成以下内容</li></ul><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.card-widget.music</span><br><span class="line">  .card-content</span><br><span class="line">    .item-headline</span><br><span class="line">      i.fa.fa-music(aria-hidden&#x3D;&quot;true&quot;)</span><br><span class="line">      span&#x3D; _p(&#39;Music&#39;)</span><br><span class="line">      |</span><br></pre></td></tr></table></figure><p>| 后面添加在网易云官网生成的外链，</p><p>最后在widget/index.pug,添加以下代码在你想要的位置</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">if theme.aside.card_music</span><br><span class="line">include .&#x2F;card_music.pug</span><br></pre></td></tr></table></figure><p>最后在主题的yml文件，添加</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">card_music: true</span><br></pre></td></tr></table></figure><p>以上方法来自<a href="https://bili33.top/2020/03/19/butterfly-customize/" target="_blank" rel="noopener">https://bili33.top/2020/03/19/butterfly-customize/</a></p>]]></content>
    
    <summary type="html">
    
      此文章为各种测试
    
    </summary>
    
    
      <category term="ceshi" scheme="https://gitee.com/hkjjsgdd/blog/categories/ceshi/"/>
    
    
      <category term="ceshi" scheme="https://gitee.com/hkjjsgdd/blog/tags/ceshi/"/>
    
  </entry>
  
</feed>