js使用记录

“/”表示服务器根目录,“../”表示当前目录的上一级目录,“./”表示当前目录

对于 return、break、continue 等语句,如果后面紧跟换行,解析器会自动在后面填充分号(;)

function foo2()        //返回undefined
{
  return
  {
      bar: "hello"
  };
}
View Code

 ‘’加数字转为字符串,'+/-'加‘数字’转为数字。

js中对象的底层是一个hash数组,为一个对象设置属性时,js会隐式的将属性名字符串化,所以obj["属性名"]===obj.属性名。obj["prop"]可以动态拼接字符串生成属性名,更灵活。

var a={},b={key:'b'},c={key:'c'};
a[b]=123;       //a[‘[object Object]’]
a[c]=456;        //a[‘[object Object]’]
console.log(a[b]);//456    
View Code

  _.each(colloction,function(value,key){…}),返回原素组,对集合中的每个元素运行一遍function。

_.map(colloction,function(value,key){…}),返回新数组,由原集合中的每个元素调用函数后的return结果组成。

把任何标签元素的contenteditable属性(不属于css样式)设置成true,在页面上点击即可直接编辑该元素的内容。  

在控制台运行下面代码也可以使页面处于可编辑状态:document.body.contentEditable='true';或document.designMode='on';

 

mouseover:若移动到子元素内,会触发此事件。从子元素移动到父元素内,会再一次触发。子元素支持冒泡属性,对应mouseout。

mouseenter:若移动到子元素内,不会触发此事件,除非移动出父元素。不支持冒泡属性,对应mouseleave。

 

访问undefined的属性会报错,可以设前置条件避免访问undefined的属性值:

利用短路逻辑if(obj&&obj.prop),若obj为undefined,则为假值;或用三目运算增加前置条件。

 

引号嵌套:引号里面不能有相同的引号,单双引号要错开使用。连续两个最近的单引号/双引号为一对;若多级嵌套,使用转义字符转义。

  

原生js访问class要用className。

 

splice() 方法 用于插入、删除或替换原数组的元素。

slice() 方法 可提取数组或字符串的某个部分,并返回被提取的部分,原数组/字符串不变。比substring方法更灵活,Substring的两个参数中小的数为起始下标,和定义前后没有关系。

