第十七篇

最新推荐文章于 2019-03-14 15:11:27 发布

a530609250

最新推荐文章于 2019-03-14 15:11:27 发布

阅读量133

点赞数

分类专栏：作业

本文链接：https://blog.csdn.net/a530609250/article/details/87182517

版权

作业专栏收录该内容

25 篇文章 4 订阅

订阅专栏

DOM：Document Object Model（文档对象模型）
节点属性:
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点

创建节点：
createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把 A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点

删除和替换节点：
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

style属性：
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
示例：
function out(){
document.getElementById(“cart”).style.backgroundColor="#f9f9f9";
document.getElementById(“cart”).style.borderBottom=“solid 1px #dcdcdc”;
document.getElementById(“cartList”).style.display=“none”;
}

元素属性应用：
var sTop=document.documentElement.scrollTop||document.body.scrollTop;

JavaScript对象及初识面向对象
var 对象名称=new Object( );
常见的内置对象
String（字符串）对象
Date（日期）对象
Array（数组）对象
Boolean（逻辑）对象
Math（算数）对象
RegExp对象
Array（数组）对象
length属性
sort( )、concat( )、join( )方法
RegExp对象
Math（算数）对象
round( )、max( )、min( )方法
Boolean（逻辑）对象
true或者false
toString( )方法
Date（日期）对象
get×××：获取年、月、日、时、分、秒等等
set×××：设置年、月、日、时、分、秒等等

构造函数：
示例
function Flower(name,genera,area,uses){
this.name=name;
…….
this.showName=function(){
alert(this.name);
}
}

原型对象：
function Flower(){

}
Flower.prototype.name="曼陀罗花";
Flower.prototype.genera="茄科 曼陀罗属";
Flower.prototype.area="印度、中国北部";
Flower.prototype.uses="观赏或药用";
Flower.prototype.showName=function() {
    alert(this.name);
}
var flower1=new Flower();
flower1.showName();
var flower2=new Flower();
flower2.showName();
alert(flower1.showName==flower2.showName);

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .scroll{width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative;}
        a{
            font-size: 14px;
            color: #39F;
            height: 18px;
            width: 20px;
            border: 1px solid #39F;
            text-decoration: none;
            display: block;
            float: left;
            margin-right:5px;
            text-align: center;
            background-color: #FFF;
            line-height: 20px;
        }
        a:hover {
            font-size: 14px;
            font-weight: bold;
            color: #FFF;
            background-color: #39F;
            border: 1px solid #39F;
            text-decoration: none;
            display: block;
        }
        #num {
            position:absolute;
            width:180px;
            height:25px;
            z-index:2;
            left:100px;
            top: 160px;
        }


    </style>
</head>
<body>
<div class="scroll">
    <div id="num">
        <a href="javascript:change('1.gif')">1</a>
        <a href="javascript:change('2.gif')">2</a>
        <a href="javascript:change('3.jpg')">3</a>
        <a href="javascript:change('4.jpg')">4</a>
        <a href="javascript:change('5.gif')">5</a>
    </div>
    <img src="img/1.gif" alt="图片" id="photo"/>
</div>

</body>

<script>
    function change(dd){
        var p=document.getElementById("photo");
        p.setAttribute("src","img/"+dd);
    }




</script>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tou</title>
    <style>
        body{font-size: 14px; font-family: "Arial", "微软雅黑"; line-height: 28px;}
    </style>
</head>
<body>
<div id="intro"></div>
<script>
    function Animal(nama,color,age){
        this.name=nama;
        this.color=color;
        this.age=age;
    }
    function Poultry(name,color,age,leg){
        Animal.call(this,name,color,age);    //继承属性
        this.leg=leg;
    }
    Poultry.prototype=new Animal();    //继承方法
    Poultry.prototype.info=function(){
        var p=document.createElement("p");
        var str="我是一个"+this.color+"的"+this.name+"，我已经"+this.age+"岁了，我有"+this.leg+"条腿";
        p.innerHTML=str;
        return p;
    };
    var poultry1=new Poultry("小狗狗","灰色",1,4);
    var poultry2=new Poultry("茶杯猫","白色",2,4);
    var poultry3=new Poultry("母鸡","红色",1,2);
    document.getElementById("intro").appendChild(poultry1.info());
    document.getElementById("intro").appendChild(poultry2.info());
    document.getElementById("intro").appendChild(poultry3.info());

</script>
</body>
</html>

a530609250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十七篇

DOM：Document Object Model（文档对象模型）节点属性:parentNode 返回节点的父节点childNodes 返回子节点集合，childNodes[i]firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点lastChild 返回节点的最后一个子节点nextSibling 下一个节点previousSibling 上...
复制链接

扫一扫