JavaScript初探三

时间：2021-04-30 22:30:47
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <ul id="ulList">asdfdasfasdf

        <li>柯震东</li>

        <li>蓝翔技校</li>

        <li>新东方烹饪学校</li>

        <li>北大青鸟</li>

    </ul>

</body>

</html>

<script type="text/javascript">

    var ulObj = document.getElementById("ulList");

    //dom元素.children 获取到所有的子节点(html标签)

    //dom元素.childNodes获取所有的节点,包含文本节点--了解即可,用的不多

    // alert(ulObj.childNodes.length+"|||"+ulObj.children.length);

    //01.获取所有的子节点

    //for (var i = 0; i < ulObj.children.length; i++) {

    //    alert(ulObj.children[i].innerHTML);

    //}

    //02.快速获取老大,老末

    //firstChild获取到的是文本节点--lastChild

    //firstElementChild获取html节点--lastElementChild

    // alert(ulObj.firstChild.textContent);

  //  alert(ulObj.firstElementChild.innerHTML);

    //03.相对定位

    //nextElementSibling获取下一个html节点

    ulObj.firstElementChild.nextElementSibling.style.backgroundColor = "green";

    ulObj.lastElementChild.previousElementSibling.style.backgroundColor = "red";

</script>

　　

    <!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        div {

            border: 1px solid #0094ff;

            width: 400px;

            margin: 10px auto;

            text-align: center;

        }

        table {

            border: 1px solid #0094ff;

            border-collapse: collapse;

            width: 400px;

            margin: 10px auto;

            text-align: center;

        }

        td {

            border: 1px solid #0094ff;

        }

    </style>

    <script type="text/javascript">

        alert(document.getElementById("textH"));

    </script>

</head>

<body>

    <div>

        <input type="button" value="新增菜单" id="btnAddOpt" />

        菜单:

        <select id="selList">

            <option>水煮肉片</option>

            <option>鱼香肉丝</option>

            <option>番茄炒蛋</option>

        </select>

        数量:

        <div id="divNumEdit" style="width: auto; height: auto; padding: 0px; margin: 0px; display: inline-block; border: 0px;">

            <input type="button" value="+" id="btnAddTic" onclick="NumChange(this)" style="cursor: pointer;" />

            <span id="ticketNums">0</span>

            <input type="button" value="-" id="btnSubTic" onclick="NumChange(this)" style="cursor: pointer;" />

        </div>

    </div>

    <div>

        <input type="button" value="新增订单" id="btnAddList" />

    </div>

    <table id="tbList">

        <tr>

            <td>序号</td>

            <td>菜名</td>

            <td>数量</td>

            <td>编辑</td>

        </tr>

        <tr>

            <td>

                <input type="checkbox" class="chkOne" />

                1 </td>

            <td foodindex="0">水煮肉片</td>

            <td>2</td>

            <td><a href="javascript:void(0)">删除</a> <a href="javascript:void(0)" onclick="IntoEdit(this)">编辑</a></td>

            <!--这里传递进去的this 是a标签-->

        </tr>

    </table>

    <div style="text-align: left; padding-left: 2px; width: 396px">

           <input type="checkbox" id="chkAll" /><label for="chkAll">全选</label>

        <a href="javascript:delCheckedTr();">批量选中</a>

    </div>

</body>

</html>

