JavaScript常用編程問題記錄

来源:http://www.cnblogs.com/solodancer/archive/2017/12/19/8068006.html
-Advertisement-
Play Games

個人筆記，學習JavaScript以來積累的一些常遇問題的方法和總結 不斷更新中... 轉載需註明 不引入第三個變數，調換兩個數的值 熟悉了這樣的寫法，可以少聲明一個變數 x=10;y=8; //法一： x=x y；//x=2,y=8 y=y+x；//y=10,x=2 x=y x；//x=8,y=1 ...


個人筆記，學習JavaScript以來積累的一些常遇問題的方法和總結

不斷更新中...

轉載需註明

不引入第三個變數，調換兩個數的值

熟悉了這樣的寫法，可以少聲明一個變數

   x=10;y=8;
   //法一：
   x=x-y；//x=2,y=8
   y=y+x；//y=10,x=2
   x=y-x；//x=8,y=10
   //法二：
   x=x+y; //x=18,y=8
   y=x-y; //x=18,y=10
   x=x-y; //x=8,y=10

判斷一個數是完全平方數

另一意思是：這個數的開平方是整數

(Math.sqrt(n)+"").indexOf(".")==-1 //為真(找不到小數點)

猜數字游戲

場景特點：

  1. 當輸入“exit”或猜對就退出,否則一直迴圈輸入
  2. 退出發生條件有多個且是或者關係
  3. 每個條件發生時，都有操作執行
  4. 判斷條件不是 比較全等 無法用switch執行

解決方法：用while實現循壞，條件是true，if..elase實現判斷，break實現退出

    var n=parseInt(Math.random()*(9-0+1)+0);
    var input;
    while(true){
        input=prompt("請輸入一個數：");
        if(input>n){
            alert("數字大了");
        }else if(input<n){
            alert("數字小了");
        }else if(input==n){
            alert("猜對了");
            break;
        }else if(input<"0"||input>"9"){
            alert("無效輸入");
        }else if(input=="exit"){
            alert("放棄了");
            break;
        }
     }

反覆輸入密碼,直到輸入正確

當輸入不正確時，不執行錯誤的操作，但又需要迴圈輸入

    while(prompt("請輸入密碼")!=pwd){
        alert("密碼錯誤，請重試！");
    }
   alert("驗證成功");

給一個多位數，分解出它各個位上的數字

   var x=54321;//一個五位數
   a=parseInt(x/10000);/* 分解出萬位 */ 
   b=parseInt(x%10000/1000);/* 分解出千位 */ 
   c=parseInt(x%1000/100);/* 分解出百位 */ 
   d=parseInt(x%100/10);/* 分解出十位 */ 
   e=parseInt(x%10);/* 分解出個位 */

數組去重/統計個數

用hash數組

var arr=[2,3,4,3,6,4,5,6];
var hash=[];
for(var i=0;i<arr.length;i++){ //去掉重覆，並且統計個數
    if(hash[arr[i]]==undefined){
        hash[arr[i]]=1;
    }else {
        hash[arr[i]]++;
    }
}
console.log(hash);
arr=[];
for(var key in hash){  //得到去掉重覆後的新數組
    arr[arr.length]=(key-=0);
}
console.log(arr);

使字元串變數字的簡單方法

var a=str-0;

獲得滑鼠的事件，並獲取滑鼠離視窗的坐標

var e=window.event||arguments[0];
var x=e.screenX;
var y=e.screenY;

獲取對象的style屬性，解決相容性

if(getComputedStyle){
    style=getComputedStyle(this.div);
}else{
    style=this.div.currentStyle; //對於IE8
}

兩個對象同用一個函數時，可連續等號

$("li.app_jd").onmouseout=
    $("li.service").onmouseout=function(){
    this.$("[id$='_items']").style.display="none";
}

在js中修改元素的樣式屬性

在css文件中是斜杠表示的，在js中要把斜杠去掉並把第二個單詞首字母大寫

    css：font-size:12px;  
    js：div.style.fontSize="32px";

