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>
文章原创,转载请注意出处,来源:刘广法博客,不保留必追究