Sorted out the previous JS study notes, basic part of the knowledge.
1.className
设置标签的css类的时候不能直接使用class，而是className。
2.设置元素属性的方法
一种是使用 .
一种是使用中括号，使用变量设置css属性值的时候，不能直接写成div1.style.name，应该写成div1.style[name]，name是个变量。
例如：div1.style[‘name’]，div1.style.height，div1.style.width，变量不用加引号，加引号就是字符串了，例如：div1.style[‘width’]是不对的。
3.arguments不定参，参数的个数不固定，是个数组，通过循环操作数组中的参数。
写到参数里的函数调用不需要写括号。
例如：function show(){} btn.onclick=show;
4.js中的style只能操作行间样式，不能操作非行间样式。
js中使用currentStyle来获取非行间样式，比如获取<head>标签中的css样式。
currentStyle只支持IE浏览器，getComputedStyle支持火狐、谷歌、IE9以上浏览器，不同的浏览器内核使用不同的属性。
alert(getComputedStyle(oDiv,false).width); 有两个参数，其中oDiv就是要获取样式的那个元素，第二个参数随便填。
if(undefined)返回的是true?
5.isNaN(参数) 函数用于检查其参数是否是非数字值。
typeof(参数) 函数用于返回其参数是什么数据类型。
js中6中数据类型有number、string、boolean、function、object、undefined。
6.css中有复合样式(例如：background、border)，单一样式(width、height、position)。
取背景颜色的时候用backgroundColor。
7.数组
var arr1 = [1,2,3,4,5];
var arr2 = new Array(,6,7,8,9,0);
数组中的length既可以获取，又可以设置。
例如1：arr1.length=3;
例如2：快速清空数组的方法,arr1.length=0;
数组使用原则：数组中应该只存一种类型的变量。
数组的操作1：
尾部添加：arr.push(4); 往数组的尾部添加一个元素。
尾部删除：arr.pop(); 删除数组的尾部的一个元素。
头部添加：arr.unshift(6); 往数组的头部添加一个元素。
头部删除：arr.shift(); 删除数组的第一个元素。
往数组的中间删除元素： arr.splice(2,3); //删除 splice(起点，长度);
往数组的中间插入元素： arr.splice(2,0,’a,’b’,’c’); //插入 splice(起点，长度，元素……);
替换操作：arr.splice(2,2,’a’,’b’);
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原始数组。
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
提取数组中的元素或者字符串:
array.slice(start, end)
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。slice() 方法不会改变原始数组。
splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。
数组的操作2：
数组拼接：arr1.concat(arr2); 结果是：1,2,3,4,5,6,7,8,9,0 或者arr2.concat(arr1);换下位置
concat(数组2) 连接两个数组
将数组拼接成字符串：var str = arr1.join(‘-’); 结果是：1-2-3-4-5
join(分隔符) 用分隔符，组合数组元素，生成字符串
将字符串分割成数组：var arr3 = str.split(‘-’); 结果是：[1,2,3,4,5];
将数组中的元素排序：arr.sort()
当数组中都是字符串的时候按照首字母进行排序，当数组中都是数字的时候（再不转换类型的情况下，也是先按照字符串排序）
arr.sort([函数]) 比如：
arr.sort(function (n1,n2) {
return n1-n2;
})
8.定时器的作用
开启定时器
setInterval 间隔型
setInterval(函数,时间); 多长时间执行一次函数，时间参数为毫秒。例如：setInterval(show, 1000);
setTimeout 延时型
停止定时器
clearInterval
clearTimeout
获取系统时间
var oDate = new Date();
获取时：oDate.getHours();
获取分：oDate.getMinutes();
获取秒：oDate.getSeconds();
字符串和数字相加返回字符串
str.charAt(字符串中的索引)，返回字符串中某个下标对应的字符。兼容各个版本浏览器。
获取年：getFullYear();
获取月：getMonth()+1; (注意：获取的月份比实际的月份少1，所以在使用的时候需要加个1)。
获取日：getDate();
获取星期几：getDay(); (注意：星期是从0开始的，0，1，2，3，4，5，6，代表星期日开始，到星期六)。
可以定义一个变量timer用来保存定时器，不用的时候清除掉即可。
9.元素的边距
offsetLeft/offsetTop，元素的左边距，上边距 (返回元素的水平偏移位置 / 返回元素的垂直偏移位置)
offsetWidth/offsetHeight，返回元素的宽度 / 返回元素的高度。
相对定位：relative
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位：absolute
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以，现在让我们复习一下学过的知识吧：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
10.DOM基础
元素.childNodes.length (适用于IE6-8)。
通过判断节点类型来对元素进行操作。
元素.childNodes[i].nodeType是节点的类型。
nodeType==1 ——》 元素节点，元素就是标签。
nodeType==3 ——》 文本节点，文本就是普通的前后没有标签包含的文本。
另外一个好用的是 元素.children.length，都兼容。
parentNode元素的父节点。
offsetParent根据元素样式的不同，效果不同，比如当前元素的位置依赖于某个元素的位置。
首尾子节点：
firstChild、lastChild用于获取首尾子节点，只兼容IE6-8。
firstElementChild、lastElementChild用于获取首尾子节点，只兼容高版本浏览器。
解决兼容性的方法是先判断节点是否存在，例如：if(oUl.firstElementChild){//高版本浏览器}else{//IE6-8}
兄弟节点：
nextSibling、previousSibling，用于获取前后子节点，只兼容IE6-8。
nextElementSibling、previousElementSibling用于获取前后子节点，只兼容高版本浏览器。
操作元素的属性：
获取元素属性：getAttribute(名称)
设置元素属性：setAttribute(名称，值)
删除元素属性：removeAttribute(名称)
使用className进行选择元素
var aEle=oParent.getElementsByTagName(‘*’);使用通配符获取某个元素下包含的所有的元素。
11.DOM操作应用
创建DOM元素
document.createElement(标签名) 创建一个节点。
父级.appendChild(节点) 追加一个节点。
例如：在ul中插入li，父级.appendChild(子节点)
插入DOM元素
insertBefore(节点，原有节点) 在已有元素前插入元素
例如：倒序插入li，父级.insertBefore(子节点，在谁之前)。
删除DOM元素
removeChild(节点) 删除一个节点
例如：删除li，父级.removeChild(子节点)
元素.innerHTML给元素添加内容
元素.innerText给元素添加内容，严格注意大小写。
文档碎片
文档碎片可以提高DOM操作性能(理论上)，比如在：IE6、IE7浏览器上提升性能效果好。
var oFrag=document.createDocumentFragment();
相当于往袋子里装东西，装完东西把袋子再提袋子。
12.DOM操作高级应用
oTable.getElementsByTagName(‘tbody’)[0].getElementsByTagName(’tr’)[1].getElementsByTagName(‘td’)[1].innerHTML
上边的语句相当于oTable.tBodies[0].rows[1].cells[1].innerHTML
oUl.appendChild(oLi)是先把元素从原有父级上删除，再添加到新的父级里。
oTable.search(arr[j] != -1);说明搜索到了，若等于-1则说明没有搜索到对应的字符串。
字符串做比较的时候，可以通过把两个字符串同时转换为大写或者小写，就可以实现比较时忽略大小写。
sText.split(‘ ’)用于把字符串以某个字符分割成数组。
元素集合类型的数组不是真正的数组，只能使用length，方括号方法，不能使用sort方法。
定义和用法：
sort() 方法用于对数组的元素进行排序。
语法：arrayObject.sort(sortby)
sortby可选。规定排序顺序。必须是函数。
返回值，对数组的引用。请注意，数组在原数组上进行排序，不生成副本。
说明：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
1)若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
2)若 a 等于 b，则返回 0。
3)若 a 大于 b，则返回一个大于 0 的值。
function sortNumber(a, b) {
//正序排序，从小到大
return a - b；
//倒序排序，从大到小
return b - a;
}
13. 字符串去重
function quchong2(str){
var newStr="";
for(var i=0;i<str.length;i++){
if(newStr.indexOf(str[i])==-1){
newStr+=str[i];
}
}
return newStr;
}
Copy the code