splice 的参数 :splice (start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

数组从 start下标开始,删除deleteCount 个元素,并且可以在这个位置开始添加 n个元素。当start ,deleteCount 均为0 的时候,也就是在数组的最前面插入新的元素。

当 参数有 start和deleteCount时,是从start 下标开始删除deleteCount 个数组的元素;当参数只有start参数时,就是删除 从start下标起至最后的元素。

当参数为负的时,则从数组元素的尾部开始算起的位置 (-1 指的是 数组中倒数第一个元素, -2 指的是,数组中倒数第二个元素。)

slice 参数 : slice(start,end);

slice 方法提取 从 start下标起 以end下标 为结尾的 一段元素(但不包括end下标的元素),然后返回新的数组,对原数组没有任何是影响。

当参数为负时,则该参数是从数组的末尾 索引开始算起,(-1 指的是 数组中倒数第一个元素, -2 指的是,数组中倒数第二个元素。)

当参数为一个参数,提取是以 start下标起 至末尾的 部分元素。

当start 为0 时, 等于说是克隆一个新的数组,克隆后两个数组进行各自的操作,互不影响。

var clone = arr.slice(0);

借用concat()函数进行数组的复制:var clone= arr.concat();返回的结果是一个新的数组。

 

delete 删除对象的属性或删除数组元素。注意从对象的原型链上继承而来的属性在对象上删除不掉;delete数组元素时数组长度不变,原来的位置为undefined。

操作成功返回true,否则返回false。

循环时如果要删除数组中的元素,使用splice(i,0),然后i--,不然会少遍历一个元素。

  

concat/push(ele1,ele2…)可同时操作多个元素

快速复制对象的hack,先用JSON.stringfy转换生成字符串形式,再用JSON.parse转换为对象。

 

jQuery为了提供跨浏览器的一致性,它始终会在冒泡阶段注册事件处理程序,不支持事件捕获。因此最具体的元素会首先获得响应事件的机会。

1.阻止事件冒泡,但不阻止默认行为,用stopPropagation。
2.阻止默认行为,但不阻止事件冒泡,用preventDefault 。
3.同时阻止事件冒泡和默认行为,并终止当前方法,return false 。而return只是终止当前函数的执行。

点击a链接,会先执行相应的click事件处理函数,再跳转到相应的链接上。因此可以判断不同的结果跳转到不同链接(在handler中修改href属性,事件处理完就会跳转到新链接地址)或return false 直接终止跳转。最好是不要通过a链接跳转,而是通过js直接调用window API打开新窗口。

event.currentTarget   =  回调函数内的this  =    注册监听函数的元素(对象)

  eg:你点击的元素不一定就注册了回调函数,也许是它的父元素注册了事件处理函数。

event.target   =   事件作用的元素(对象)

  eg: 如果是一个点击事件的话,那么你点击了谁,谁就是这个点击事件的作用对象。

 

触发DOM事件,会产生一个event事件对象,浏览器会将这个event对象隐式传入事件处理程序中,作为arguments对象的第一个元素。回调函数内即使不用形参e接收event对象也可以直接使用event,但最好传入形参。 

递归:要有终止条件,往闭合的方向执行。 

如果点击事件触发不了,可检查事件处理函数有没有绑定上;还有就是看有没有别的高z-index隐形元素遮住了元素,导致点击无效。 

document.write在页面流输入过程中执行。一旦页面加载完毕,再次调用 document.write(),会隐式地调用 document.open() 来擦除当前文档并开始一个新的文档。

history是在当前页面后面压入记录。点击跳转而不是前后操作时,如果当前页面后面有记录,则会丢失。

前台请求资源时在后面追加参数,如时间戳(或其他版本性字符),可以更新缓存。

算2个时间之间的月份差,把年份统一调整为月数,再相减。Date对象的setMonth()可以接受任何范围的数字,Date对象内部会自动计算并转换为对应的日期。月份是从0开始的。

new Date().setMonth(月份差)//负数Date对象会自动调整

  

offsetParent返回第一个非static布局的父级元素,即postion的值是 absolute,relative或fixed中之一。如果父级元素都是static布局,最后返回的是Body。

offsetLeft和offsetTop分别返回相对offsetParent的位置,也就是返回相对第一个非static布局的父级元素的位置。

 

background-origin:content-box/border-box/padding-box;只对背景图有效。

background-clip: content-box/border-box/padding-box;对背景色也有效。

clip:reac(v1,v2,v3,v4);只裁剪绝对定位的元素。

css选择器中,:hover后面可以再接子元素或后面的兄弟元素

 

背景图最好用标签占位,不要直接使用padding。方便小图合并,换个坐标就行。

 

如果某个按钮可能会被暂时禁用,最好用button通过disabled属性来实现;或加个透明遮罩层。

 

:active 伪类向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式。

一个字节可以有一对(2位)的十六进制表示1 byte= 0xFF

  

typeof一元运算符,返回值一个字符串用以说明运算数的类型。t只能返回如下几个结果:

number,boolean,string,function,object,undefined。一般用于判断一个变量是否存在:

if(typeof a != "undefined") …

instanceof 用于判断一个变量是否某个对象的实例

 

 

  

动态循环生成表格,设置rowspan时有效,但每行都会累计往下合并,遍历一行多一个td。因为html中首个合并行后的每个row都要会少一个td才能对齐。所以可以把每一个类别的首行为定位行,只有首个td有内容(高端SUV),后面的td为占位td,display为none。

每个类别的首行之后的tr比首行要少一个td,遍历输入内容。首行height要设为0。

【height为0的妙用:内容依然显示,但框模型不占空间。】

 

对象说明符(object specifiers)/参数json格式化

function test(a, n, c}){

      console.log(c,n,a);

}

test(11, 'chen','shanghai'})

//参数必须按顺序传入,形参才能被正确赋值,当参数过多时不方便。

function test({age:a,name:n,city:c}){

//形参仍然是a,n和c,形参通过属性名(对象说明符)根据实参被正确赋值。

      console.log(c,n,a);

}

test({name:'chen',age:11, city:'shanghai'})//有对象说明符,顺序不重要了

  

对象字面量中属性名不能用变量,只能是固定的名称,变量标识符key会被当做对象的属性名[key]而不是变量。

可以分多步用[]重新定义:

var obj={};

obj[key]=BQ[key];

arr.push(obj);

ES6中才支持对象字面量的属性名中用变量:  

var obj = {

  [key] : value

}

  

$.proxy和bind:接受一个函数,返回一个永久绑定了指定的context的函数。bind是原生方法,性能更好。

setTimeout($.proxy(function(){

  console.log(this);

}, this), 5000);

setTimeout((function(){

  console.log(this);

}).bind(this), 5000);

  

伪协议说明符javascript:

这个协议类型声明了任意的URL的主体可以是javascript代码,它由javascript的解释器运行。如果javascript:URL中的javascript代码含有多个语句,必须使用分号将这些语句分隔开。js代码把最后一条javascript语句的返回值且该返回值为字符串的值作为新文档的内容显示出来。(浏览器之间不一样,有些不会覆盖原来的文档)

若用javascript:URL执行某些不改变当前显示的文档的javascript代码,必须确保URL中的最后一条语句没有返回字符串值或添加void 0。

javascript URL可以含有只执行动作,但不返回值的javascript语句。由于没有作为新文档来显示的值,因此它并不改变当前显示的文档。

 