將文本內容插入到元素內

  • 作為文本插入到元素

    textContent或innerText屬性可以獲取或設置指定元素的文本內容

  • 作為節點方式

    創建文本節點 - createTextNode(text)

    將文本節點作為子節點

    jq中的last選擇器

  • :last 與前面是同一個元素

  • :last-child 是前一個的子元素

    #table tr>td:last //最後一行的最後一個td
#table tr :last-child //每行的最後一個td

    給a綁定click事件

    在最後 return false;-->阻止a元素的預設行為(頁面跳轉)

    控制動畫的速度：設置相對速度

    this.speed=0;//控制速度
this.step=function(){
    this.speed++;
    if(this.speed%2==0){
        //執行操作代碼
    }
}

    獲取數組中的最大值和最小值

    var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
    var maxInNumbers = Math.max.apply(Math, numbers);
    var minInNumbers = Math.min.apply(Math, numbers);

    產生隨機數

    基本歸納：

    Math.random() 【產生0<=b<1的小數】

Math.random()*(max-min+1)+min 【產生min<=x<(max+1)的小數】

Math.floor(Math.random()*(n+1)) 【產生0<=x<=n的整數】

Math.ceil(n) 【產生>=n的最小整數】
　

Math.floor(m) 【產生<=m的最大整數】

Math.round(k) 【產生k四捨五入後的整數值】

parseInt(y) 【對y進行取整】

例子：

var a=parseInt(Math.random()*(10-1+1)+1);//1<=a<=10的整數
var b=Math.floor(Math.random());//0
var c=Math.random()*(1-0+1)+0;//0<=c<2 的小數
var a=Math.floor(Math.random()*(1-0+1)+0);//0和1

toFixed方法

number.toFixed(a)

  • 返回一個以定點表示法表示的數字的字元串形式
  • toFixed預設值是0-->就是取number的整數部分
  • a的範圍為0-20，當a是0-20的小數時 取a的整數部分
  • 當a不是數字時（字元串、null...）等 a取預設值0

  • 當a不在0-20的範圍內時 會報錯 不在範圍內

    parseInt方法

  • 取當前字元中整數
  • 第一個是數字,將一直找到第一個不是數字的字元,取前面的數字

  • 第一個不是數字 返回空

void 運算符

  • void 運算符對任何值返回 undefined(它不是有效值，不會顯示在瀏覽器視窗中)
  • 該運算符通常用於避免輸出不應該輸出的值

  • 沒有返回值的函數真正返回的都是 undefined

    <a href="javascript:void(window.open('about:blank'))">Click me</a>
<a href = "javascript:void(0)" onclick = ""></a>

    value、innerHTML、textContent屬性的區別

  • value

    a、用於單標簽:獲取有value屬性的單標簽的 value值

    b、用於雙標簽：獲取元素在網頁上此時呈現的內容

    eg: select.value -->表示此時select中被選中項的內容

  • innerHTML:獲取元素內的所有內容(包括文本和子標簽),以字元串的形式

    用innerHTML向頁面寫雙標簽時，應該一次寫入，不能分開

  • textContent:獲取標簽內的文本

    向數組插入數據

    兩種方法：

    array.push(data);

array[array.length] = data;

切換變數0和1的方法

  1. 分支結構 if..else..

    if(a==0){
    a=1;
}else{
    a=0;
}
  2. 三目

  3. 公式計算

    a=(++a)%2;

    關於select的一些操作

    var obj = document.getElementById("testSelect"); //定位id
    var index = obj.selectedIndex; // 選中索引
    var text = obj.options[index].text; // 選中文本
    var value = obj.options[index].value; // 選中值
    var value = obj.value;// 選中值

    DOM對象和jq對象的相互轉化

1.DOM轉JQ

$("#orderList").append($(html));//$(html)-->把DOM對象轉換成JQ對象

2.JQ轉DOM：

$("#v")[0];
$("#v").get(0);

外部文件的引用

  • js中 尋找圖片 相對路徑-相對於html文件

  • css中 尋找圖片 相對路徑-相對於該css文件

    函數聲明與函數表達式(ES5)

  • 函數聲明會預設提前,可以先執行再聲明

  • 函數表達式,執行到var這行時才會解析,只能先聲明再執行

    console.log(a());//2
