js面向对象编程笔记

浏览数：52 / 时间：2015年06月09日

1. 基础

面向对象实例

function Lecture(name, teacher) {
  this.name = name;
  this.teacher = teacher;
}
Lecture.prototype.display = function () {
  return this.teacher + ‘ is teaching ‘ + this.name;
}
//var le = new Lecture(‘数学‘, ‘李四‘);
//console.log(le.display());

function Schedule(lectures) {
  this.lectures = lectures;
}
Schedule.prototype.display = function () {
  var str = ‘‘;
  for (var i = 0; i < this.lectures.length; i++) {
    str += this.lectures[i].display() + ‘\n‘;
  }
  return str;
}
var sc = new Schedule([
new Lecture(‘yuwen‘, ‘aaa‘),
new Lecture(‘shuxue‘, ‘bbb‘),
new Lecture(‘wuli‘, ‘ccc‘)
]);
sc.display();

View Code

操作页面元素实例

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
    var lis = document.getElementsByTagName(‘li‘);
    for (var i = 0; i < lis.length; i++) {
        lis[i].style.border = ‘1px solid #f00‘;
    }
    var item1 = document.getElementById(‘item1‘);
    item1.parentNode.removeChild(item1);
}
</script>
</head>
<body>
<ul>
    <li id="item1">item1</li>
    <li id="item2">item2</li>
    <li id="item3">item3</li>
    <li id="item4">item4</li>
</ul>
</body>
</html>

View Code

鼠标移入移出事件实例

        lis[i].onmouseover = function() {
            this.style.backgroundColor = ‘blue‘;
        }
        lis[i].onmouseout = function() {
            this.style.backgroundColor = ‘white‘;
        }