JSAP101

1、DOM
1）文档对象模型
这里写图片描述

文档：把一个Html文件看成一个文档，所以把这个文档看成一个对象。XML文件也可以看成一个文件。XML侧重于存储数据，html主要以展示为主。一个页面就是一个文档。
页面中的每个标签，都是一个元素，每个元素都可以看成是1个对象。
页面中所有的内容都是节点：标签，属性，文本。html是文档的根元素。由文档及文档中所有的元素（标签）组成的一个树形结构图脚树状图（DOM树）
DOM是用来操作页面元素的。
2）DOM初体验

<input type="button" value="弹窗" onclick="alert('hello!')"/><!--注意用单引号-->

3、为元素注册事件
1）事件：以on开头
js代码应该和html代码分离

function f1(){
...
}
//可以通过事件调用函数
<input type="button" value="显示效果" onclick="f()"/>

//分离js与html,利用id
<input type="button" value="点击" id="btn"/>
<script>
function f(){
alert("分离");
}
//document.getElementById("ids属性名");返回的是一个元素对象
var btnObj=document.getElementById("btn");
//相当于为按钮注册了（点击）事件
btnObj.onclick=f;//不必加括号
</script>

最终的代码，不再在script外定义函数（以下代码均在body标签内）：
这里写图片描述
使用匿名函数
若把input和script标签互换位置，则会报错，因为此时还没有btn这个id的值

//案例：点击按钮显示图片和设置宽高
<body>
<input type="button" value="显示图片" id="btn"/>
<img src="" id="im"/>
<script>
//点击按钮时设置img标签的src属性
//获取按钮
  var btnObj=document.getElementById("btn");
  btnObj.onclick=function () {
      var imObj=document.getElementById("im");
      imObj.src="timg.jpg";
      //设置图片大小
      imObj.width=300;
      imObj.height=400;
  };
</script>
</body>

//案例：点击按钮设置p标签的文本内容
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">这是p标签</p>
<script>
document.getElementById("btn").onclick=function () {
    document.getElementById("p1").innerText="我是一个p标签";
}

//案例：点击按钮修改超链接的地址及文本内容
<body>
<input type="button" value="设置p的内容" id="btn"/>
<p id="p1">这是p标签</p>
<script>
document.getElementById("btn").onclick=function () {
    document.getElementById("p1").innerText="我是一个p标签";
}
</body>

//案例点击按钮设置所有P标签的内容
<body>
<input type="button" value="显示效果" id="btn"/>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<p>she is young.</p>
<script>
document.getElementById("btn").onclick=function(){
    //根据标签名字获取标签
    var pOBJ=document.getElementsByTagName("p");
    console.log(pOBJ);//是一个伪数组
    //循环遍历这个伪数组
    for(var i=0;i<pOBJ.length;i++){
        pOBJ[i].innerText="no way!"; }


}
</script>
</body>

//案例：点击按钮修改图片的alt与title属性
<body>
<input type="button" value="显示效果" id="btn"/>
<img src="timg.jpg" alt="cc" title="dd"/>
<script>
document.getElementById("btn").onclick=function(){
    //返回的是一个伪数组
    var imgObjs=document.getElementsByTagName("img");
    imgObjs[0].alt="修改";
    imgObjs[0].title="完成";
}
</script>

//案例：点击按钮修改多个文本的值
<body>
<input type="button" value="修改文本框" id="btn"/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<input type="text" value=""/><br/>
<script>
//根据id获取按钮
//为按钮注册点击事件，添加事件处理函数
    document.getElementById("btn").onclick=function () {
        //获取所有的文本框
       var inputs=document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            //判断这个元素是不是按钮
            if(inputs[i].type!="button") {
                inputs[i].value="你好";
            }

        }


    }
</script>
</body>

//案例：点击每个图片弹出对话框
<body>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt="" id="im1"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt=""id="im2"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" alt="" id="im3"/>
<script>
var imgObjs=document.getElementsByTagName("img");
//循环遍历
for(var i=0;i<imgObjs.length;i++){
    imgObjs[i].onclick=function () {
        alert("延禧攻略");
    }

}
</script>

</body>

//点击按钮修改其value属性
<body>
<input type="button" value="按钮" id="btn"/>
<script>
    var btnObj=document.getElementById("btn");
    btnObj.onclick=function () {
        btnObj.value="你好";
    }
</script>

</body>

案例：点击图片修改其宽高
<body>
<img src="timg.jpg" alt="" id="im"/>
<script>
    var imgObj=document.getElementById("im");
    imgObj.onclick=function () {
        this.width="200";
        this.height="700";
    }
</script>

</body>

