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;
            width: 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;
            width: 300px;
        }

        td {
            border: 1px solid #0094ff;
        }

        div {
            border: 1px solid #0094ff;
            width: 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 {
        width:300px;
        height:192px;
        }
        #divInfo {
        width:300px;
        height:30px;
        }
        li {
        float:left;
        border:1px solid #0094ff;
        height:15px;
        width: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;
            width: 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;
        width: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;
        width: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>

  

时间: 03-19

JavaScript初探 二的相关文章

JavaScript初探二

//----------总结 //01.查找dom元素 document.getElementById();//通过id获取一个dom元素 document.getElementsByClassName();//通过class获取dom数组 document.getElementsByTagName();//通过标签名获取dom数组 //02.修改dom元素 dom.type = "text"//type属性 dom.innerHTML//双标签的文本值 这里注意innerText d

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

Head first javascript(二)

three basic data types text number boolean 变量 var var_name; 用'='初始化变量 var var_name = ini_value; const (不是所有浏览器都支持const) const const_name = ini_value; nan: not a number 使用一些未初始化的变量进行计算的时候会产生nan,如: const unknown; total = (1 + 2) * unknown; 这里total在计算的时

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

Javascript生成二维码(QR)

网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网站,虽然有服务器端缓存,毕竟需要大量的CPU运算时间,这或多或少也是很大的一块压力.所以就想,有没有一种不靠服务器,就只靠JS就生成二维码呢,毕竟二维码就是一堆黑白点而已.我也没有刻意去找网络上是否已经存在这样的解决方案,而且自己一直想深入分析二维码的生成细节,现有的项目也有这样的需求,于是我自己研

EF6.0+APS.NET MVC5.0项目初探二(类库引用关系及说明)

接着上一篇(EF6.0+APS.NET MVC5.0项目初探一(界面展示),说说我搭建项目的一点心得. 第一步:我喜欢先建一个空的解决方案,只是个人喜好,不喜勿喷,呵呵. 如图: 第二步:添加项目所需要的类库: 如图: 第三步:添加类库引用 UI.Manage->BusinessLogic.BLL,Domain.Entity,Domain.ViewModel,Infrastructure.Common,UI.HtmlHelper BusinessLogic.BLL->Domain.Entity

javaScript生成二维码(改造jquery.qrcode.js,使之支持中文,能带logo)

最近公司要求使用javaScript生成二维码,在网上搜了很多相关的资料,都不是很全面,俗话说:自己动手,丰衣足食. (这里吐槽下,有网友有了解决方案,却刻意把源代码压缩了,导致不知道改了什么东西,知识大家一起学习嘛,授人与鱼不如授人与渔!) 总结如下: 资料搜索 选择star最多的两个 第一个就是用的比较多的jquery.qrcode.js(但不支持中文,不能带logo)啦,第二个支持ie6+,支持中文,根据第二个源代码,使得,jquery.qrcode.js,支持中文. 支持中文 1 //q

向ES6看齐,用更好的JavaScript(二)

向ES6看齐,用更好的JavaScript(二) 上一篇 中介绍了关于变量部分的新特性,本篇将从现有对象的拓展来展开介绍 1 增加了模板字符串 先看一下,ES6之前我们是如何实现输出模板的: document.getElementById('root').innerHTML = "the user name is " + username + "\nthe user age is " + age; 这样通过字符串相加拼接确实挺繁琐的,很容易出错,ES6引入了模板字符

Java 之 JavaScript (二)

1.DOM a.作用:通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素 b.功能: ①JavaScript 能够改变页面中的所有 HTML 元素 ②JavaScript 能够改变页面中的所有 HTML 属性 ③JavaScript 能够改变页面中的所有 CSS 样式 ④JavaScript 能够对页面中的所有事件做出反应 2.获取与更改 a.获取元素: var x=document.getElementById("intro"); //通过id获取元素 v