码迷,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
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!