JavaScript初探三

时间：2015-01-17 23:28:30 阅读：329 评论：0 收藏：0 [点我收藏+]

标签：

<!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>

JavaScript初探三

标签：

原文地址：http://www.cnblogs.com/fenglingyi/p/4231239.html

踩

(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)

周排行