JavaScript基础视频教程总结（101-110章）

时间：2022-09-08 09:00:38
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>101-110章总结</title>

    <link rel="stylesheet" type="text/css" href="css/base.css"/>

    <link rel="stylesheet" type="text/css" href="css/css.css"/>

</head>

<body>

<pre>

101. dom查询的剩余方法
</pre>

<div id="box2"></div>

<div class="box1">我是第一个box1<div>我是box1中的div</div></div>

<div class="box1"><div>我是box1中的div</div></div>

<div class="box1"><div>我是box1中的div</div></div>

<div class="box1"><div>我是box1中的div</div></div>

<div></div>

<script type="text/javascript">

    console.log("--第101--")

    function fun101(){

        //body

        console.log("--body--")

        var body1 = document.getElementsByTagName("body")[0]

        var body2 = document.body

        console.log(body1)

        console.log(body2)

        // html

        console.log("--html--")

        var html = document.documentElement

        console.log(html)

        // all

        console.log("--all--")

        var all = document.all

        console.log(all.length)

        for ( var i=0 , allL = all.length ; i<allL; i++) {

            console.log(all[i])

        }

        /*

         * 根据元素的class属性值查询一组元素节点对象

         * getElementsByClassName()可以根据class属性值获取一组元素节点对象，

         * 但是该方法不支持IE8及以下的浏览器

         */

        // class

        console.log("--getElementsByClassName--")

        var box1 = document.getElementsByClassName("box1")

        console.log(box1.length)

        //获取页面中的所有的div

        console.log("--div--")

        var divs = document.getElementsByTagName("div")

        console.log(divs.length)

        /*

         * document.querySelector()

         *  - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象

         *  - 虽然IE8中没有 getElementsByClassName()但是可以使用querySelector()代替

         *  - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

         */

        console.log("--querySelector--")

        var qbox1 = document.querySelector(".box1")

        console.log(qbox1)

        /*

         * document.querySelectorAll()

         *  - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回

         *  - 即使符合条件的元素只有一个，它也会返回数组

         */

        console.log("--querySelectorAll--")

        var qabox1 = document.querySelectorAll(".box1")

        console.log(qabox1.length)

    }

    fun101()

</script>

<pre>

102. dom增删改
</pre>

<div class="clearfix">

    <div id="total">

        <div class="inner">

            <p>你喜欢哪个城市?</p>

            <ul id="city">

                <li id="bj">北京</li>

                <li id="sh">上海</li>

                <li>东京</li>

                <li>首尔</li>

            </ul>

        </div>

    </div>

    <div id="btnList">

        <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>

        <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>

        <div><button id="btn03">使用"广州"节点替换#bj节点</button></div>

        <div><button id="btn04">删除#bj#sh节点</button></div>

        <div><button id="btn05">读取#city内的HTML代码</button></div>

        <div><button id="btn06">设置#bj内的HTML代码</button></div>

        <div><button id="btn07">创建一个"广州""合肥"节点,添加到#city下</button></div>

    </div>

</div>

<script type="text/javascript">

    console.log("--第102--");

    myClick("btn01",function(){

        var newLi = document.createElement("li")

        var nliText = document.createTextNode("广州")

        newLi.appendChild(nliText)

        var city = document.getElementById("city")

        city.appendChild(newLi)

    })

    myClick("btn02",function(){

        var newLi = document.createElement("li")

        var nliText = document.createTextNode("广州")

        newLi.appendChild(nliText)

        var city = document.getElementById("city")

        var bj = document.getElementById("bj")

        /*

         * insertBefore()

         *  - 可以在指定的子节点前插入新的子节点

         *  - 语法：

         *      父节点.insertBefore(新节点,旧节点);

         */

        city.insertBefore(newLi,bj)

    })

    myClick("btn03",function(){

        var newLi = document.createElement("li")

        var nliText = document.createTextNode("广州")

        newLi.appendChild(nliText)

        var city = document.getElementById("city")

        var bj = document.getElementById("bj")

        /*

         * replaceChild()

         *  - 可以使用指定的子节点替换已有的子节点

         *  - 语法：父节点.replaceChild(新节点,旧节点);

         */

        city.replaceChild(newLi,bj)

    })

    myClick("btn04",function(){

        var city = document.getElementById("city")

        var bj = document.getElementById("bj")

        var sh = document.getElementById("sh")

        /*

         * removeChild()

         *  - 可以删除一个子节点

         *  - 语法：父节点.removeChild(子节点);

         *      子节点.parentNode.removeChild(子节点);

         */

        city.removeChild(bj)

        sh.parentNode.removeChild(sh)

    })

    myClick("btn05",function(){

        var city = document.getElementById("city")

        alert(city.innerHTML)

    })

    myClick("btn06",function(){

        var bj = document.getElementById("bj")

        bj.innerHTML = "合肥"

    })

    myClick("btn07",function(){

        var city = document.getElementById("city")

        // 使用innerHTML也可以完成DOM的增删改的相关操作,一般我们会两种方式结合使用

        //01

        city.innerHTML += "<li>广州</li>"

        //02

        var li =document.createElement("li")

        li.innerHTML = "合肥"

        city.appendChild(li)

    })

    function myClick(btn,fun){

        var btn = document.getElementById(btn)

        btn.onclick = fun

    }

