一、数组
定义：var arr = []; 如：var arr = [1,2,3,4];
或者：var arr = new Array();二者没有啥区别，相较而言前者运行速率要快些；
属性：
lenth -------->即可获取，又可设置；例：快速清空数组
使用原则：数组应该只存一种类型的变量
方法：
var ar r = [1,2,3,4,];
1.push(num) arr.push(4); 向数组尾部添加一个数-->'4' ;
2.pop() arr.pop(); 从末尾删除一个数
3.shift() 从头部删除依噶元素
4.unshift(num) 从头部添加一个元素
5.splice(start,length) 用法一、 删除，start 起始位置 ，length 删除个数
(start,length,num[]) 用法二、删除之后插入 示列：arr.splice(2,0,'a','b'); //输出：1,2,a,b,3,4
6.concat() 数组拼接 a.concat(b);
7.join() 分隔符 arr,join("-");//打印：1-2-3-4；
8.sort() 排序
例：var arr = ["float","width","height","p","html","body"];
arr.sort();//安单词首字母快速排序，sort() 做字符串排序
var arr = [12,8,44,112,99];
arr.sort();//返回:112,12,8,44,99 ;如果要让它识别数组，可传参，如下：
arr.sort(function(n1,n2){
return n1 - n2; => if{n1<n2){return -1;}else if(n1 > n2){ return 1;} else{return 0;}
});
函数：
函数传参：
[] . 具有相同的意义
[] 像Java的泛型 没有具体属性，只有对象
<div id="div1" οnclick="show('value','400px')">
</div>
<script>
function show(name,value){
var div = document.getElementById("div1");
div.dispaly[name] = value;
}
</script>
style className
1.函数加样式是添加在行间；
2.行间样式改变时，className失效
提取行间事件
<input id="btn1
function show(name,value){
var div = document.getElementById("div1");
div.onclick = function(){
}
}
选项卡：
<div id="div1">
<input class="active" type="button" value="教育">
<input type="button" value="科学">
<input type="button" value="生物">
<input type="button" value="历史"><br />
<div style="display: block;">1234</div>
<div>2345456</div>
<div>45252523</div>
<div>4424252</div>
</div>
<style>
#div1 div{
width:200px;
height:200px;
display:none;
background: #ccc;
border: 1px solid #999;
}
#div1 .active{
background: yellowgreen;
}
</style>
<script>
window.onload = function(){
var div1 = document.getElementById("div1");
var btn = div1.getElementsByTagName("input");
var div2 = div1.getElementsByTagName("div");
for (var i = 0;i<btn.length;i++) {
btn[i].index = i;
btn[i].onclick = function(){
for (var i = 0;i<btn.length;i++){
btn[i].className = "";
div2[i].style.display="none";
}
this.className = "active";//this表示指向当前点击/选中对象
div2[this.index].style.display = "block";
};
}
};
</script>
DOM节点
childNodes nodeType
获取子节点
children
使用:
<ul id='ul'>
<li></li>
<li></li>
</ul>
<script>
var ul = document.getElementById("ul");
/*查找子节点的方案一，使用childNodes和nodeType*/
for(var i=0;i<ul.childNodes.length;i++){
//这种查找子节点方式时：空白处会有文本节点
alert(ul.childNodes.length);//-->5
//配合nodeType方能找到我们需要的节点
//nodeType == 3 表示文本节点
if(nodeType == 1){
ul.childNodes[i][name] = value;
}
}
/*方案二，直接使用children实现版本兼容*/
for(var i=0;i<ul.children.length;i++){
ul.children[i][name] = value;
}
</script>
parentNode 父节点
示例：
<ul id='ul'>
<li>12345<a href=#>隐藏</a></li>
<li>12345<a href=#>隐藏</a></li>
<li>12345<a href=#>隐藏</a></li>
<li>12345<a href=#>隐藏</a></li>
</ul>
<script>
window.onload = function(){
var a1 = documentElementsByTagName("a");
for(var i in a1){
a1[i].parentNode.style.dispaly = "none";
}
};
</script>
offsetParent 获取元素在页面上的实际位置；配合position可以实现相对运动
alert(div.offsetParent);//body
<body>
<div></div>
</body>
首尾节点
有兼容性问题
firstChild(不兼容高版本) firstElementChild(不兼容IE6-7)
lastChild lastElementChild
兄弟节点
有兼容性问题
previousSibling previousElementSibling
nextSibling nextElementSibling
解决：
var node = document.....;
if(node.firstChild){
//
}else if(node.firstElementChild){
//
}
dom方式操作属性
dom方式操作元素属性
获取：getAttribute(名称)
设置：setAttribute(名称,值);
删除：removeAttribute(名称);
<input type=text id=text>
<input type=button value=“” id=btn>
<script>
window.onload = function(){
var text = ...;
var btn = ...;
btn.onclick = function(){
text.setAttribute("value","text");
}
}
</script>
className选择元素
优点：相较于id选择，代码量少，id变多就得创建很多id属性
相较于ByTagName定位更为准确
示列：
<ul id="ul1">
<li class="li1"></li>
<li></li>
<li class="li1"></li>
<li></li>
<li class="li1"></li>
<li></li>
<li></li>
</ul>
<script>
window.onload = function(){
var oUl = document.getElementById("ul1");
var box = getClass(oUl,"li1");
for(var i=0;i<box.length;i++){
box[i].style.background = "red";
}
}
function getClass(oParent,clzName){
var result = [];
var clz = oParent.getElementsByTagName("*");
for(var i=0;i<clz.length;i++){
if(clz[i].className == clzName){
result.push(clz[i]);
}
}
return result;
}
</script>
创建、插入和删除节点：
creatElement(标签名);
appendChild(节点);
insertBefore(节点,原有节点);
removeChild(节点);
示列：
<input type="text" id="text"><input type="button" value="创建" id="btn"/>
<ul id="ul1"></ul>
<script>
window.onload = function(){
var oUl = document.getElementById("ul1");
var atext = document.getElementById("text");
var btn = document.getElementById("btn");
btn.onclick = function(){
var aLi = document.createElement("li");
aLi.innerHTML = atext.value;
//oUl.appendChild(aLi);//这种插入方式默认添加到尾部
/*仿微博更新方式，更新显示置顶*/
/*单用insertBefore对有些不版本兼容*/
if(aLi.length > 0){
oUl.insertBefore(aLi,aLi[0]);
}else{
oUl.appendChild(aLi);
}
};
};
</script>
11,文档碎片
文档碎片可以提高DOM操作性能(理论上)
//一般来讲不会降低性能，一般基本没用
document.createDocumentFragment()
<script>
window.onload = function(){
var oUl = document.getElementById("ul1");
var oFrag = document.createDocumentFragment();
var aLi = document.createElement("li");
for(;i<10000;)
{
oFra,appendChild(aLi);
}
oUl.appendChild(oFrag);//一次查到ul里
};
DOM应用高级篇
表格应用-1
获取
tBodies/tHead/tFoot/rows/cells
各行变色
鼠标移入高亮
添加、删除一行
DOM方法的使用
示列：
<script>
window.onload = function(){
var tab = document.getElementById("tabs");
var i,oldColor;//用于记录/标记背景
/*获取table表格下tBody的第二行第一例大值
*
* getElementsByTagName("tbody")可用tBodies代替，同理
* tr ----- rows 行
* td ----- cells 例
* value只应用于 input
* 其他一般用“innerHTML”打印值
var name = tab.tBodies[0].rows[1].cells[0].innerHTML;
alert(name);
*
*/
/*各行设置背景及选中高亮
for(i = 0;i < tab.tBodies[0].rows.length;i++){
if(i % 2){
tab.tBodies[0].rows[i].style.background = "#CCC";
}else{
tab.tBodies[0].rows[i].style.background ="";
}
tab.tBodies[0].rows[i].onmouseover = function(){
oldColor = this.style.background;
this.style.background = "yellowgreen";
}
tab.tBodies[0].rows[i].onmouseout = function(){
this.style.background=oldColor;
}
}
*/
/*添加、删除*/
//toLowerCase() 忽略大小写方法
/**
* 搜索
* 1.直接比较
* 2.toLowerCase() 忽略大小写方法
*
* 3. 模糊搜索
* 搜索框的值 value 被搜索的值 str
* str.search(value) != -1
*
* 4. 多关键字 arr = str.split(" ");
* 原理：1）将搜索的字用空格隔开 变成一个数组/集合
* 2）外面循环被搜索的内容
* 3）里层循环被分割之后的数组
* 4）通过if(str[i].search(arr[j]) ！= -1);执行成功狗的操作即可
* 多关键字搜过可将2，3，直接整合一起搜索，返回结果
*
* 5. 筛选 默认dispaly = "none";符合的dispaly = "block";
*/
var name = document.getElementById("name");
var age = document.getElementById("age");
var sub = document.getElementById("submit");
var id = tab.tBodies[0].rows.length+1;//id重用问题
sub.onclick = function(){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = id++;
tr.appendChild(td1);
var td2 = document.createElement("td");
td2.innerHTML = name.value;
tr.appendChild(td2);
var td3 = document.createElement("td");
td3.innerHTML = age.value;
tr.appendChild(td3);
var td4 = document.createElement("td");
td4.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td4);
td4.getElementsByTagName("a")[0].onclick = function(){
tab.tBodies[0].removeChild(this.parentNode.parentNode);
}
tab.tBodies[0].appendChild(tr);
};
};
</script>
<input type="text" id="name"/> <input type="text" id="age"/><input type="button" value="提交" id="submit"/>
<table border="1" width ="500" id="tabs">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
<td></td>
</tr>
</tbody>
</table>
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
