• JavaScript初探二


    //----------总结01.查找dom元素 document.getElementById();//通过id获取一个dom元素
    document.getElementsByClassName();//通过class获取dom数组
    document.getElementsByTagName();//通过标签名获取dom数组

    //02.修改dom元素 dom.type = "text"//type属性
    dom.innerHTML//双标签的文本值 这里注意innerText
    dom.value//修改单标签的文本值,比如input
    document.getElementById().style.height//注意样式需要通过style点出来,高度,宽度需要添加单位

    1.删除dom元素

    dom元素.parentNode.removeChild(dom元素)//dom元素不能自己删除自己,必须通过父元素删除自己
    //删除的dom元素还在内存中,只是将他从dom树里面删除了

    //04.创建dom元素 document.createElement("input");//在js中所有dom元素的创建都是通过这种方式,传入不同的标签名,返回不同的元素
    dom元素.appendChild(newNode)//创建好的dom元素必须将他添加到dom树里面去才能看的到


    //05.克隆dom元素
    dom元素.cloneNode(true);//所有的dom元素都有这个方法,传入false 只克隆元素本身,传入 true 子元素一起克隆


    //06.a标签引入js代码
    <a href="javascript:这里写js代码">测试用</a>//在javascript:之后写js代码


    //07.select标签的特殊
    //01.通过设置select.value 可以修改被选中的option.但是设置的value值,必须有相应的option标签存在,否则没效果
    //02.修改了选中的option标签会触发select标签的 onchange事件


    //08.第二种绑定0级dom事件的方式
    <input type='button' onclick='这里写的是js代码'>//注意这样绑定的方法体内部的this


    //09.快速获取父节点

    dom元素.parentNode


    //10.注意
    写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>
        <script type="text/javascript">
            //01.变量定义
            //var fox = 123;
            //alert(fox);
            //fox = "小狐狸";
    
            //02.对象的写法
            //对象的直面两标识发里面 属性名 可以加"" 也可以不加
            //加了双引号:叫做 json格式
            //不加双引号:js的字面量表示法
            //var fox = new Object();
            //fox = {
            //    "name":"小二黑",age:18
            //}
    
            ////03.数组,长度可变,object
            //var foxArr = new Array();
            //foxArr = [1, 2, 3, 4, { "name": "fox", "age": 19 }];
            //foxArr[foxArr.length]//数组新增一位
    
            ////04.判断语句
            ////string 对象 数组 数字(除0) true
            ////false 0 NaN null undefined
            //function sayhi() { }
            //if (sayhi) {
    
            //}
            ////05选择 break 可以不写 会向下执行
            //switch (switch_on) {
            //    default:
    
            //}
            //06循环语句 
            //while (true) {
    
            //}
            //do {
    
            //} while (true);
            //for (var i in o) {
            //    o[i]
            //}
            //for (var i = 0; i < length; i++) {
    
            //}
            //07方法
            //new Function 里面的方法体如果只有一行 不需要分号,如果多行 必须用分号隔开
            //function sayHi(name, age) {
            //    return new Function("alert(123)");
            //}
            //var returnFunc = sayHi();
            //returnFunc();
    
            ////08. dom(文档对象模型) dom对象和dom树
            ////每一个标签都是一个dom对象,浏览器解析完毕所有html标签以后 生成dom树
            //document.getElementById(); //通过id 获取单个
            //document.getElementsByClassName();//通过class 获取多个
            //document.getElementsByTagName();//通过标签名 获取多个
    
            ////09bom 浏览器对象模型 可以理解为是一个类
            ////window对象可以理解为 是bom类new出来的对象
            ////在页面中定义的所有全局变量,都是window的属性
            //// window
            //var haha = "123";
    
            ////方法体里面的this 看调用这个方法的时候 这个方法由谁点出来
            //function sayHi() {
            //    alert(this);
            //}
            //---------------分割线问题解答
            //01function(直接创建的时候使用) Function(new 方法对象的时候使用)
            //除了写法不同,其他都一样,都是创建了一个方法对象
    
            //function sayHello() { }
            //new Function();
    
            //02
            //var people = sayHello();//执行sayHello方法 将方法的返回值赋给people
            //var smallPeople = sayHello;//直接将方法的引用地址给smallPeople
    
    
    
        </script>
    </head>
    
    <body>
        <input type="button" id="btnTest" />
    </body>
    </html>
    <script type="text/javascript">
        //03匿名函数
        //匿名函数 就是定义的时候不需要写名字的函数,但是他也会在内存中创建一个方法对象
        //document.getElementById("btnTest").onclick = function () { alert("123"); }
        //function sayHi() {
        //    alert("123");
        //}
    
        //document.getElementById("btnTest").onclick = sayHi;
    
        //变量必须定义在方法的下面------
        var haha = function () {
            alert("捏哈哈");
        }
        document.getElementById("btnTest").onclick = haha;
        //对于方法,浏览器做了优化,只有在调用这个方法的时候,才会去页面里面找
        //document.getElementById("btnTest").onclick = sayHello;
        //function sayHello() {
        //    alert("123");
        //}
    </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="docment绑定" id="btnDoc"/>
        <input type="button" value="标签内绑定" id="btnSurprise" onclick="sayThis(this);"/>
    </body>
    </html>
    <script type="text/javascript">
     
        //0级dom事件绑定方法1 直接通过onclick=xxx绑定的
        document.getElementById("btnDoc").onclick = function () {
            alert(this);
        }
        alert(document.getElementById("btnDoc").onclick);
        //02.直接写在标签里面的 事件属性 用=号赋值 =号后面写的是 js代码
        //直接写在标签内部的onclick属性 浏览器在解析的时候 会自动生成一个方法 将这段js代码包起来
        alert(document.getElementById("btnSurprise").onclick);
        //全局函数
        function sayThis(SomeObj) {
            alert(this+"||"+SomeObj)
        }
    </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">
            ol {
                list-style: none;
            }
    
            li {
                text-align: center;
                border: 1px solid #0094ff;
                 300px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <ol>
            <li>
                <label>NumA:</label><input type="text" id="numA"  /></li>
            <li>
                <label>NumB:</label><input type="text" id="numB" /></li>
            <li>
                <input type="button" value="+" onclick="doCom('+')" />
                   <input type="button" value="-" onclick="doCom('-')" />
                   <input type="button" value="*" onclick="doCom('*')" />
                   <input type="button" value="/" onclick="doCom('/')" /></li>
            <li>
                <label>Result:</label><input type="text" id="Result" /></li>
        </ol>
    </body>
    </html>
    <script type="text/javascript">
    
        function doCom(method) {
            var numA = document.getElementById("numA").value.trim();
            var numB = document.getElementById("numB").value.trim()
            switch (method) {
                case "+":
                    if (checkNum(numA, numB)) {
                        //修改结果文本框里面的value字
                        document.getElementById("Result").value = Number(numA) + Number(numB);
                    } else {
                        alert("请正确输入");
                    }
                    break;
                case "-":
                    if (checkNum(numA, numB)) {
                        //修改结果文本框里面的value字
                        document.getElementById("Result").value = Number(numA) - Number(numB);
                    } else {
                        alert("请正确输入");
                    }
                    break;
    
                case "*":
                    if (checkNum(numA, numB)) {
                        //修改结果文本框里面的value字
                        document.getElementById("Result").value = Number(numA) * Number(numB);
                    } else {
                        alert("请正确输入");
                    }
                    break;
    
                case "/":
                    if (checkNum(numA, numB)) {
                        //修改结果文本框里面的value字
                        document.getElementById("Result").value = Number(numA) / Number(numB);
                    } else {
                        alert("请正确输入");
                    }
                    break;
                default:
    
            }
        }
        //检查两个文本框里面的是否是数字
        function checkNum(numA, numB) {
    
            //判断是否不是一个数字
            if (window.isNaN(numA) == false && numB != "" && numA != "" && window.isNaN(numB) == false) {
                return true;
            } else {
                return false;
            }
        }
    
    </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">
            table {
                border: 1px solid #0094ff;
                border-collapse: collapse;
                 300px;
            }
    
            td {
                border: 1px solid #0094ff;
            }
    
            div {
                border: 1px solid #0094ff;
                 298px;
            }
        </style>
    </head>
    <body>
        <table id="tbList">
            <tbody id="tbListBody">
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>技能</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
        <div>
            <input type="checkbox" id="chkAll" /><label for="chkAll" style="cursor: pointer">全选</label>
            <a href="javascript:void(0)" onclick="DoDelChecked()">删除选中</a>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        //01.table 浏览器在解析的时候,会自动生成一个tbody 然后把tr放到tbody里面去
        //如果在table已经生成完毕在 table.appendChild(tr)添加tr 那么就是加到 table下面
        var dataArr = [
            { "name": "柯震东", "skill": "吸毒" },
            { "name": "李代沫", "skill": "唱歌" },
            { "name": "张默", "skill": "像房祖名" },
            { "name": "房祖名", "skill": "像张默" },
            { "name": "郭美美", "skill": "吃毒大米" },
        ]
        //02.使用代码为table添加tr
        for (var i = 0; i < dataArr.length; i++) {
            //02.1创建一个tr
            var trCreate = document.createElement("tr");
            //02.2生成td分为两种
            //单元格00
            var td00 = document.createElement("td");
            td00.innerHTML = i + 1 + "<input type='checkbox'class='chkOne'>";
            trCreate.appendChild(td00);
            //单元格01
            var td01 = document.createElement("td");
            td01.innerHTML = dataArr[i].name;
            trCreate.appendChild(td01);
            //单元格02
            var td02 = document.createElement("td");
            td02.innerHTML = dataArr[i].skill;
            trCreate.appendChild(td02);
            //单元格03
            var td03 = document.createElement("td");
            td03.innerHTML = "<a href='javascript:void(0)' onclick='doDelTr(this)'>删除该行</a>";
            trCreate.appendChild(td03);
            //将tr添加到tbody里面
            //  document.getElementById("tbListBody").appendChild(trCreate);tbList
            document.getElementById("tbList").appendChild(trCreate);
        }
        //02.5checked这个属性有点特殊,直接写在标签里面,不给值 就是被选中; 给任何值也是被选中
        //如果使用js去修改checked属性 给true 就是选中 给false 就是不选中
        //document.getElementById("chkAll").checked = false;
    
        //03.为全选框设置点击事件
        document.getElementById("chkAll").onclick = function () {
            //alert(this.checked);
            //for循环 将所有的单选框的选中状态设置跟全选框一样就好
            var chkOneObjs = document.getElementsByClassName("chkOne");
            for (var i = 0; i < chkOneObjs.length; i++) {
                chkOneObjs[i].checked = this.checked;
            }
        }
    
        //-----------------分割线 方法
        //a标签的this  就是他的href属性 
        function doDelTr(aObj) {
            if (confirm("你想好了?")) {
                //   alert(aObj);
                //根据a标签 获取他所在的tr
                //            a标签  td      tr
                var delTr = aObj.parentNode.parentNode;
              
                //通过tr的父节点 删除tr
                //tr    tr的父节点
                delTr.parentNode.removeChild(delTr);
            } else {
                alert("不要手贱啊");
            }
        }
    
        //删除选中的方法
        function DoDelChecked() {
            //获取所有的单选框
            var chkOneObjs = document.getElementsByClassName("chkOne");
            //循环 判断 单选框是否被选中
            for (var i = chkOneObjs.length-1; i >=0; i--) {
                if (chkOneObjs[i].checked==true) {
                    //通过单选框 获取所在tr
                    //                单选框    td         tr      
                    var delTr = chkOneObjs[i].parentNode.parentNode;
                    //通过tr获取父节点 调用父节点的删除方法
                    delTr.parentNode.removeChild(delTr);
                }
            }
            //如果被选中 就删除
            //否则 不干事情
        }
    
    
    
    </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 {
            300px;
            height:192px;
            }
            #divInfo {
            300px;
            height:30px;
            }
            li {
            float:left;
            border:1px solid #0094ff;
            height:15px;
            25px;
            text-align:center;
            line-height:15px;
         
            }
            ol {
            list-style:none;
               position:absolute;
               top:168px;
               left:595px;
               
            }
        </style>
    </head>
    <body>
        <div id="divImg">
            <ol>
                <li key="button1">1</li>
                <li key="button2">2</li>
                <li key="button3">3</li>
                <li key="button4">4</li>
            </ol>
        </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;
    
            }
        }
    
    
        ////根据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>
        <style type="text/css">
            /*//渲染树*/
            #divBox {
                height: 100px;
                 100px;
                border: 1px solid #0094ff;
            }
        </style>
    </head>
    <body>
        <div id="divBox" ></div>
    </body>
    </html>
    <script type="text/javascript">
        //绑定点击事件
        document.getElementById("divBox").onclick = function () {
            //01.获取dom元素标签内部的样式
            ////获取原有样式
            //var oldHeight = parseInt(this.style.height);
            ////累加
            //oldHeight += 10;
            ////设置回去
            //this.style.height = oldHeight + "px";
    
            //02.获取dom元素的样式--无论在内部 还是在 style标签中
            //通过这种方式拿到的样式 是只读的
            alert(window.getComputedStyle(this).height);
            this.style.height;
        }
    
    </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">
            ol {
            list-style:none;
            }
            li {
            border:1px solid #0023ff;
            height:20px;
            100px;
            }
        </style>
    </head>
    <body>
        <select id="selList">
            <option>鱼香肉丝</option>
            <option>水煮肉片</option>
            <option>鱼香茄子</option>
        </select>
       <ol>
           <li id="liEdit">水煮肉片</li>
       </ol>
        <input type="button" id="edit"  value="编辑"/>
          <input type="button" id="saveEdit"  value="保存修改"/>
    </body>
    </html>
    <script type="text/javascript">
        //为按钮添加点击事件
        document.getElementById("edit").onclick = function () {
            //为li标签 追加一个 子节点 select标签
            //dom元素有一个clone方法  传的布尔值 表示 克隆的深浅,
            var selClone = document.getElementById("selList").cloneNode(true);
            //设置克隆的select标签的 option的选中状态
            //如果 option标签 没有添加value值,那么 option标签的 innerHTML就是他的value  可读可写
            //设置select标签的value值 为option标签有的 ,那么就相当于 选中了那个option标签
            selClone.value = document.getElementById("liEdit").innerHTML;
            //清空问本质
            document.getElementById("liEdit").innerHTML = "";
            //将克隆的select标签 追加到li标签里面
            document.getElementById("liEdit").appendChild(selClone);
            //修改克隆出来的select标签的id
            selClone.id = "editSel";
        }
    
        //为保存修改按钮添加点击事件
        //id虽然唯一,但是重复也不会报错
        //取值的时候 从上到下查找.找到了符合要求的一个 就不继续找了
        document.getElementById("saveEdit").onclick = function () {
            //  alert(document.getElementById("editSel").value);
            document.getElementById("liEdit").innerHTML = document.getElementById("editSel").value;
        }
    </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;
            height:100px;
            100px;
            }
    
        </style>
    </head>
    <body>
        <!--使用a标签引入js代码 javascript:这里写js代码-->
        <a  href="javascript:alert('大家下午好,不要打瞌睡了');">点击打招呼</a>
        <div id="divBox">
            div的id为divBox
            <input type="button" id="btnTest" value="id=btnTest" />
        </div>
    </body>
    </html>
    <script type="text/javascript">
        //为按钮添加点击事件
        document.getElementById("btnTest").onclick = function () {
            alert(this.id);
            //删除自己-通过parentNode获取父节点,然后调用父节点的删除方法
            //this.parentNode.removeChild(this);
            //parentElement有浏览器兼容问题
            this.parentElement.removeChild(this);
        }
    
    
    </script>
    

      

  • 相关阅读:
    centos 7 安装Telnet并设为开机自启动、开防火墙端口
    cenos 7 中firewalld开放服务端口
    来自鸟哥的lftp客户端软件使用方法
    关闭Linux无用端口
    家用路由器网络设置DMZ区
    Linux中退出循环命令
    shell函数基本概念
    inode节点用尽处理
    xfs格式化、ext4格式化并指定inode区别
    dd备份命令使用
  • 原文地址:https://www.cnblogs.com/fenglingyi/p/4231113.html
Copyright © 2020-2023  润新知