javascript学习经验技巧

一.点击按钮切换
1.设置flag 0,1
2.使用toggle方法（如果有的话）
二.循环精灵图
1.在循环的时候不能直接加 “-”,而是要"0-" + index + “px”;
2.精灵图是 用图片来作为盒子的背景，所以是改变 他的backgroundPosition
三：background与background-image的区别：
1.background是简写属性
2.background与background-image是包含关系，前者可以完成后者的功能，但后者不可以。
3.通常在写css的时候，一般来讲都直接用background做全局设置，不单独去设置。
四：排他思想
for循环给所有的按钮都注册点击事件，内层再一次的循环 干掉所有人，最后内层循环外面再给自己加上样式（干掉所有人，留下我自己）
五：body标签没有src属性，不能设置body.src，只有 img标签有src属性。body只能设置 url()
获取body元素方法：
1. 和其他的元素一样 document.querySelector(“body”)
2. 可以直接 document.body就可以获取
六：全选和全不选：注意循环给所有的input选框注册点击事件，每次点击一次，都要对其他的input选框进行排查，是否里面有一个没有被选中，只要有一个没有被选中，那么全选按钮就不会被选中（flag）
七：添加类名是 元素.className = ‘’;
八：tab栏切换！！设置自定义属性，只有拿到当前点击的是哪一个元素，才能让相应的内容显示，设置的自定义属性，先循环给每个li 添加自定义属性，也就是序号，然后再点击的时候，获得当前点击的是哪个元素（this.getAttribute(“index”);）。最后也是一个排他思想，先循环遍历，让所有的元素都不显示，最后 让当前点击的元素显示就可以了

九：h5新增的获取自定义属性的方法
它只能获取data-开头的；dataset 是一个集合里面存放了所有以data开头的自定义属性；如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
div.dataset.index 或者 div.dataset[‘index’] 可获得 自定义属性是 data-index 的自定义属性值
十：childNodes 所有的子节点 包含 元素节点 文本节点等等；children 获取所有的子元素节点 也是我们实际开发常用的
十一：第一个子节点firstChild与第一个子元素节点firstElementChild；提倡使用：ol.children[0]
node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
十二：创建元素document.createElement之后，一定不要忘了把创建的元素追加或者插入到dom结构中去，才算真正创建新元素成功 遍历对象用 for in ;在删除元素时，必须是要删除元素的父元素开始（父元素.removeChild(this.parentNode); …）
创建元素有三种方式：
1.innerHTML字符串拼接（效率最慢，每次字符串都是 += 浪费空间）
2.innerHTML数组拼接 （效率最高）
3.appendChild方法拼接 （效率次之）
十三：获取当前的时间戳毫秒数 var d1 = +new Date()
十四：删除事件方式：
1.传统删除事件：div.onclick = null
2.removeEventListener: div.removeEventListener(“click”,fn); // 里面的fn回调函数，不需要加(),直接调用的
3.detachEvent():
添加事件：attachEvent(“onclick”,fn); 删除事件：detachEvent(“onclick”,fn);
十五：捕获和冒泡阶段
捕获阶段： 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
十六：e.target与 this 区别：
e.target 返回的是触发事件的对象（元素）,就是我们点击的对象 this 返回的是绑定事件的对象（元素）
区别 ： e.target 点击了哪个元素，就返回哪个元素 this 哪个元素绑定了这个点击事件，那么就返回谁
currentTarget 与 target 非常像，但是ie678不认识
e.type 返回的是当前注册的事件的类型（click,mouseover,mouseout）
十七：定时器中的this默认表示 window对象！！
十八：禁用右键菜单事件：contextmenu
禁止选中文字事件：selectstart
十九：keyup 和 keydown 事件不区分字母大小写
keypress 区分大小写
二十：load 事件与 DOMContentLoaded 事件的区别：
load 等页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等
DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
二十一：resize事件：窗口大小发生改变就会触发这个事件
二十二：new一个时间对象是 new Date() ,不是 Data!! var time= +new Date();
二十三：按钮的disabled 属性使用的时候直接用，不能设置为 div.style.display = true 而是直接 div.disabled = false;
二十四：offset与style的区别：
box.offsetWidth 返回的是数值类型 200
box.style.width 返回的是字符串类型 200px
二十五：jQuery中的date属性是放在元素的 内存里面的，外部的页面时看不到的，就算打开控制台也看不到的。但是存在内存中，可以用来调用和存储数据。可以理解为把这个data()当做一个变量来看。data() 方法还可以获取 H5 中自带的数据。
自定义一个属性 data-index 属性。可以用data(“index”) 可以获取 自定义的属性 data-index 属性的值（省去了 data-）,相当于获取data属性里面的index 并且最后返回的数据类型是 数字型的
二十六：购物车案例中：
1. 全选和全不选可以 给全选按钮注册 change事件，然后获取当前自身的状态，然后再把这个状态赋值给其他的 复选框
2. 在原生的js 中是用给每个复选框循环注册点击事件，每次点击其中的一个的时候，都要循环的把其他的所有复选框都 检查一遍，只要有一个复选框没有被选中，那么全选按钮就不能被选中； 在jQuery中 有一个属性 :checked , $("j-checked:checked") 而其中有length属性，$("j-checked:checked").length可以知道当前有几个复选框被选中 专门用来查找被选中的复选框元素（在每个小的复选框的状态被改变都要检查一下，当前被选中的复选框的个数是否等于 所有的复选框的个数）
3. 购物车增减商品数量思路： 我们声明一个变量increment，每次点击一次就让这个变量值加一，然后赋值给文本框。
注意:
1.只能增加本商品的数量，所以要用parents() find() sibings() 等方法选中本条数据中的文本框
2.这个变量的初始值应该是这个 文本框的值，应该在这个值的基础上++ 。减号就需要判断，不能让里面的数量小于1
3.把前面的￥符号去掉，用到了截取字符串的函数 str.substr(1); 只有一个参数表示从索引是1的地方开始截取，一直截取到字符串的最后面
4.保留两位小数的方法： toFixed(2)
5.通过each() 遍历拿到每个dom中的值，遍历相加，就是当前总共选择了几件商品
二十七：jQuery内容文本值：
html() : 获取内容值 可以输出标签例如
html(""): 设置内容值
text() :获取元素的文本值 只能获取到标签之间的文本数据
val(): 获取表单元素中的value值
二十八：each() 方法遍历元素 $.each() 可以遍历任何对象，主要用于数据处理，，比如数组，对象

("div").each(function(index,domEle){
//第一个参数一定是索引号，这里的index不是固定的，可以自己设定名字，但是他们都表示索引。第二个参数一定是 dom 对象，所以如果在jQuery中使用必须把它包装成jQuery对象 $(domEle)
})

.each($("div"),function(index,element){
xxxx........
})