<script type="text/javascript">

    var oldFoodName;//保存开始的菜名

    var oldFoodNum;//保存开始的数量

    //----------------封装的方法

    //修改 数量的方法

    function NumChange(inputObj) {

        switch (inputObj.value) {

            case "+":

                //按钮     div       span

                var oldNum = inputObj.parentNode.children[1].innerHTML;

                oldNum++;

                inputObj.parentNode.children[1].innerHTML = oldNum;

                break;

            case "-":

                //按钮     div       span

                var oldNum = inputObj.parentNode.children[1].innerHTML;

                oldNum--;

                oldNum = oldNum < 0 ? 0 : oldNum;

                inputObj.parentNode.children[1].innerHTML = oldNum;

                break;

        }

    }

    //进入编辑状态

    function IntoEdit(aObj) {

        //根据a标签获取所在的tr

        var editTr = aObj.parentNode.parentNode;

        //修改第二个td 为select标签

        var td01 = editTr.children[1];//获取第二个单元格 索引

        var cloneSelect = document.getElementById("selList").cloneNode(true);//克隆select标签--并且设置select标签的value值

        cloneSelect.value = td01.innerHTML; //获取里面的innerHTML值

        //------------保存原始菜名

        oldFoodName = td01.innerHTML;

        //------------保存原始菜名

        td01.innerHTML = ""; //清空td的innerHTML

        td01.appendChild(cloneSelect);  //将克隆的select标签追加到td里面去

        //修改第三个td为数量编辑框

        var td02 = editTr.children[2]; //获取第三个td的

        var cloneNumEdit = document.getElementById("divNumEdit").cloneNode(true); //克隆数量编辑框

        cloneNumEdit.children[1].innerHTML = td02.innerHTML; //修改数量编辑框里面的数量

        //------------保存原始数量

        oldFoodNum = td02.innerHTML;

        //------------保存原始数量

        td02.innerHTML = ""//清空innerHTML

        td02.appendChild(cloneNumEdit);  //将数量编辑框追加到td02里面去

        //修改第四个td里面的a标签

        var td03 = editTr.children[3];   //获取第四个td/

        //修改innerHTML即可

        td03.innerHTML = "<a href='javascript:void(0)' onclick='SaveEdit(this)'>保存</a> <a href='javascript:void(0)' onclick=' ExitEdit(this)'>取消</a>"

    }

    //保存修改的方法

    function SaveEdit(aObj) {

        //根据a标签获取所在的tr

        var editTr = aObj.parentNode.parentNode;

        //还原第二个单元格

        var td01 = editTr.children[1]; //获取第二个单元格

        td01.innerHTML = td01.children[0].value;//获取里面select标签的value值  //将value值设置给单元格的innerHTML

        //还原第三个单元格

        var td02 = editTr.children[2]; //获取第三个单元格

        //                 td   div            span    当然可以用id拿

        td02.innerHTML = td02.children[0].children[1].innerHTML;   //获取里面的span的innerHTML将 innerHTML设置给第三个单元格

        //还原第四个单元格

        var td03 = editTr.children[3];//获取第四个单元格

        td03.innerHTML = "<a href='javascript:void(0)' >删除</a> <a href='javascript:void(0)'onclick='IntoEdit(this)'>编辑</a>";

    }

    //推出编辑的方法

    function ExitEdit(aObj) {

        //根据a标签获取所在的tr

        var editTr = aObj.parentNode.parentNode;

        //还原第二个单元格

        editTr.children[1].innerHTML = oldFoodName;//还原原始菜名

        //还原第三个单元格

        editTr.children[2].innerHTML = oldFoodNum;//还原原始

        //还原第四个单元格

        editTr.children[3].innerHTML = "<a href='javascript:void(0)' >删除</a> <a href='javascript:void(0)'onclick='IntoEdit(this)'>编辑</a>";

    }

</script>

　　

网页换肤

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="css/01.css" rel="stylesheet" id="cssLink" />

</head>

<body>

    <ol>

        <li class="skinChange" style="background-color: red">1</li>

        <li class="skinChange" style="background-color: yellow">2</li>

        <li class="skinChange" style="background-color: blue">3</li>

        <li class="skinChange" style="background-color: green">4</li>

    </ol>

    <div id="picDiv"></div>

    <input type="button" />

</body>

</html>