</script>

<pre>

103. 添加删除记录-删除
</pre>

<pre>

104. 添加删除记录-添加
</pre>

<pre>

105. 添加删除记录-修改
</pre>

<table id="employeeTable">

    <tr>

        <th>Name</th>

        <th>Email</th>

        <th>Salary</th>

        <th>&nbsp;</th>

    </tr>

    <tr>

        <td>Tom</td>

        <td>tom@tom.com</td>

        <td>5000</td>

        <td><a href="javascript:;">Delete</a></td>

    </tr>

    <tr>

        <td>Jerry</td>

        <td>jerry@sohu.com</td>

        <td>8000</td>

        <td><a href="javascript:;">Delete</a></td>

    </tr>

    <tr>

        <td>Bob</td>

        <td>bob@tom.com</td>

        <td>10000</td>

        <td><a href="javascript:;">Delete</a></td>

    </tr>

</table>

<div id="formDiv">

    <h4>添加新员工</h4>

    <table>

        <tr>

            <td class="word">name: </td>

            <td class="inp">

                <input type="text" name="empName" id="empName" />

            </td>

        </tr>

        <tr>

            <td class="word">email: </td>

            <td class="inp">

                <input type="text" name="email" id="email" />

            </td>

        </tr>

        <tr>

            <td class="word">salary: </td>

            <td class="inp">

                <input type="text" name="salary" id="salary" />

            </td>

        </tr>

        <tr>

            <td colspan="2" align="center">

                <button id="addEmpButton1" value="abc">Submit1</button>

                <button id="addEmpButton2" value="abc">Submit2</button>

            </td>

        </tr>

    </table>

</div>

<script type="text/javascript">

    console.log("--第103,104,105--");

    function deleteA(){

        console.log(this)

        var tr = this.parentNode.parentNode;

        var name = tr.children[0].innerHTML

        var flag = confirm("你确定删除"+ name +"吗？")

        if(flag){

            tr.parentNode.removeChild(tr)

        }

    }

    // 删除

    function deleteFun(){

        var allA = document.querySelectorAll("td a")

        for(var i=0,l=allA.length; i<l; i++) {

            allA[i].onclick = deleteA

        }

    }

    deleteFun()

    // 添加

    function addFun(){

        var employeeTable = document.getElementById("employeeTable")

        var addEmpButton1 = document.getElementById("addEmpButton1")

        var addEmpButton2 = document.getElementById("addEmpButton2")

        addEmpButton1.onclick = function(){

            var empName = document.getElementById("empName").value

            var email = document.getElementById("email").value

            var salary = document.getElementById("salary").value

            var tr = document.createElement("tr")

            var tdName = document.createElement("td")

            var tdEmail = document.createElement("td")

            var tdSalary = document.createElement("td")

            var tdA = document.createElement("td")

            var a = document.createElement("a")

            var nameText = document.createTextNode(empName)

            var emailText = document.createTextNode(email)

            var salaryText = document.createTextNode(salary)

            var aText = document.createTextNode("Delete")

            tdName.appendChild(nameText)

            tdEmail.appendChild(emailText)

            tdSalary.appendChild(salaryText)

            tdA.appendChild(a)

            a.href = "javascript:;"

            a.onclick = deleteA

            a.appendChild(aText)

            tr.appendChild(tdName)

            tr.appendChild(tdEmail)

            tr.appendChild(tdSalary)

            tr.appendChild(tdA)

            employeeTable.appendChild(tr)

        }

        // 修改

        addEmpButton2.onclick = function(){

            var empName = document.getElementById("empName").value

            var email = document.getElementById("email").value

            var salary = document.getElementById("salary").value

            var tr2 = document.createElement("tr")

            tr2.innerHTML = "<td>" + empName + "</td>" +

                            "<td>" + email + "</td>" +

                            "<td>" + salary + "</td>" +

                            "<td><a href='javascript:;'>Delete</a></td>"

            var a = tr2.getElementsByTagName("a")[0]

            a.onclick = deleteA

            employeeTable.appendChild(tr2)

        }

    }

    addFun()

