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........
})