<script type="text/javascript">

    var liObjs = document.getElementsByClassName("skinChange");

    for (var i = 0; i < liObjs.length; i++) {

        liObjs[i].onclick = function () {

            //获取link标签cssLink

            var linkObj = document.getElementById("cssLink");

            switch (this.innerHTML) {

                case "1":

                    linkObj.href = "css/0" + i + ".css";

                    break;

                case "2":

                    linkObj.href = "css/02.css";

                    break;

                case "3":

                    linkObj.href = "css/03.css";

                    break;

                case "4":

                    linkObj.href = "css/04.css";

                    break;

            }

        }

    }

    alert(liObjs[0].onclick);

    //li标签.onclick()

    //function () {

    //    //获取link标签cssLink

    //    var linkObj = document.getElementById("cssLink");

    //    switch (this.innerHTML) {

    //        case "1":

    //            linkObj.href = "css/0" + i + ".css";

    //            break;

    //        case "2":

    //            linkObj.href = "css/0" + i + ".css";

    //            break;

    //        case "3":

    //            linkObj.href = "css/0" + i + ".css";

    //            break;

    //        case "4":

    //            linkObj.href = "css/0" + i + ".css";

    //            break;

    //    }

</script>

　　

简单登陆页面JS特效

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <input type="text" id="userName" value="请输入用户名" style="color: #c8c1c1" />

    <br />

    <input type="text" id="userPass" value="请输入密码" style="color: #c8c1c1" />

</body>

</html>

<script type="text/javascript">

    //用户名框获得焦点事件

    document.getElementById("userName").onfocus = function () {

      //  alert(this.style.color);

        if (this.value.trim() == "请输入用户名") {

            //清空自己的文本

            this.value = "";

            //修改自己的字体颜色

            this.style.color = "black";

        }

    }

    //用户名失去焦点事件

    document.getElementById("userName").onblur = function () {

        if (this.value.trim()=="") {

            //还原文本,

            this.value = "请输入用户名";

            //还原样式

            this.style.color = "#c8c1c1";

        }

    }

    //密码框获得焦点事件

    document.getElementById("userPass").onfocus = function () {

        //  alert(this.style.color);

        if (this.value.trim() == "请输入密码") {

            //清空自己的文本

            this.value = "";

            //修改自己的字体颜色

            this.style.color = "black";

            //修改type

            this.type = "password";

        }

    }

    //密码框失去焦点事件

    document.getElementById("userPass").onblur = function () {

        if (this.value.trim() == "") {

            //还原文本,

            this.value = "请输入用户名";

            //还原样式

            this.style.color = "#c8c1c1";

            //还原type

            this.type = "text";

        }

    }

</script>

　　定时器和计时器

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

</head>

<body>

    <input type="button" value="开启定时器" id="timeOpen" />

    <input type="button" value="关闭定时器" id="timeClose" />

    <input type="button" value="开启计时器" id="interOpen" />

    <input type="button" value="关闭计时器" id="interClose" />

</body>

</html>

<script type="text/javascript">

    function eatFood(foodName, bedName) {

        alert("中午吃" + foodName + "在" + bedName + ",睡觉觉");

    }

    function sleep(){

        alert("zzzZZZZZ");

    }

    //-------------分割线

    var timeOutId;//定时器id

    //定时器,延迟调用,只调用一次,延迟时间单位是毫秒

    document.getElementById("timeOpen").onclick = function () {

        //同时接收定时器id

        timeOutId = window.setTimeout(eatFood, 2000, "鸡腿饭,叉烧双拼", "课桌上");

    }

    //关闭定时器的方法 通过id

    document.getElementById("timeClose").onclick = function () {

        window.clearTimeout(timeOutId);

    }

    var interId;

    //计时器,延迟调用,会一直执行,传参的方式 跟定时器一样

    document.getElementById("interOpen").onclick = function () {

        //同时接收定时器id

        interId = window.setInterval(sleep, 1000);

    }

    //通过id关闭计时器

    document.getElementById("interClose").onclick = function () {

        //同时接收定时器id

        interId = window.clearInterval(interId);

    }

