jQuery第四章課後作業

suixinCaesar發表於2018-07-19
jQuery

3.建立一個物件Student，表示一個學生物件，要求如下。

（1）新增屬性：姓名，年齡和自我介紹。

（2）新增方法：輸出該學生的姓名，年齡和自我介紹。

（3）在頁面上顯示該方法輸出的資訊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>建立物件顯示自我介紹</title>
</head>
<body>
    <script>
        function Student(name,age,pre) {
            this.name=name;
            this.age=age;
            this.pre=pre;
        }
            Student.prototype.getName=function () {
                return this.name;
            }
            Student.prototype.getAge=function () {
                return this.age;
            }
            Student.prototype.getPre=function () {
                return this.pre;
            }
        var studen = new Student("高樂樂","15","我叫高樂樂，我是一個初中三年級的學生，我非常喜歡音樂和打籃球。")
        document.write("姓名："+studen.getName()+"<br>年齡："+studen.getAge()+"<br>自我介紹:"+studen.getPre())
    </script>
</body>
</html>

4.建立一個建構函式Student，表示學生，要求如下。

（1）新增屬性：姓名，年齡和自我介紹。

（2）新增方法：在一個p標籤中顯示該姓名，年齡和自我介紹。

（3）建立兩個學生物件，輸入兩個學生的姓名，年齡和自我介紹。

（4）在頁面中顯示兩個物件的方法輸出的資訊。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>建立建構函式顯示自我介紹</title>
</head>
<body>
<p id="p"></p>
    <script>
        function Student(name,age,pre) {
            this.name=name;
            this.age=age;
            this.pre=pre;
        }
        Student.prototype.getP=function () {
            var p = document.createElement("p")//建立一個p標籤
            p.innerHTML="姓名："+this.name+"<br>年齡："+this.age+"<br>自我介紹:"+this.pre;
            return p;
        }
        var student1 = new Student("王小明","16","我是一名高中一年級的學生，升高1.8米，很帥，我喜歡學習語文和英語。")
        var student2 = new Student("黃妞妞","6","我今年6歲了，非常可愛，馬上就可以上小學了，就可能有好多好多的小朋友了。")
        document.getElementById("p").appendChild(student1.getP());
        document.getElementById("p").appendChild(student2.getP());
    </script>
</body>
</html>

 

5.建立一個建構函式Animal,使用繼承完成如下要求。

（1）建構函式Animal有自己的屬性：名稱（name），年齡（age）和顏色（color）。

（2）建立建構函式Poultry，繼承Animal的屬性，並且有屬於自己的屬性：腿數：（leg）。

（3）建立Poultry的方法info，輸出名稱，年齡，顏色和腿數等資訊。

（4）建立物件，把方法中的相關資訊輸出到頁面中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用繼承</title>
</head>
<body>
<P id="p1"></P>
    <script>
        function Animal(name,age,color) {
            this.name=name; //名稱
            this.age=age; //年齡
            this.color=color; //顏色
        }
        function Poultry(name,age,color,leg) {
            Animal.call(this,name,age,color);
            this.leg=leg;
        }
             Poultry.prototype.info=function () {
                 var str = "我是一個"+this.color+"的"+this.name+",我已經"+this.age+"歲了，我有"+this.leg+"條腿。";
                 var p = document.createElement("p");
                 p.innerHTML=str;
                 return p;
             }
         var pou1=new Poultry("小狗狗","1","灰色","4");
        var pou2=new Poultry("茶杯貓","2","白色","4");
        var pou3=new Poultry("母雞","1","紅色","2");
        var doc = document.getElementById("p1");
        doc.appendChild(pou1.info());
        doc.appendChild(pou2.info());
        doc.appendChild(pou3.info());
    </script>
</body>
</html>

 

相關文章