JavaScript常用编程问题记录

个人笔记,学习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"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

使字符串变数字的简单方法

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

      Click me
      

    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 str=$.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

例子1:

html:

  • 222
  • 444
  • 555
  • 111
  • 333

对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'
          +lis[i].innerHTML
          +'';
  }
  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";

引用外部文件时,设置编码格式

从数组中随机获取成员

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(){}
    });

    控制台输出点击的DOM元素

    在打开点击审查元素的状态下,在控制台 $0会返回最近一次点选的DOM结点

    关于localStorage简单操作

    存:window.localStorage.setItem(itemName,JSON.stringify(this.setting)
    取:JSON.parse(window.localStorage.getItem(itemName))
    移除:window.localStorage.removeItem(itemName)

    $.extend简单例子

    关于$.extend的用法很多样,此处记录下最基本的用法

    let a={"stu":"1","tea":"2"};
    let b={"stu":"3","stu22":"4"};
    $.extend(a,b);//以b覆盖a
    console.log(a);//Object {stu: "3", tea: "2", stu22: "4"}
    console.log(b);//Object {stu: "3", stu22: "4"}

转载于:https://www.cnblogs.com/solodancer/p/8068006.html

你可能感兴趣的:(JavaScript常用编程问题记录)