var a=function(){
    return 1};
function a(){
    return 2};
console.log(a());//1

    transition

    css3的動畫屬性(transition)可操作 js給元素添加的屬性

    jq中hover函數

$('').hover(function(){},function(){});

表示滑鼠進入和離開那一時間發生的事件，
其中兩個函數相當於mouseenter() mouseleave()

jq中把一個對象轉化成get請求需要的參數形式

把一個對象轉換成key1=val1&key2=val2&...

var str=jQuery.param(object);

獲取屏幕寬高

var scrWidth=document.body.scrollWidth;//網頁正文全文寬
var srcHeight=document.body.scrollHeight;//網頁正文全文高

JS中函數的隱含參數

  1. arguments：代表正在執行的函數和調用它的函數的參數,只有函數開始時才可用
  2. caller：返回一個對函數的引用,該函數調用了當前函數
  3. callee：返回正被執行的function對象,也就是所指定的function對象的正文

arguments.length-實參長度;
arguments.callee.length-形參長度

toString()方法

  • x.toString()--->把x變成字元串(不能轉化null,underfined...)
  • Object.toString()--->輸出對象的類型和名稱
  • toString(x)--->輸出x的類型
  • String(x)--->把x變成字元串,相當於隱式轉換(所有的都可以轉包括null,underfined)
  • toString與String關係：String調用toString

  • toString與x.valueOf區別：toString包含類型轉換;valueOf不帶類型轉換

    將 [類數組對象/偽數組] 變為 [數組類型對象]

    類數組對象/偽數組：能通過Array.prototype.slice轉換為真正的數組的帶有length屬性的對象，例如arguments對象，調用getElementsByTagName、document.childNodes之類返回NodeList的對象都屬於偽數組

兩種方法：

lis=Array.prototype.slice.call(lis);  //在IE8及之前版本不行
lis=[].slice.call(lis);         
 |                          |           
//數組(處理後的lis)       //類數組對象(前lis)

相容所有瀏覽器都可運行：

 function convertToArray(nodes){
    var array=null;
    try {
        array=Array.prototype.slice.call(nodes,0);//針對非IE瀏覽器
    }catch(ex){
        array=new Array();
        for(var i=0,len=nodes.length;i<len;i++){
            array.push(nodes[i]);
        }
    }
    return array;
  }

例子1：

html:

<ul id="ul">
    <li data-i="2">222</li>
    <li data-i="4">444</li>
    <li data-i="5">555</li>
    <li data-i="1">111</li>
    <li data-i="3">333</li>
  </ul>

對li 依據data-i屬性值排序，見js實現：

 var ul=document.getElementById("ul");
 var lis=ul.querySelectorAll("li");   //getElementsByTagName方法也是一樣
  lis=Array.prototype.slice.call(lis);
  lis.sort(function(a,b){
    return a.dataset.i-b.dataset.i;
  });
  for(var i=0,len=lis.length;i<len;i++){
    lis[i]='<li data-i='+lis[i].dataset.i+'">'
          +lis[i].innerHTML
          +'</li>';
  }
  ul.innerHTML=lis.join("");

例子2：

對無序的形參輸入進行排序

function fun(){
  arguments=Array.prototype.slice.call(arguments); 
  return arguments.sort(function(a,b){
    return a - b
  });
}
console.log(fun(23,56,1,23,5));

輸出 [1, 5, 23, 23, 56]

用jq遍歷表格的行和列

行：

  • 如果我們要選擇第一行，我們可以用 $('tr:eq(0)')
  • 如果我們要選擇第N行，我們可以用 $('tr:eq(n-1)')
  • 如果我們要選擇奇數行，我們可以用 $('tr:odd')
  • 如果我們要選擇偶數行，我們可以用 $('tr:even')

