JavaScript Intermediate Notes Chapter 1_javascript skills

1. Review
First, let’s review the DOM and events.
1. DOM
DOM is the most widely used in JavaScript, and most web development programming languages ​​provide related implementations. Gives developers a unified interface.
Look at the example below:

<title>demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ul> <li> </li>Teacher Li-English<li> </li>Teacher Zhang-Mathematics<li> </li>Teacher Liu-Physics</ul>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

Wait for all content of the page to be loaded Finally, obtain the li element in the page through the getElementsByTagName() method, and then loop to change the color of the li element to red.
Look at the second DOM example, which will delete the second li element from the page.

<title> </title>demo<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <ul> <li> </li> <li>Teacher Li-English</li> <li>Teacher Zhang-Mathematics</li> </ul>Teacher Liu-Physics
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Now get the li element The parent node ul element, and then use the removeChild() method to delete the li element specified under the ul element.

Of course, you can also use parentNode directly to directly obtain the parent node of the li element. The code is as follows: Copy code

The code is as follows:


window.onload = function(){
//Add color to Dom elements
var li = document.getElementsByTagName("li");
for(var i=0;ili[i] .style.color = "red";
}
//Delete the second li element
//var ul = document.getElementsByTagName("ul")[0]; //Index starts from 0
//ul.removeChild( li[1] ); //The index starts from 0
li[1].parentNode.removeChild( li[1] ); //The index starts from 0, use parentNode directly Get the parent node of the li element

}

2. Events

events are the glue that binds all user interactions in the application. DOM and events are the golden partners in JavaScript (haha, here’s an advertising slogan), and they determine the foundation of the form of modern web applications.

Look at the example below: <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">demo <ul> <li> </li> <li> </li>Teacher Li-English<li> </li>Teacher Zhang-Mathematics</ul> Teacher Liu-Physics

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]
本例中，获取的li元素后，然后循环给元素添加事件，添加了onmouseover和onmouseout事件。当滑入时，改变颜色，滑出时，恢复颜色。
事件是复杂多变的，上例是一个最简单的例子，所以基本上没遇到问题。在以后，我们将遇到 比如 事件冒泡，事件传递 ，取消事件等问题。
3，DOM和事件
在DOM和事件交互的基础上产生了DHTML，它的实质就是JavaScript事件和DOM元素上CSS属性之间的交互。DHTML存在的意思就是组合这两个技术，然后做它的事情。
二，简单的面向对象开发
我们先来感受一下JavaScript面向对象是怎么一个写法。下面代码展示了学校中的课程名和老师的信息。

<script type="text/javascript"> /* 示例用一个对象组合表示学校中的课程 'Lecture'类 用name和teacher作为参数 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //'Lecture'类的一个方法，用于生成一条信息 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new来构造一个新的函数，然后调用display方法 var L = new Lecture("李老师","英语"); var L_msg = L.display(); alert(L_msg); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

最终结果会输出“李老师 是教 英语 的。”
在此例子的基础上，我们再定义个函数，用来输出所有的课程信息。代码如下所示：

<script type="text/javascript"> /* 示例用一个对象组合表示学校中的课程 'Lecture'类 用name和teacher作为参数 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //'Lecture'类的一个方法，用于生成一条信息 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new来构造一个新的函数，然后调用display方法 var L = new Lecture("李老师","英语"); var L_msg = L.display(); //alert(L_msg); //新定义一个'AllLecture'类 //用'lec'作为参数，lec是一个数组 function AllLecture( lec ){ this.lec = lec; } //'AllLecture'类的一个方法，用于生成所有的课程信息 //需要循环输出'lec' AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i<this.lec.length;i++){ str += this.lec[i] + "\n"; } return str; } //下面使用new来够造一个新的函数，用于生成所有的信息 //函数的参数是数组。 //使用'Lecture'类来生成数组的值。 var B = new AllLecture( [ new Lecture("李老师","英语").display() , new Lecture("张老师","数学").display() , new Lecture("刘老师","物理").display() ] ); var B_str = B.display(); alert(B_str); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

最终结果会输出：

本例中， 数组的值都调用了 display()方法。
改进如下：
在

复制代码 代码如下:

AllLecture.prototype.display=function(){
var str = "";
for(var i=0;istr += this.lec[i] + "\n";
}
return str;
}

中的this.lec[i] 处，统一调用display()方法。然后去掉数组的值调用display()。修改后的代码如下：

<script type="text/javascript"> /* 示例用一个对象组合表示学校中的课程 'Lecture'类 用name和teacher作为参数 */ function Lecture(name,teacher){ this.name=name; this.teacher=teacher; } //'Lecture'类的一个方法，用于生成一条信息 Lecture.prototype.display=function(){ return this.name + " 是教 "+this.teacher +" 的。" ; } //下面用new来构造一个新的函数，然后调用display方法 var L = new Lecture("李老师","英语"); var L_msg = L.display(); //alert(L_msg); //新定义一个'AllLecture'类 //用'lec'作为参数，lec是一个数组 function AllLecture( lec ){ this.lec = lec; } //'AllLecture'类的一个方法，用于生成所有的课程信息 //需要循环输出'lec' AllLecture.prototype.display=function(){ var str = ""; for(var i=0;i<this.lec.length;i++){ //str += this.lec[i] + "\n"; str += this.lec[i].display() + "\n"; //把display()放到这里调用 } return str; } //下面使用new来够造一个新的函数，用于生成所有的信息 //函数的参数是数组。 //使用'Lecture'类来生成数组的值。 //var B = new AllLecture( [ new Lecture("李老师","英语").display() , new Lecture("张老师","数学").display() , new Lecture("刘老师","物理").display() ] ); var B = new AllLecture( [ new Lecture("李老师","英语") , new Lecture("张老师","数学") , new Lecture("刘老师","物理") ] ); var B_str = B.display(); alert(B_str); </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

同样也可以输出跟上例一样的结果。
这是一个简单的面向对象开发的例子，随着JavaScript逐渐被程序员所接受，设计良好的面向对象代码也日益普及。在后面的笔记中，你将会看到更多的面向对象程序代码。
三，小结
本章回顾了DOM和事件，然后通过例子简单的讲解了面向对象的开发。