案例：按钮的排他功能
<body>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<input type="button" value="吃了吗"/>
<script>
//获取所有的按钮
    var btnObjs=document.getElementsByTagName("input");
    for(var i=0;i<btnObjs.length;i++){
        btnObjs[i].onclick=function () {
            for(var j=0;j<btnObjs.length;j++){
                btnObjs[j].value="吃了吗";
            }
            this.value="还没有";

        }
    }
</script>

</body>

//for循环在加载页面时就已经完成，而点击事件只在点击时才触发执行。因此上面的this.value不能写成btnObjs[i]，因为此时已经循环注册完事件，i=btnObjs.length

//点击图片修改路径
<body>
<a id="ak" href="u=2124789894,3346559232&fm=11&gp=0.jpg"><img id="im" src="timg.jpg"/></a>
<script>
document.getElementById("im").onclick=function () {
    this.src=document.getElementById("ak").href;
}
</script>

</body>

//点击按钮切换图片
<body>
<input type="button" value="显示大图" id="btn"/>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" id="im">
<script>
    //通过函数获取对象
function my$(id) {
return document.getElementById(id);
}
my$("btn").onclick=function () {
    my$("im").src="timg.jpg";
};
</script>

</body>

//点击按钮选择性别和兴趣

//修改兴趣
<body>
<input type="button" value="修改性别" id="btn1"/>
<input type="radio" name="sex" value="1" id="rad1"/>male
<input type="radio" name="sex" value="2"/>female
<input type="radio" name="sex" value="3"/>secret

<script>
    function my$(id) {
        return document.getElementById(id);
    }
    //规律：在表单标签中，如果属性和值只有一个，并且是这个属性本身，那么
    //在写js代码时，进行DOM操作的时候，这个属性值，是布尔类型就可以了
    my$("btn1").onclick=function(){
        my$("rad1").checked=true;//不用checked，只用false,true
    };

</script>
<br />
<input type="button" value="修改兴趣" id="btn2">
<input type="checkbox" value="1" name="hobby" id="ck1"/>游戏
<input type="checkbox" value="2" name="hobby"/>睡眠
<script>
    my$("btn2").onclick=function () {
        my$("ck1").checked=true;
    }
</script>
</body>

案例选择下拉框和文本域的相关属性
<body>
<input type="button" value="点菜" id="btn"/>
<select>
    <option value="1">炸鸡蛋</option>
    <option value="2">龙虾饭</option>
    <option value="3" id="op1">凉拌鸡肉</option>
    <option value="4">西式炖菜</option>
</select>
<!--<script src="xx.js"></script>可引用js文件-->
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    my$("btn").onclick=function () {
        //点击按钮选择菜
        my$("op1").selected=true;
    };
</script>

<textarea name="" id="tt" cols="30" rows="10" readonly="readonly">
    今天半价吃寿司。有鸭胸芝士，鳗鱼蒸饭。
</textarea>
<input type="button" value="注册" id="btn2">
<script>
//disabled--这个属性是禁用的意思
//html中属性和值是自身的，且只有一个的，可以只写这个属性，不用赋值
my$("btn2").onclick=function () {
    my$("tt").value="太美味了，下次尝尝炸鸡饭";
}

</script>
</body>

案例：点击按钮设置div样式
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv"></div>
<script>
    //凡是css属性中多个单词的写法，在js代码中
    //DOM操作时，有分号的属性不用写分号，改为首字母大写
function my$(id) {
    return document.getElementById("id")
}
my$("btn").onclick=function () {
    my$("dv").style.width="300px";
    my$("dv").style.width="200px";
    my$("dv").style.backgroundColor="red";
};
</script>
</body>

//案例：点击按钮显示和隐藏
<input type="button" value="hide" id="btn"/>
<input type="button" value="display" id="btn2"/>
<div id="dv">
</div>
<script>
    function my$(id) {
        return document.getElementById(id)
    }

    my$("btn").onclick = function () {
        my$("dv").style.display = "none";
    }
    my$("btn2").onclick = function () {
        my$("dv").style.display = "block";
    }
</script>

div的显示和隐藏通过类样式实现
<body>
<input type="button" value="设置样式" id="btn"/>
<div id="dv">
</div>
<script>
    function my$(id) {
        return document.getElementById(id)
    }
    my$("btn").onclick=function () {
        //在js代码中DOM操作时，设置元素的类样式，不用class
        //关键字，应该使用className
        my$("dv").className="cls";
    }
</script>
</body>

//案例：网页开关灯
<head>
    <meta charset="UTF-8">
    <title>abc</title>
    <style>
        .cls {
            background-color: black;
        }
    </style>
</head>
<body>
<input id="btn" type="button" value="light">
<script>
    function my$(id) {
        return document.getElementById(id)
    }

    my$("btn").onclick = function () {//获取body标签
        document.body.className = document.body.className != "cls" ? "cls" : "";
    };
</script>
</body>
</html>

posted on 2018-09-14 19:51 Tanqurey 阅读(377) 评论(0) 编辑收藏举报