</script>

　　自动切换的图片

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        div {

            border: 1px solid #0094ff;

            margin: 0 auto;

        }

        #divImg {

            width: 300px;

            height: 192px;

        }

        #divInfo {

            width: 300px;

            height: 30px;

            margin-top:5px;

        }

        li {

            float: left;

            height: 15px;

            width: 25px;

            text-align: center;

            line-height: 15px;

            background-color:#ffd800;

            margin-left:2px;

            color:#ff0000;

        }

        ol {

            list-style: none;

            margin:0px;

            padding:0px;

        }

    </style>

</head>

<body>

    <div id="divImg" style="position:relative">

        <div style="position:absolute;right:0px;bottom:0px;border:none;padding:0px;margin:0px">

             <ol>

            <li key="button1">1</li>

            <li key="button2">2</li>

            <li key="button3">3</li>

            <li key="button4">4</li>

        </ol>

        </div>

    </div>

    <div id="divInfo"></div>

</body>

</html>

<script type="text/javascript">

    //图片信息数据存储

    var imgInfoArr = [

        { "key": "button1", "imgPath": "/img/1.jpg", "imgInfo": "两个小loli" },

        { "key": "button2", "imgPath": "/img/2.jpg", "imgInfo": "嫦娥本月" },

        { "key": "button3", "imgPath": "/img/3.jpg", "imgInfo": "美女与野兽" },

        { "key": "button4", "imgPath": "/img/4.jpg", "imgInfo": "学生装cosplay" }

    ];

    //为数据对象绑定方法--面向对象

    //循环判断传入的key 符合哪一个,返回符合的对象

    imgInfoArr.GetObjByKey = function (key) {

        for (var i = 0; i < this.length; i++) {

            if (this[i].key == key) {

                return this[i];

            }

        }

    }

    //---------------上面是准备数据下面是绑定方法

    //获取所有的li标签

    var liObjs = document.getElementsByTagName("li");

    //为li标签绑定点击事件--通过dom元素.getAttribute("属性名")可以获取自定义属性

    for (var i = 0; i < liObjs.length; i++) {

        liObjs[i].onclick = function () {

            //获取自定义属性 key

            var myKey = this.getAttribute("key");

            //通过key去获取对象

            var imgInfoObj = imgInfoArr.GetObjByKey(myKey);

            //将对象的属性设置给 图片div 还有文字div

            //修改背景图片

            document.getElementById("divImg").style.backgroundImage = "url(" + imgInfoObj.imgPath + ")";

            //修改文字

            document.getElementById("divInfo").innerHTML = imgInfoObj.imgInfo;

        }

    }

    //全局变量--li标签 索引

    var liIndex = 0;

    //开启计时器,自动调用图片切换方法

    setInterval(autoClick, 2000);

    //手动调用 自动点击方法.让第一个li标签被点击

    autoClick();

    //封装的方法,

    function autoClick() {

        //手动调用li标签的点击事件

        liObjs[liIndex].onclick();

        //所应增加,并且判断是否越界

        liIndex++;

        liIndex = liIndex > 3 ? 0 : liIndex;

    }

    ////根据key获取 对象的方法

    //function GetImgObj(key) {

    //    for (var i = 0; i < imgInfoArr.length; i++) {

    //        if (imgInfoArr[i].key == key)

    //        {

    //            return imgInfoArr[i];

    //        }

    //    }

    //}

    //var someObj=GetImgObj("button3");

    //alert(someObj.key+"|"+someObj.imgPath+"|"+someObj.imgInfo);