switch(exp){

default:{…};

break;
case value:{…};

break;
}

switch先从case开始依次匹配寻找入口:如果没有匹配的case,则将default语句当做执行入口,而不管default语句写在头还是尾(若default无break,则一直往下执行直到break或switch语句结束)。如果有匹配的,则从入口处开始从上往下执行,直到碰到break跳出switch语句或执行完整个switch语句(此时default不是必须要执行的语句,如果在前面,不会再跳回去执行)。

 

函数声明时可以没有参数,在内部通过arguments指代具体参数,调用时再直接传参。

this指函数调用的对象:obj.foo();//this值obj

foo()是一个整体,表函数的调用,再找之前的"."。

注意

1.回调函数(setTime等)、函数赋值和调用分开执行的情况:

var baz=obj.foo;

baz();//this值window;两句js语句

2.new Foo()为构造_调用,会改变this的值指向新对象,构造函数里的语句也会依次执行。会产生执行环境,有可能会有闭包形成。《取号机》

  

函数参数也是局部变量,在内部会被修改,适用变量提升规则;同时会修改arguments对象中对应的值【无变量名,只有值】。

 

hasOwnProperty 和 in 区别?

hasOwnProperyt只搜索实例中的属性;只支持标识符

in还包括整个原型链;只支持字符串形式,不支持标识符

 

parseInt(var,10);只有当var不为0X或0开头时,才默认转为10进制,所以radix不要省。

 

在检查变量是否存在时,不要只用var名,因为可能变量存在但的值为undefined:

if(typeof somevar !== 'undefined')

 

function add({num1:a1,num2:a2}){

return a1+a2;//形参用对象说明符形式,属性值直接在函数体中使用;属性名在传参时再用

}

var sum=add({num2:5,num1:8});          //参数过多时,不用按指定顺序传参

_.template(data);                          //模板函数调用也是采用这种形式???。

 

 

arr.toString();和fun.toSting();返回其原始字符串值

obj.toString()返回[object Object],没有什么用

 

if(s.indexOf("XXX") !== -1) …//不要和0比较,有可能第0个字符就匹配到。

 

如何记忆初始化状态??

  

默认情况下,Date对象返回的都是当前时区的时间。Date.UTC方法可以返回UTC时间(世界标准时间)。该方法接受年、月、日等变量作为参数,返回当前距离1970年1月1日 00:00:00 UTC的毫秒数。

 

因为js无需编译,所以在chrome里修改js文件保存后可以直接运行测试,不用在源文件中改。

 

算日历中第n周的所属月份:

先算当年1月4号(所在周为当年第一周)的星期几(周日为0),取负数和4相加,再和周数折算为天数相加,调整后的当年第n周已经过了的天数。

例外:53周直接在12月。 

  

参数对象标识符形式

如果形参为多个,调用函数时,要根据形参的顺序依次从实参中取值、赋值。如果参数过多,顺序容易出错。此时可以用参数对象标识符,不用按照顺序传入参数。

形参对象的属性名为js标识符,一旦定义就不能改变。所以属性值为才是真正的参数变量,在函数内部直接使用。调用时,形参变量会根据属性名从实参中取值初始化。

var para={arg1:15,arg2:"lily",arg3:"shagnhai"};
function test({arg1:name,arg2:age,arg3:addr}){
    console.log(name+age);                     //形参变量为name,age和addr,标识符为arg1、arg2和arg3
}
test(para);
 

var para={age:15,name:"lily",addr:"shagnhai"};    //定义函数时参数采用json对象格式方便,也不用管顺序
function test2(para){
    console.log(para.name+para.age);          //形参变量为para
}
test2(para);
View Code

 

ie 7/8不支持trim(),改用String.replace(/^\s*/, '' ).replace(/\s*$/, '' ) 

三目运算优先级只比赋值运算符高,低于=-*/和比较运算符:'</div>'+condition?value1:value2;结果都为value1,因为'</div>condition'永远为真。

真确的写法'</div>'+(condition?value1:value2)。 

三目运算符可以嵌套:5<3?0:6>4?2:8;执行顺序从左往右

onfocus获得焦点,光标在元素内一闪一闪;onblur失去焦点,光标不在元素内。两者为相反的事件。

如何区分点击事件是代码触发还是鼠标触发?

//鼠标点击,在event对象中会有点击时x/y坐标值;代码触发的没有。
$("#btn").click(function(e){
    if(e.hasOwnProperty('originalEvent'))  //jq将原生事件对象封装到jq的事件对象中
        // a real click.
    else
        //a fake click.
});

HTML元素的onload事件,加载后执行回调:

<script src="/js/common.js" type="text/javascript" onload="alert('loaded')"></script>

 

posted @ 2017-02-26 15:52  开发之路  阅读(316)  评论(0编辑  收藏  举报