</script>

<pre>

106. a的索引问题
</pre>

<ul id="ul_id">

    <li><a href="javascript:;">a的索引问题1</a></li>

    <li><a href="javascript:;">a的索引问题2</a></li>

    <li><a href="javascript:;">a的索引问题3</a></li>

    <li><a href="javascript:;">a的索引问题4</a></li>

</ul>

<script type="text/javascript">

    console.log("--第106--");

    var ul = document.getElementById("ul_id")

    var liA = ul_id.getElementsByTagName("a")

    //console.log(liA.length)

    for (var i=0,l=liA.length; i<l; i++) {

        console.log("for循环正在执行"+i);

        liA[i].onclick = function(){

            console.log("响应函数正在执行"+i);

        }

    }

</script>

<pre>

107. 操作内联样式

通过JS修改元素的样式：语法：元素.style.样式名 = 样式值

注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的比如background-color

需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

但是如果在样式中写了!important，则此时样式会有最高的优先级，

即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效

所以尽量不要为样式添加 !important

</pre>

<style type="text/css">

    #p2{color: blue !important;}

</style>

<div class="">

    <p id="p1">段落01</p>

    <p id="p2">段落02</p>

</div>

<div class="">

    <button id="btncss01">点我一下</button>

    <button id="btncss02">点我一下2</button>

</div>

<script type="text/javascript">

    console.log("--第107--");

    var btncss01 = document.getElementById("btncss01")

    var btncss02 = document.getElementById("btncss02")

    var p1 = document.getElementById("p1")

    var p2 = document.getElementById("p2")

    btncss01.onclick = function(){

        p1.style.color = "red"

        p1.style.backgroundColor = "yellow"

        p2.style.color = "red"

    }

    //点击按钮2以后，读取元素的样式

    // 通过style属性设置和读取的都是内联样式, 无法读取样式表中的样式

    btncss02.onclick = function(){

        alert(p1.style.color)

    }

</script>

<pre>

108. 获取元素的样式

获取元素的当前显示的样式

语法：元素.currentStyle.样式名

它可以用来读取当前元素正在显示的样式

如果当前元素没有设置该样式，则获取它的默认值

currentStyle只有IE浏览器支持，其他的浏览器都不支持

在其他浏览器中可以使用

getComputedStyle()这个方法来获取元素当前的样式

这个方法是window的方法，可以直接使用

需要两个参数

第一个：要获取样式的元素

第二个：可以传递一个伪元素，一般都传null

该方法会返回一个对象，对象中封装了当前元素对应的样式

可以通过对象.样式名来读取样式

如果获取的样式没有设置，则会获取到真实的值，而不是默认值

比如：没有设置width，它不会获取到auto，而是一个长度

但是该方法不支持IE8及以下的浏览器

通过currentStyle和getComputedStyle()读取到的样式都是只读的，

不能修改，如果要修改必须通过style属性

</pre>

<style type="text/css">

    #p3{color: #5197ff;height: 30px;font-size: 20px;}

    #p4{color: #112233;height: 60px;font-size: 30px;}

</style>

<div class="">

    <p id="p3">段落01</p>

    <p id="p4">段落02</p>

</div>

<div class="">

    <button id="btncss03">点我一下</button>

    <button id="btncss04">点我一下</button>

    <button id="btncss05">点我一下</button>

</div>

<script type="text/javascript">

    console.log("--第108--");

    var btncss03 = document.getElementById("btncss03")

    var btncss04 = document.getElementById("btncss04")

    var btncss05 = document.getElementById("btncss05")

    var p3 = document.getElementById("p3")

    var p4 = document.getElementById("p4")

    btncss03.onclick = function(){

        var  p3Color = p3.currentStyle.color

        console.log( p3Color)

    }

    btncss04.onclick = function(){

        var  obj = getComputedStyle(p4,null)

        console.log("p4= " + obj.color)

        console.log("p4= " + obj.fontSize)

    }

