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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類