码迷，mamicode.com
首页 > Web开发 > 详细

JS进阶

时间：2017-10-10 21:57:31      阅读：258      评论：0      收藏：0      [点我收藏+]

标签：.com   on()   删除节点   code   tom   check   bsp   text   arch   

一 DOM复习

二 节点操作

三 onsubmit事件

四  事件传播

五 焦点

六 模态对话框

一 DOM复习

控制html页面的所有标签对象（document，element）


1 属性操作
   （1）element.innerHTML element.Text

 (2) element.属性=值  
      
  getAttribute("属性名")
  setAttribute("属性名"，"属性值")
 
 （3）element.claaslist.add
      element.claaslist.remove()
二节点操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 200px;
            width: 200px;
            border:1px solid red;
        }
    </style>
  <script>
      window.onload=function () {
          var ele_add=document.getElementsByClassName(‘addBtn‘)[0];
    var ele_replace=document.getElementsByClassName(‘replaceBtn‘)[0];
    var ele_del=document.getElementsByClassName(‘delBtn‘)[0];
    ele_add.onclick=function () {
        //新建节点
        var ele_a=document.createElement(‘a‘);
        //属性值添加
        ele_a.innerHTML="点击";
        ele_a.setAttribute("href","http://baidu.com");
        ele_p=document.getElementsByClassName(‘c1‘)[0]
        ele_p.appendChild(ele_a)

        //新建节点
//        var ele_img=document.createElement("img");
        //属性的赋值
//        ele_img.src="Bootstrap_i2.png";
//        ele_img.height=50;
//        ele_img.width=50;
//        var ele_p1=document.getElementById(‘p1‘)
//        var ele_p=document.getElementsByClassName(‘c1‘)[0];
//        ele_p1.appendChild(ele_img)
//        ele_p.appendChild(ele_img)

    }
    ele_del.onclick=function () {
            //删除节点
        ele_p=document.getElementsByClassName(‘c1‘)[0];
        var ele_p1=document.getElementById(‘p1‘);
        ele_p.removeChild(ele_p1);

    }
    ele_replace.onclick=function () {
//        //替换节点
         var ele_a=document.createElement(‘a‘);
//       // 属性值添加
        ele_a.innerHTML="点击";
        ele_a.setAttribute("href","http://baidu.com");
        var ele_p1=document.getElementById(‘p1‘);
        var  ele_p=document.getElementsByClassName(‘c1‘)[0];
        ele_p.replaceChild(ele_a,ele_p1);
//
    }
    var eles=document.getElementsByClassName(‘del‘);
    for (var i=0;i<eles.length;i++){
        eles[i].onclick=function () {
            console.log(this.parentElement.parentElement);
            var ele_tr=this.parentElement.parentElement;
            var ele_tbody=document.getElementById(‘t1‘);
            ele_tbody.removeChild(ele_tr)
        }
    }
      }

</script>

</head>
<body>
<div class="c1">
    <p id="p1">p1</p>
</div>
<button class="addBtn">ADD</button>
<button class="delBtn">del</button>
<button class="replaceBtn">replace</button>
<hr>
<table>
    <tbody id="t1">
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td><button class="del">del</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td><button class="del">del</button></td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text"></td>
        <td><button class="del">del</button></td>
    </tr>
    </tbody>
</table>

<script>
//    var ele_add=document.getElementsByClassName(‘addBtn‘)[0];
//    var ele_replace=document.getElementsByClassName(‘replaceBtn‘)[0];
//    var ele_del=document.getElementsByClassName(‘delBtn‘)[0];
//    ele_add.onclick=function () {
        //新建节点
//        var ele_a=document.createElement(‘a‘);
        //属性值添加
//        ele_a.innerHTML="点击";
//        ele_a.setAttribute("href","http://baidu.com");
//        ele_p=document.getElementsByClassName(‘c1‘)[0]
//        ele_p.appendChild(ele_a)

        //新建节点
//        var ele_img=document.createElement("img");
        //属性的赋值
//        ele_img.src="Bootstrap_i2.png";
//        ele_img.height=50;
//        ele_img.width=50;
//        var ele_p1=document.getElementById(‘p1‘)
//        var ele_p=document.getElementsByClassName(‘c1‘)[0];
//        ele_p1.appendChild(ele_img)
//        ele_p.appendChild(ele_img)