</script>

<pre>

109. getStyle()方法
</pre>

<script type="text/javascript">

    console.log("--第109--");

    function getStyle(obj,name){

        if(window.getComputedStyle){

            //正常浏览器的方式，具有getComputedStyle()方法

            return getComputedStyle(obj,null)[name]

        }else{

            //IE8的方式，没有getComputedStyle()方法

            return obj.currentStyle[name]

        }

    }

    btncss05.onclick = function(){

        var gs = getStyle(p3,"color")

        alert("p3color= " + gs )

    }

</script>

<pre>

110. 其他样式相关属性

clientWidth

clientHeight

- 这两个属性可以获取元素的可见宽度和高度

- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算

- 会获取元素宽度和高度，包括内容区和内边距

- 这些属性都是只读的，不能修改

offsetWidth

offsetHeight

- 获取元素的整个的宽度和高度，包括内容区、内边距和边框

offsetParent

- 可以用来获取当前元素的定位父元素

- 会获取到离当前元素最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，则返回body

offsetLeft

- 当前元素相对于其定位父元素的水平偏移量

offsetTop

- 当前元素相对于其定位父元素的垂直偏移量

scrollWidth

scrollHeight

- 可以获取元素整个滚动区域的宽度和高度

scrollLeft

- 可以获取水平滚动条滚动的距离

scrollTop

- 可以获取垂直滚动条滚动的距离

</pre>

<style type="text/css">

#other05{

    width: 200px;

    height: 300px;

    background-color: #bfa;

    overflow: auto;

}

#other06{

    width: 400px;

    height: 600px;

    background-color: yellow;

}

</style>

<div id="other_box" style="position: relative;padding: 50px;border: 1px solid red;">

    <p id="other01" style="padding: 10px;border: 5px solid;">clientWidth,clientHeight</p>

    <p id="other02" style="padding: 10px;border: 5px solid;">offsetWidth,offsetHeight</p>

    <p id="other03">offsetParent</p>

    <p id="other04">offsetLeft,offsetTop</p>

    <div id="other05">

        <div id="other06">scrollWidth,scrollHeight- 可以获取元素整个滚动区域的宽度和高度,scrollLeft- 可以获取水平滚动条滚动的距离scrollTop- 可以获取垂直滚动条滚动的距离</div>

    </div>

    <button id="other_btn01">client-wh</button>

    <button id="other_btn02">offset-wh</button>

    <button id="other_btn03">offsetParent</button>

    <button id="other_btn04">offset-lt</button>

    <button id="other_btn05">scroll</button>

    <button id="other_btn06">offsetTop</button>

</div>

<script type="text/javascript">

    console.log("--第110--");

    var other01 = document.getElementById("other01")

    var other02 = document.getElementById("other02")

    var other03 = document.getElementById("other03")

    var other04 = document.getElementById("other04")

    var other05 = document.getElementById("other05")

    var other06 = document.getElementById("other06")

    var other_btn01 = document.getElementById("other_btn01")

    var other_btn02 = document.getElementById("other_btn02")

    var other_btn03 = document.getElementById("other_btn03")

    var other_btn04 = document.getElementById("other_btn04")

    var other_btn05 = document.getElementById("other_btn05")

    var other_btn06 = document.getElementById("other_btn06")

    function myClick(btn,fun){

        var btn = document.getElementById(btn)

        btn.onclick = fun

    }

    myClick("other_btn01",function(){

        var clientWidth = other01.clientWidth

        var clientHeight = other01.clientHeight

        alert("clientWidth=" + clientWidth +",clientHeight=" + clientHeight)

    })

    myClick("other_btn02",function(){

        var offsetWidth = other02.offsetWidth

        var offsetHeight = other02.offsetHeight

        alert("offsetWidth=" + offsetWidth +",offsetHeight=" + offsetHeight)

    })

    myClick("other_btn03",function(){

        var offsetParent = other03.offsetParent

        alert( offsetParent.id)

    })

    myClick("other_btn04",function(){

        var offsetLeft = other04.offsetLeft

        var offsetTop = other04.offsetTop

        alert("offsetLeft=" + offsetLeft +",offsetTop=" + offsetTop)

    })

    myClick("other_btn05",function(){

        var clientWidth = other05.clientWidth

        var clientHeight = other05.clientHeight

        var scrollWidth = other05.scrollWidth

        var scrollHeight = other05.scrollHeight

        var scrollLeft = other05.scrollLeft

        var scrollTop = other05.scrollTop

        alert("clientWidth=" + clientWidth +"\n" +

              "scrollLeft=" + scrollLeft +"\n" +

              "scrollWidth=" + scrollWidth +"\n" +

              "clientHeight=" + clientHeight +"\n" +

              "scrollTop=" + scrollTop +"\n" +

              "scrollHeight=" + scrollHeight

        )

        //当满足scrollHeight - scrollTop == clientHeight

        //说明垂直滚动条滚动到底了

        //当满足scrollWidth - scrollLeft == clientWidth

        //说明水平滚动条滚动到底

    })