列：

  • 如果我們要選擇第一列並且對其樣式進行改變，我們可以用下麵的語句來實現

    $(document).ready(function(){
    $('table').find('td').each(function(i){
        if(i%4 == 0){ 
        //‘4’代表表格總共有4列，如果區間編號被4整除，那麼它就屬於第一列
          $(this).addClass('col_1');}
    });
});

  • 如果有合併的話我麽可以先迴圈行再迴圈td

    $('table tr').each(function(i){
        $(this).find("td").each(function(j){
            if(j== 9){//第9列
                $(this).addClass('word_break');
            }
        });
});

    例子：

給一個表格的第0、2...行的0列加上紅色，1列加上藍色,2列加上紅色，3列加上藍色...

    $('#tables>tbody>tr:even').each(function(k){
        $(this).find("td").each(function(j){
                 if(j%2 == 0){
                    $(this).css("background","red");}
                if(j%2 == 1){
                    $(this).css("background","blue");}
        });
    });

禁止右鍵點擊

$(document).ready(function(){
        $(document).bind("contextmenu",function(e){
        return false;
    });
});

檢測瀏覽器

註: 在版本jQuery 1.4中，$.support 替換掉了$.browser

$(document).ready(function() {
    // Target Firefox 2 and above
    if ($.browser.mozilla && $.browser.version >= "1.8" ){
        // do something
    }

    // Target Safari
    if( $.browser.safari ){
        // do something
    }
    
    // Target Chrome
    if( $.browser.chrome){
        // do something
    }
    
    // Target Camino
    if( $.browser.camino){
        // do something
    }
    
    // Target Opera
    if( $.browser.opera){
        // do something
    }
    
    // Target IE6 and below
    if ($.browser.msie && $.browser.version <= 6 ){
        // do something
    }
    
    // Target anything above IE6
    if ($.browser.msie && $.browser.version > 6){
        // do something
    }
});

統計元素個數

$(document).ready(function() {
   $("p").size();
});

關於網頁的一些屬性

var h = "";
h += " 網頁可見區域寬："+ document.body.clientWidth+"\n";
h += " 網頁可見區域高："+ document.body.clientHeight+"\n";
h += " 網頁可見區域寬："+ document.body.offsetWidth +" (包括邊線和滾動條的寬)"+"\n";
h += " 網頁可見區域高："+ document.body.offsetHeight +" (包括邊線的寬)"+"\n";
h += " 網頁正文全文寬："+ document.body.scrollWidth+"\n";
h += " 網頁正文全文高："+ document.body.scrollHeight+"\n";
h += " 網頁被捲去的上："+ document.body.scrollTop+"\n";
h += " 網頁被捲去的左："+ document.body.scrollLeft+"\n";
h += " 網頁正文部分上："+ window.screenTop+"\n";
h += " 網頁正文部分左："+ window.screenLeft+"\n";
h += " 屏幕解析度的寬："+ window.screen.width+"\n";
h += " 屏幕解析度的高："+ window.screen.height+"\n";
h += " 屏幕可用工作區寬度："+ window.screen.availWidth+"\n";
h += " 屏幕可用工作區高度："+ window.screen.availHeight+"\n";
h += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色"+"\n";
h += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n";

引用外部文件時，設置編碼格式

<script type="text/javascript" src(引用外部js文件)="xxx.js" charset(設置編碼格式)="utf-8"></script>

從數組中隨機獲取成員

var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119];
var randomItem = items[Math.floor(Math.random() * items.length)];

生成隨機字母數字混合的字元串

function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString  += Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);
}

打亂數字數組的順序

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});

字元串去空格

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};

驗證是否是數字

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

使用length屬性截斷數組

var myArray = [12 , 222 , 1000 , 124 , 98 , 10 ];
myArray.length = 4; // myArray will be equal to [12 , 222 , 1000 , 124]
myArray.length = 0; //清空數組

如果把length屬性變大，數組的長度值會增加，會使用undefined來作為新的元素填充。length是一個可寫的屬性

通過for-in迴圈檢查對象的屬性

可以防止迭代的時候進入到對象的原型屬性中

for (var name in object) {  
    if (object.hasOwnProperty(name)) { 
    // do something with name
    }  
}