//    }
//    ele_del.onclick=function () {
            //删除节点
//        ele_p=document.getElementsByClassName(‘c1‘)[0];
//        var ele_p1=document.getElementById(‘p1‘);
//        ele_p.removeChild(ele_p1);

//    }
//    ele_replace.onclick=function () {
//        //替换节点
//         var ele_a=document.createElement(‘a‘);
//       // 属性值添加
//        ele_a.innerHTML="点击";
//        ele_a.setAttribute("href","http://baidu.com");
//        var ele_p1=document.getElementById(‘p1‘);
//        var  ele_p=document.getElementsByClassName(‘c1‘)[0];
//        ele_p.replaceChild(ele_a,ele_p1);
//
//    }
    var eles=document.getElementsByClassName(‘del‘);
    for (var i=0;i<eles.length;i++){
        eles[i].onclick=function () {
            console.log(this.parentElement.parentElement);
            var ele_tr=this.parentElement.parentElement;
            var ele_tbody=document.getElementById(‘t1‘);
            ele_tbody.removeChild(ele_tr)
        }
    }
</script>

</body>
</html>

三 onsubmit事件

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

<form action="" id="submit">
    <p>姓名<input type="text"  name=‘user‘ id="username"></p>
    <p>年龄<input type="text"  name=‘age‘ id="age"></p>
    <input type="submit" >
</form>
<input type="text" id="test">
<script>
    var ele_form=document.getElementById(‘submit‘);
    var ele_user=document.getElementById(‘username‘);
    var ele_age=document.getElementById(‘age‘);
    ele_form.onsubmit=function (event) {
        var username=ele_user.value;
        var userage=ele_age.value;
        alert(username);
        alert(userage);
        //阻止默认事件发生
       // 方式一
        //return false
        //方式二
        event.preventDefault()
        //event对象：某次事件触发时所有的状态信息

    }



</script>
<script>
    var ele_test=document.getElementById(‘test‘);
    ele_test.onkeydown=function (e) {

//        if (e.keyCode==13){ alert(6666)}
        if (e.keyCode==13){ console.log(6666)}


    }

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

四  事件传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:500px;
            width:400px;
            border:1px solid red;
            background-color: greenyellow;
        }
        .c2{
            height:200px;
            width:200px;
            border:1px solid green;
            background-color: #2459a2;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
<script>
    var ele_b=document.getElementsByClassName(‘c1‘)[0];
    var ele_s=document.getElementsByClassName(‘c2‘)[0];
     ele_b.onclick=function () {
alert(6666)
     }
       ele_s.onclick=function (event) {
alert(222)
           event.stopPropagation();//阻止事件传播
     }
</script>
</body>
</html>

五 焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="search" placeholder="username">
//模拟placeholder 只是一个提示功能，而value是一个默认的值，如果不写点提交就可以发送出去
<script>
    var ele_search=document.getElementById(‘search‘);
    ele_search.onfocus=function () {
        this.value=‘‘

    }
     ele_search.onblur=function () {
        if (this.value.trim()==""){
            this.value=‘username‘
        }

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

六 模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            width: 100%;
            height: 2000px;

        }
        .shade{
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color:gray ;
            opacity: 0.5;
        }
        .hide{
            display: none;
        }
        .model{
            position: fixed;
            top:100px;
            left:40%;
            width:400px;
            height: 400px;
            background-color: white;
        }
    </style>
</head>
<body>
<div class="back">
        <button id="add">add</button>
</div>
<div class="shade hide"></div>
<div class="model hide"><form action="">
        <p>姓名<input type="text"></p>
        <p>年龄<input type="text"></p>

        <input type="button" id="btn" value="提交">
    </form>
</div>
<script>
    var ele_add=document.getElementById("add");
    var ele_mdoel=document.getElementsByClassName("model")[0];
    var ele_shade=document.getElementsByClassName("shade")[0];
    ele_add.onclick=function () {
        ele_mdoel.classList.remove("hide");
        ele_shade.classList.remove("hide")
    }
</script>
</body>
</html>

 

JS进阶

标签：.com   on()   删除节点   code   tom   check   bsp   text   arch   

原文地址：http://www.cnblogs.com/1a2a/p/7647678.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！