</script>

</body>

</html>

所有基础课程链接：

1.JavaScript基础视频教程总结（001-010章）          2.JavaScript基础视频教程总结（011-020章）          3. JavaScript基础视频教程总结（021-030章）        4. JavaScript基础视频教程总结（031-040章）

5. JavaScript基础视频教程总结（041-050章）          6. JavaScript基础视频教程总结（051-060章）         7. JavaScript基础视频教程总结（061-070章）        8. JavaScript基础视频教程总结（071-080章）

9. JavaScript基础视频教程总结（081-090章）          10. JavaScript基础视频教程总结（091-100章）        11. JavaScript基础视频教程总结（101-110章）      12. JavaScript基础视频教程总结（111-120章）

13. JavaScript基础视频教程总结（121-130章）        14. JavaScript基础视频教程总结（131-140章）

 另外，欢迎关注我的新浪微博

JavaScript基础视频教程总结（101-110章）的更多相关文章

  1. JavaScript基础视频教程总结（131-140章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. JavaScript基础视频教程总结（121-130章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. JavaScript基础视频教程总结（111-120章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. JavaScript基础视频教程总结（091-100章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JavaScript基础视频教程总结（081-090章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. JavaScript基础视频教程总结（071-080章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. JavaScript基础视频教程总结（061-070章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. JavaScript基础视频教程总结（051-060章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. JavaScript基础视频教程总结（001-010章）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. JavaScript语言精粹--Function&comma;类，this，对象

    1.类与对象 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它 ...

  2. 受教了，memcache比较全面点的介绍，受益匪浅&comma;适用memcached的业务场景有哪些？memcached的cache机制是怎样的？在设计应用时，可以通过Memcached缓存那些内容？

    基本问题 1.memcached的基本设置 1)启动Memcache的服务器端 # /usr/local/bin/memcached -d -m 10 -u root -l 192.168.0.200 ...

  3. 数学之路-python计算实战&lpar;19&rpar;-机器视觉-卷积滤波

    filter2D Convolves an image with the kernel. C++: void filter2D(InputArray src, OutputArray dst, int ...

  4. POJ 2337 输出欧拉路径

    太无语了. 这道题做了一整天. 主要还是我太弱了. 以后这个就当输出欧拉路径的模版吧. 题目中的输出字典序最小我有点搞不清楚,看了别人是这么写的.但是我发现我过不了后面DISCUSS里面的数据. 题意 ...

  5. jquery获取页面相关尺寸

    $(windows).width();获取页面可视宽度 $(windows).height();获取页面可视高度 $(document).height();获取页面内容的总高度 $(document) ...

  6. Bootstrap入门（十九）组件13：页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

  7. DataGridView上下键事件获取到的是上次停留行的内容

    DataGridView上下键事件 在DataGridView中,通过上下键将选中行的内容返回, 问题: 通过上边的方法总是获取到上次停留行的内容,不是当前选中行的内容. winform的项目,使用C ...

  8. DOM 基础

    文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法 查找 直接查找 var obj = document.getElementById('i1') ...

  9. 微信小程序接入，https服务器搭建和调试

    在进行小程序开发时候,调试时候,希望在本地搭建一个https环境. 准备条件: 1.公网主机(阿里云或者腾讯云主机) 2外网访问工具natapp 步骤: 1.在主机上安装nginx(nginx转发到n ...

  10. python3打包成exe---pyinstaller方法

    前言: 主要介绍python3的pyinstaller打包方法 pyinstaller安装参考地址:http://www.pyinstaller.org/ pywin32的下载地址:https://s ...

相关文章