Repository navigation
Expand file tree
/
Copy pathsome-javascript-problems.html
More file actions
1 lines (1 loc) · 25.4 KB
/
Copy pathsome-javascript-problems.html
File metadata and controls
1 lines (1 loc) · 25.4 KB
1
<!DOCTYPE html><html lang="zh-CN"><head><meta name="generator" content="Hexo 3.9.0"><meta charset="utf-8"><title>整理一些js中常见的问题 | Winter`s Notes</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><link rel="canonical" href="https://summerandwinter.github.io/some-javascript-problems.html"><meta name="description" content="做项目的时候,我们常常会用到一些常用的JS来处理数组,字符串,还有表单元素,如(checkbox,select等)。对于没有系统学习过JS的人来说,这些知识点既熟悉又陌生。记得自己以前用过,可是又记不清楚到底怎么用的,或者会混淆。这里整理一些自己经常会用到的一些知识点,不完善,以后慢慢再加,也不是晦涩的技术难题,只是mark一下,希望能对大家有帮助。"><meta name="keywords" content="JavaScript,Array,Checkbox,Select,String"><meta property="og:type" content="article"><meta property="og:title" content="整理一些js中常见的问题"><meta property="og:url" content="https://summerandwinter.github.io/some-javascript-problems.html"><meta property="og:site_name" content="Winter`s Notes"><meta property="og:description" content="做项目的时候,我们常常会用到一些常用的JS来处理数组,字符串,还有表单元素,如(checkbox,select等)。对于没有系统学习过JS的人来说,这些知识点既熟悉又陌生。记得自己以前用过,可是又记不清楚到底怎么用的,或者会混淆。这里整理一些自己经常会用到的一些知识点,不完善,以后慢慢再加,也不是晦涩的技术难题,只是mark一下,希望能对大家有帮助。"><meta property="og:locale" content="zh-CN"><meta property="og:updated_time" content="2019-11-28T08:58:49.415Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="整理一些js中常见的问题"><meta name="twitter:description" content="做项目的时候,我们常常会用到一些常用的JS来处理数组,字符串,还有表单元素,如(checkbox,select等)。对于没有系统学习过JS的人来说,这些知识点既熟悉又陌生。记得自己以前用过,可是又记不清楚到底怎么用的,或者会混淆。这里整理一些自己经常会用到的一些知识点,不完善,以后慢慢再加,也不是晦涩的技术难题,只是mark一下,希望能对大家有帮助。"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/summerandwinter/summerandwinter.github.io/css/gitment.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/summerandwinter/summerandwinter.github.io/css/article.css"></head></html><body><div id="container"><div id="wrap"><header id="header" class="header"><nav id="main-nav" class="main-nav"> <a class="main-nav-link" href="/">主页</a> <a class="main-nav-link" href="/archives">归档</a> <a class="main-nav-link" href="/category">分类</a> <a class="main-nav-link" href="/tag">标签</a></nav><nav id="sub-nav"></nav></header><div class="outer"><section id="main"><div class="article-container"><article id="post-some-javascript-problems" class="article article-type-post" itemscope itemprop="blogPost"><div class="article-inner"><header class="article-header"><h1 class="article-title" itemprop="name"> 整理一些js中常见的问题</h1></header><div class="article-entry typo" itemprop="articleBody"><p>做项目的时候,我们常常会用到一些常用的JS来处理数组,字符串,还有表单元素,如(checkbox,select等)。对于没有系统学习过JS的人来说,这些知识点既熟悉又陌生。记得自己以前用过,可是又记不清楚到底怎么用的,或者会混淆。这里整理一些自己经常会用到的一些知识点,不完善,以后慢慢再加,也不是晦涩的技术难题,只是mark一下,希望能对大家有帮助。<br><a id="more"></a></p><h1 id="js获取select标签选中的值"><a href="#js获取select标签选中的值" class="headerlink" title="js获取select标签选中的值"></a>js获取select标签选中的值</h1><p>原生js</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = <span class="built_in">document</span>.getElementByIdx_x(”testSelect”); <span class="comment">//定位id </span></span><br><span class="line"><span class="keyword">var</span> index = obj.selectedIndex; <span class="comment">// 选中索引 </span></span><br><span class="line"><span class="keyword">var</span> text = obj.options[index].text; <span class="comment">// 选中文本 </span></span><br><span class="line"><span class="keyword">var</span> value = obj.options[index].value; <span class="comment">// 选中值</span></span><br></pre></td></tr></table></figure><p>jQuery</p><h2 id="第一种方式"><a href="#第一种方式" class="headerlink" title="第一种方式"></a>第一种方式</h2><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="string">'#testSelect option:selected'</span>).text();<span class="comment">//选中的文本 </span></span><br><span class="line">$(<span class="string">'#testSelect option:selected'</span>) .val();<span class="comment">//选中的值 </span></span><br><span class="line">$(<span class="string">"#testSelect "</span>).get(<span class="number">0</span>).selectedIndex;<span class="comment">//索引</span></span><br></pre></td></tr></table></figure><p>第二种方式</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"#tesetSelect"</span>).find(<span class="string">"option:selected"</span>).text();<span class="comment">//选中的文本 </span></span><br><span class="line">…….val(); </span><br><span class="line">…….get(<span class="number">0</span>).selectedIndex;</span><br></pre></td></tr></table></figure><h1 id="Aarry常用操作"><a href="#Aarry常用操作" class="headerlink" title="Aarry常用操作"></a>Aarry常用操作</h1><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>(); </span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">"aaa"</span>; </span><br><span class="line">arr[<span class="number">1</span>] = <span class="string">"bbb"</span>; </span><br><span class="line">arr[<span class="number">2</span>] = <span class="string">"ccc"</span>; </span><br><span class="line"><span class="comment">//alert(arr.length);//3 </span></span><br><span class="line">arr.pop(); </span><br><span class="line"><span class="comment">//alert(arr.length);//2 </span></span><br><span class="line"><span class="comment">//alert(arr[arr.length-1]);//bbb </span></span><br><span class="line">arr.pop(); </span><br><span class="line"><span class="comment">//alert(arr[arr.length-1]);//aaa </span></span><br><span class="line"><span class="comment">//alert(arr.length);//1 </span></span><br><span class="line"> </span><br><span class="line"><span class="keyword">var</span> arr2 = <span class="keyword">new</span> <span class="built_in">Array</span>(); </span><br><span class="line"><span class="comment">//alert(arr2.length);//0 </span></span><br><span class="line">arr2[<span class="number">0</span>] = <span class="string">"aaa"</span>; </span><br><span class="line">arr2[<span class="number">1</span>] = <span class="string">"bbb"</span>; </span><br><span class="line"><span class="comment">//alert(arr2.length);//2 </span></span><br><span class="line">arr2.pop(); </span><br><span class="line"><span class="comment">//alert(arr2.length);//1 </span></span><br><span class="line">arr2 = arr2.slice(<span class="number">0</span>,arr2.length<span class="number">-1</span>); </span><br><span class="line"><span class="comment">//alert(arr2.length);//0 </span></span><br><span class="line">arr2[<span class="number">0</span>] = <span class="string">"aaa"</span>; </span><br><span class="line">arr2[<span class="number">1</span>] = <span class="string">"bbb"</span>; </span><br><span class="line">arr2[<span class="number">2</span>] = <span class="string">"ccc"</span>; </span><br><span class="line">arr2 = arr2.slice(<span class="number">0</span>,<span class="number">1</span>); </span><br><span class="line">alert(arr2.length);<span class="comment">//1 </span></span><br><span class="line">alert(arr2[<span class="number">0</span>]);<span class="comment">//aaa </span></span><br><span class="line">alert(arr2[<span class="number">1</span>]);<span class="comment">//undefined</span></span><br></pre></td></tr></table></figure><p>shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.shift(); <span class="comment">//a:[2,3,4,5] b:1 </span></span><br><span class="line">unshift:将参数添加到原数组开头,并返回数组的长度</span><br></pre></td></tr></table></figure><p>注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7,所以这个方法的返回值不可靠,需要用返回值时可用splice代替本方法来使用。</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.unshift(<span class="number">-2</span>,<span class="number">-1</span>); <span class="comment">//a:[-2,-1,1,2,3,4,5] b:7</span></span><br></pre></td></tr></table></figure><p>pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.pop(); <span class="comment">//a:[1,2,3,4] b:5//不用返回的话直接调用就可以了 </span></span><br><span class="line">push:将参数添加到原数组末尾,并返回数组的长度</span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line"><span class="keyword">var</span> b = a.push(<span class="number">6</span>,<span class="number">7</span>); <span class="comment">//a:[1,2,3,4,5,6,7] b:7</span></span><br></pre></td></tr></table></figure><p>concat:返回一个新数组,是将参数添加到原数组中构成的</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.concat(<span class="number">6</span>,<span class="number">7</span>); <span class="comment">//a:[1,2,3,4,5] b:[1,2,3,4,5,6,7] </span></span><br><span class="line">splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,...</span><br></pre></td></tr></table></figure><p>在清空数组时,只需传递startIndex。</p><p>如果不删除所有元素,再传递deleteCount参数。</p><p>splice还具有先删除后添加的功能,即先删除几个元素,然后在删除的位置再添加若干元素,删除与添加的元素的个数没有必须相等,这时侯deleteCount也是要用到的。</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.splice(<span class="number">2</span>,<span class="number">2</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>); <span class="comment">//a:[1,2,7,8,9,5] b:[3,4] </span></span><br><span class="line"><span class="keyword">var</span> b = a.splice(<span class="number">0</span>,<span class="number">1</span>); <span class="comment">//同shift </span></span><br><span class="line">a.splice(<span class="number">0</span>,<span class="number">0</span>,<span class="number">-2</span>,<span class="number">-1</span>); <span class="keyword">var</span> b = a.length;<span class="comment">//同unshift </span></span><br><span class="line"><span class="keyword">var</span> b = a.splice(a.length<span class="number">-1</span>,<span class="number">1</span>);<span class="comment">//同pop </span></span><br><span class="line">a.splice(a.length,<span class="number">0</span>,<span class="number">6</span>,<span class="number">7</span>); <span class="keyword">var</span> b = a.length; <span class="comment">//同push</span></span><br></pre></td></tr></table></figure><p>reverse:将数组反序</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.reverse(); <span class="comment">//a:[5,4,3,2,1] b:[5,4,3,2,1]</span></span><br></pre></td></tr></table></figure><p>sort(orderfunction):按指定的参数对数组进行排序</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.sort(); <span class="comment">//a:[1,2,3,4,5] b:[1,2,3,4,5]</span></span><br></pre></td></tr></table></figure><p>slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.slice(<span class="number">2</span>,<span class="number">5</span>); <span class="comment">//a:[1,2,3,4,5] b:[3,4,5]</span></span><br></pre></td></tr></table></figure><p>JS中split用法</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">spli</span>(<span class="params"></span>)</span>{ </span><br><span class="line"> datastr=<span class="string">"2,2,3,5,6,6"</span>; </span><br><span class="line"> <span class="keyword">var</span> str= <span class="keyword">new</span> <span class="built_in">Array</span>(); </span><br><span class="line"> </span><br><span class="line"> str=datastr.split(<span class="string">","</span>); </span><br><span class="line"> <span class="keyword">for</span> (i=<span class="number">0</span>;i<str.length ;i++ ) </span><br><span class="line"> { </span><br><span class="line"> <span class="built_in">document</span>.write(str[i]+<span class="string">"<br/>"</span>); </span><br><span class="line"> } </span><br><span class="line">} </span><br><span class="line">spli(); </span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string">join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="keyword">var</span> a = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]; </span><br><span class="line"><span class="keyword">var</span> b = a.join(<span class="string">"|"</span>); <span class="comment">//a:[1,2,3,4,5] b:"1|2|3|4|5"</span></span><br></pre></td></tr></table></figure><p>再给个利用数组模拟javaStringBuffer处理字符串的方法:</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment">* 字符串处理函数 </span></span><br><span class="line"><span class="comment">*/</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">StringBuffer</span>(<span class="params"></span>) </span>{ </span><br><span class="line"><span class="keyword">var</span> arr = <span class="keyword">new</span> <span class="built_in">Array</span>; </span><br><span class="line"><span class="keyword">this</span>.append = <span class="function"><span class="keyword">function</span>(<span class="params">str</span>) </span>{ </span><br><span class="line">arr[arr.length] = str; </span><br><span class="line">}; </span><br><span class="line"> </span><br><span class="line"><span class="keyword">this</span>.toString = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>{ </span><br><span class="line"><span class="keyword">return</span> arr.join(<span class="string">""</span>);<span class="comment">//把append进来的数组ping成一个字符串 </span></span><br><span class="line">}; </span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>今天在应用中突然发现join是一种把数组转换成字符串的好方法,故封装成对象使用了:</p><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment">*把数组转换成特定符号分割的字符串 </span></span><br><span class="line"><span class="comment">*/</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">arrayToString</span>(<span class="params">arr,separator</span>) </span>{ </span><br><span class="line"><span class="keyword">if</span>(!separator) separator = <span class="string">""</span>;<span class="comment">//separator为null则默认为空 </span></span><br><span class="line"><span class="keyword">return</span> arr.join(separator); </span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** </span></span><br><span class="line"><span class="comment">* 查找数组包含的字符串 </span></span><br><span class="line"><span class="comment">*/</span> </span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">arrayFindString</span>(<span class="params">arr,string</span>) </span>{ </span><br><span class="line"><span class="keyword">var</span> str = arr.join(<span class="string">""</span>); </span><br><span class="line"><span class="keyword">return</span> str.indexOf(string); </span><br><span class="line">} </span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string"># checkbox操作</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">exportExcel</span>(<span class="params"></span>) </span></span><br><span class="line"><span class="function"></span>{ </span><br><span class="line"> <span class="keyword">var</span> para = <span class="string">""</span> </span><br><span class="line"> <span class="keyword">var</span> ids=<span class="built_in">document</span>.getElementsByName(<span class="string">"ids"</span>); </span><br><span class="line"> <span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>;i<ids.length;i++ ){ </span><br><span class="line"> <span class="keyword">if</span>(ids[i].checked){ <span class="comment">//判断复选框是否选中 </span></span><br><span class="line"> para=para+ids[i].value+<span class="string">","</span>; </span><br><span class="line"> } </span><br><span class="line"> } </span><br><span class="line"> url = <span class="string">'/detect/export_excel/?ids='</span>+para </span><br><span class="line"> <span class="built_in">window</span>.open(url) </span><br><span class="line">} </span><br><span class="line"><span class="string">``</span><span class="string">` </span></span><br><span class="line"><span class="string"># js处理表单</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">'form'</span>).action=path; </span><br><span class="line"><span class="built_in">document</span>.getElementById.submit();</span><br></pre></td></tr></table></figure><div class="end-of-file">END</div></div><footer class="article-footer"><ul class="article-meta"><li> <span class="label">发布:</span> <a href="/some-javascript-problems.html" class="article-date"><time datetime="2013-10-21T08:21:54.000Z" itemprop="datePublished">2013-10-21</time></a></li><li> <span class="label">分类:</span><div class="article-category"> <a class="article-category-link" href="/category/JavaScript/">JavaScript</a></div></li><li> <span class="label">标签:</span><ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tag/Array/">Array</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tag/Checkbox/">Checkbox</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tag/JavaScript/">JavaScript</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tag/Select/">Select</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tag/String/">String</a></li></ul></li><hr></ul></footer></div><nav id="article-nav" class="article-nav"> <a href="/create-magic-ascii-picture-by-javascript.html" id="article-nav-newer" class="article-nav-link-wrap newer"><strong class="article-nav-caption">上一篇</strong><div class="article-nav-title"> 通过JavaScript把图片转化为字符画</div></a> <a href="/a-html5-love-theme2.html" id="article-nav-older" class="article-nav-link-wrap older"><strong class="article-nav-caption">下一篇</strong><div class="article-nav-title">基于HTML5的爱情主题网站–表白神器(第二版)</div></a></nav></article><aside id="article-toc" role="navigation" class="article-toc"><div id="article-toc-inner"> <strong class="sidebar-title">目录</strong><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#js获取select标签选中的值"><span class="toc-text">js获取select标签选中的值</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#第一种方式"><span class="toc-text">第一种方式</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Aarry常用操作"><span class="toc-text">Aarry常用操作</span></a></li></ol> <a href="#" id="article-toc-top">回到顶部</a></div></aside><section id="gitment_ccomments" class="comments"><div id="gitment_container"></div></section></div></section></div><footer id="footer" class="post-footer footer"><div id="footerContent" class="footer-content"><div class="end-of-file">Live Happy Love Hard</div></div></footer></div><script src="//cdn.jsdelivr.net/gh/summerandwinter/summerandwinter.github.io/js/gitment.js"></script><script>var date="Mon Oct 21 2013 08:21:54 GMT+0000",id=""+new Date(date).getTime(),gitment=new Gitment({id:id,owner:"summerandwinter",repo:"summerandwinter.github.io",oauth:{client_id:"7b432b7b46e71966fd88",client_secret:"2c697bec7b012bca975de41c87863d84086f8d81"}});gitment.render("gitment_container")</script><script src="//cdn.jsdelivr.net/gh/summerandwinter/summerandwinter.github.io/js/summer.js"></script><!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script><![endif]--></div></body>