js教程 数组、函数、面向对象、DOM
js教程 数组、函数、面向对象
一：数组：
在js中数组可以添加任意位置的任意类型
js中常用的函数：
.pash(); 从尾部压入
.pop(); 从尾部取出并移除
.unshift(); 从头部压入
.shift(); 从头部取出并移除
.indexOf();
.slice(2,4); 裁切，[24），不对数据产生影响，从第几个开始裁，裁到第几个
.splice(2,4); 裁切对原数组产生影响，从第几个开始裁，裁几个
二：函数：
在js中函数的定义：
function name(){
}
在js中的函数可以随时的增添元素，类似于Java 中的key：value 的类型：
三：js的面向对象：
js的面向对象是通过原型机制来实现的，和java完全不同
例如：
function Student(name, sex, age) {
this.name = name;
this.sex = sex;
this.age = age;
this.sayHello = function() {
console.log(this.name + " says hello");
};
}
function MidSchoolStudent(name,sex,age) {
this.name = name;
this.sex = sex;
this.age = age;
}
//原型
MidSchoolStudent.prototype = new Student();
var stu1 = new Student("张三", "男", 20);
console.log(stu1.name);
console.log(stu1["sex"]);
stu1.sayHello();
stu1.birthday = "2000-1-1";
console.log(stu1);
//移除一个属性
delete stu1.birthday;
console.log(stu1);
//js的面向对象（封装、继承、多态）是通过原型机制来实现的，和java完全不同
var stu2 = new MidSchoolStudent("李四","女",35);
stu2.sayHello();四：DOM：Doucment Object Model
在js 中将每一个元素当成一个元素：
DOM的增删改查：
一、DOM的查询：
通过 id 进行查询：
通过指定的元素名称进行查询，如div。返回类数组
通过指定的类名称进行查询。返回类数组。
1.document.getElementById("id") 2.document.getElementsByName("aaa")，返回类数组 3.document.getElementsByClassName("bbb"); 返回类数推荐使用 父dom.querySelector（要查询的元素名称、类型名、id）：进行查询
document.querySelector(".header")
二、DOM的增加：
实例：增加一个span元素，span中增加文字：
1、首先通过查询获取html文档中的元素对象
2、通过createElement 创建一个新的元素
3、可以给元素增加一些style 属性，或者通过 innerTest 增加文字
4、通过appendChild()，增加元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="header"></div>
<script type="text/javascript">
//获取一个元素
var header = document.querySelector(".header");
//创建一个元素
var span = document.createElement("span");
span.innerText = "新增的元素";
header.appendChild(span);
</script>
</body>
</html>实例：在列表增加元素：
1、创建 tr 在 tr下面增加一列的 td的个数，至于里面的内容暂且用数字代替
2、获取当前文章tr 的父类
3、在父类中appendChild（）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#tbl {
margin: 0 auto;
border-collapse: collapse;
}
#tbl tr>td {
border: 1px solid #ccc;
padding: 30px 30px;
text-align: center;
}
</style>
</head>
<body>
<table id="tbl">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script type="text/javascript">
//创建一个tr
var tr = document.createElement("tr")
for (var i = 0; i < 3; i++) {
var d = document.createElement("td");
d.innerText = i + 4;
tr.appendChild(d);
}
//获取父类对象
var tr1 = document.querySelector("tr");
var tbl = tr1.parentElement;
tbl.appendChild(tr);
</script>
</body>
</html>三、DOM的修改：
通过重新赋值
四、DOM的删除：
移除自身：自身dom.remove();
通过父类移除自身：父类dom.removeChild(子类dom);
DOM的
1、获取父类：parentElement();
2、获取子类：children；返回类数组，所有的子类
3、获取上一个元素（兄）：previousElementSibling:获取兄元素，如果没有，返回null；
4、获取下一个元素（弟）：nextElementSibling：获取弟元素，如果没有，返回null；
常用的dom对象的属性和方法：
1、tagName(): 获取当前元素的名称
2、innerText(): 返回html元素的内容
3、innerHTML: 返回html的的内容
4、style: 获取元素的行内样式。
5、className: 获取class 的名字
6、classList.add(): 在class 集合中增加一个
7、父类.insertBefore(插入的元素，在我之前); 插入有个子元素到某个子元素的前面
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mydiv" class="outer" style="color: blue;"><span>你好</span></div>
<script type="text/javascript">
//获取
var mydiv = document.getElementById("mydiv");
console.log(mydiv.tagName.toLowerCase());
console.log(mydiv.innerText);
console.log(mydiv.innerHTML);
console.log(mydiv.id);
//修改
mydiv.innerText = "我根本已经不好了";
mydiv.style.color = "red";
//查看style对象
console.log(mydiv.style);
//修改背景颜色的两种方式
mydiv.style.backgroundColor = "pink";
mydiv.style["background-color"] = "green";
//获取class 名称 并重新赋值
console.log(mydiv.className);
mydiv.className = "inner";
//在class中增加、删除
mydiv.classList.add("a");
mydiv.classList.add("b");
mydiv.classList.add("c");
mydiv.classList.remove("b");
</script>
</body>
</html>文章原创，转载请注意出处，来源：刘广法博客，不保留必追究