</script>

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        //window.onclick = function () {

        //    alert("你点击了页面");

        //}

        //页面资源加载完毕

        //html+css+js解析完毕

        //图片,视频,音频,加载完毕

        window.onload = function () {

            alert("资源加载完毕");

            document.getElementById("12");

            //haha = document.getElementById("123");

            //给body加点击事件

            //body的作用域,跟他的大小有关,

            //body的本质是一个div,大小跟自己内部的元素有关

            //所有要让整个页面都为时间触发区域,就添加给window对象

            document.body.onclick = function () {

                alert("你点击了body");

            }

        }

    </script>

</head>

<body style="background-color:#00e0ff;border:1px solid #0094ff;">

    <br />

    <br />

    <br />

</body>

</html>

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        alert("稍等一会");

        //获取当前页面的地址--window.location可读可写

        //alert(window.location);

        //window.location = "http://www.baidu.com";

        //关闭打开页面

        //window.close();

        //打开新的页面不常用.了解即可

        //window.open("p04登录页面demo.html");

        //为window对象添加鼠标移动事件

        window.onload = function () {

            //window添加鼠标移动事件

            window.onmousemove = function () {

                //alert("123");

                //window.innerHeight 获取显示区域的尺寸

                document.getElementById("showInfo").value = window.innerHeight + "|" + window.innerWidth;

            }

        }

    </script>

</head>

<body>

    <input type="text" id="showInfo" />

</body>

</html>

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        //window.parent获取父窗体

        //window.top获取*窗体

        window.onload = function () {

            //为按钮1添加点击事件

            document.getElementById("btnFather").onclick = function () {

                //自己  父窗体

                window.parent.document.body.style.backgroundColor = "orange";

            }

            document.getElementById("btnTop").onclick = function () {

                //   window.top.document.body.style.backgroundColor = "pink";

                window.parent.parent.document.body.style.backgroundColor = "pink";

            }

        }

    </script>

</head>

<body style="background-color: #0094ff">

    <h1>我是最底层的页面</h1>

    <input type="button" value="修改父窗体颜色" id="btnFather" />

    <input type="button" value="修改*窗体颜色" id="btnTop" />

</body>

</html>

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body style="background-color:#ffdb00">

    <h1>我是parent页面

    </h1>

    <iframe src="p09_self.html"></iframe>

</body>

</html>

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body style="background-color:#f00">

    <h1>我是top页面</h1>

    <iframe src="p09_parent.html" style="height:500px;width:500px;"></iframe>

</body>

</html>

　　

创建table的快捷方式

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        table {

        border:1px solid #0094ff;

        border-collapse:collapse;

        width:400px;

        margin:0 auto;

        }

        td {

          border:1px solid #0094ff;

          text-align:center;

        }

    </style>

    <script type="text/javascript">

        var foodArr = [

            { "name": "杨枝甘露", "price": 15 },

            { "name": "天地一号", "price": 5 },

            { "name": "特仑苏", "price": 8 },

            { "name": "脉动", "price": 4 }

        ]

        window.onload = function () {

            //村代码生成table

            var tbList = document.createElement("table");//创建table

            //循环对象数组,生成行列

            for (var i = 0; i < foodArr.length; i++) {

                var trCreate = tbList.insertRow();//快速插入tr 同时放回tr的引用

                for (var item in foodArr[i]) {

                    var tdCreate = trCreate.insertCell();//快速插入td 同时返回引用

                    tdCreate.innerHTML = foodArr[i][item];

                }

            }

            document.body.appendChild(tbList); //table加到dom树里面去

        }

    </script>

</head>

<body>

</body>

</html>

　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        //window  linux macos

        //window对象里面的 navigator的 属性可以获取一些系统信息,浏览器信息等

        //alert(window.navigator.platform);

        //window.screen/

        //availHeight浏览器可用显示区域 美工可以根据浏览器的显示大小,对页面进行优化

        // alert(window.screen.availHeight + "||" + window.screen.availWidth);

        //历史记录 history.length 获取历史记录的长度

        alert(window.history.length);

    </script>

</head>

<body>

    <a href="p12historyLength.html">点击跳转</a>

</body>

</html>

　　

相关文章