用JSON來序列化與反序列化

var person = {name :'Saad', age : 26, department : {ID : 15, name : "R&D"} };
var stringFromPerson = JSON.stringify(person);
/* 
    stringFromPerson 結果為 
    '{"name":"Saad","age":26,"department":{"ID":15,"name":"R&D"}}'   
*/
var personFromString = JSON.parse(stringFromPerson);
/* personFromString 的值與 person 對象相同  */

JQuery一個對象可以同時綁定多個事件

  • 多個事件同一個函數：

    $("div").on("click mouseover", function(){});

  • 多個事件不同函數

    $("div").on({
    click: function(){},
    mouseover: function(){}
});

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android埋點技術分析
    1.現有的幾種埋點技術的實現原理和優劣分析 （1）代碼埋點：將收集數據的代碼直接寫在需要的地方，當用戶點擊某個控制項或者打開某個頁面時調用到該部分代碼完成數據的收集。 優勢：準確性高，收集數據和發送數據都能精確控制，同時能方便的設置自定義屬性，自定義控制項，自定義View等。 劣勢：埋點工作量大，更新代 ...
  • iOS 斷點上傳文件
    項目開發中，有時候我們需要將本地的文件上傳到伺服器，簡單的幾張圖片還好，但是針對iPhone裡面的視頻文件進行上傳，為了用戶體驗，我們有必要實現斷點上傳。其實也不是真的斷點，這裡我們只是模仿斷點機制。 需求 既然需要上傳文件，那最好要有一個上傳列表界面，方面用戶對上傳中的文件進行實時管理。這裡我簡單 ...
  • 微信輕鬆接入QQ客服
    一直以來，大家都苦惱怎麼實現微信公眾帳號可以接入客服，也因此很多第三方介面平臺也開發客服系統CRM系統，不過不是操作複雜就是成本太高。今天分享一個低成本又簡便的方法，讓你的公眾帳號接入QQ客服。下麵介紹具體的方法：1、首先，這個方法目前微信最新的手機版本都是適用的，測試過微信5.0安卓版本還有點問題 ...
  • rem自適應佈局小結001
    在最近的移動端佈局當中，最炙手可熱的方式便是使用rem進行元素的佈局。以下便是從最近的文章中所總結出來的一點東西。 首先，我們必須有以下的疑問： rem的本質是什麼？ rem如何實現自適應佈局？ 如何根據設計稿來調整rem的值？ rem佈局是能純CSS還是必須JS進行輔助？ 接著，我們來稍微解答或者 ...
  • JavaScript教程-簡介
    JavaScript是世界上最流行的腳本語言，因為你在電腦、手機、平板上瀏覽的所有的網頁，以及無數基於HTML5的手機App，交互邏輯都是由JavaScript驅動的。 簡單地說，JavaScript是一種運行在瀏覽器中的解釋型的編程語言。 在Web世界里，只有JavaScript能跨平臺、跨瀏覽器 ...
  • 對象遍歷方法
    各種遍歷對象的方法返回值的不同 前置代碼: function Obj() { // 直接在this上添加屬性 this.prop_this = 'prop_this'; // 在this上添加symbol屬性 this[Symbol.for('prop_symbol')] = 'prop_symbo ...
  • .13-淺析webpack源碼之WatcherManager模塊
    從模塊流可以看出，這個NodeWatchFileSystem模塊非常深，這裡暫時不會深入到chokidar模塊，有點太偏離本系列文章了，從WatcherManager開始講解。 流程如圖： 源碼非常簡單，包括一個工廠函數與兩個原型方法，整理如下： 包含一個容器類和三個實例方法，每一次調用watchF ...
  • 使用js做創建圖片及刪除圖片 若有什麼不對或不完整的地方，請大家提出來，謝謝
    首先我們要在<body>中創建一個按鈕<button>來用作點擊創建圖片，在<button>中寫一個點擊事件（隨便命名）， 在創建一個<div>存放圖片，在<div>中創建一個id（跟上面一樣隨便命名） 代碼如下: <button onclick="hehe()">創建圖片</button> <di ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類