三、网页练习JS知识点、小函数总结

最新推荐文章于 2022-11-29 19:45:44 发布

爱上喝水的女孩

最新推荐文章于 2022-11-29 19:45:44 发布

阅读量185

点赞数

分类专栏： js css 文章标签： js

本文链接：https://blog.csdn.net/ginaxueyan/article/details/79766181

版权

js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

1.事件的三要素：事件、事件源、事件驱动。

2.DOM的解析过程：

HTML加载完毕后，渲染引擎会在内存中把HTML文档生成一个DOM树，然后过去元素节点，操作的时候就是修改该元素的属性。

3.DOM节点的获得

如下图的节点父子兄关系：

a.父亲节点parentNode调用方式节点.parentNode

b.兄弟节点：(1) 在IE678中用nextSibling,在火狐谷歌中IE+9以后就用nextElementSibling

调用方式：下一个兄弟节点=节点.nextSibling || 节点.nextElementSibling

(2)在IE678中previousSibling,在火狐谷歌IE9+以后用previousElementSibling

调用方式：前一个节点 = 节点.previousSibling || 节点.previousElementSibling

c.子节点：(1)firstChild: 调用者是父节点。在火狐谷歌IE9+以后都是指的第一个节点（包括空文档和换行节点）

调用方式：第一个子节点=父节点.firstChild || 父节点.firstElementChild

(2)lastChild和lastElementChild同上

d.所有子节点

(1)childNodes : 它是标准属性返回指定元素的子元素集合，包括节点、属性和文本节点。

调用方式：子节点数组=父节点.childNodes;获取所有节点

(2)children: 子节点数组=父节点.children(这种方式用的比较多)

节点.parentNode.children[index];随意得到兄弟节点

节点的区分方法：节点分为元素节点、文本节点、属性节点。

区分方法：nodeType:1标签，2属性，3文本。

4.box.style.cssText="width:200px;height:200px";为了解决js代码覆盖原来设置的样式display:none和ie浏览器的兼容问题，所以代码写为Element.style.cssText +='width:200px;height:200px;'

5.encodeURLComponent()函数可把字符串作为URL组件进行编码

decodeURLComponent()函数可把字符串作为URL组件进行编码

6.注册事件的方式

a.onclick几乎所有的浏览器都支持。

b.addEventListener可以给一个事件注册多个事件处理程序。

c.IE9以前使用attachEvent.

7.移除事件的方式

a.element.οnclick=null;

b.element.removeEventListener();

c.IE9以前使用element.detachEvent();

事件解绑：

unbind()解绑bing事件绑定的事件。

undelegate()解绑delegate绑定的事件。

off解绑on绑定的事件。

8.window.onload可以预防使用标签在定义标签之前，页面加载完之后才执行下面的代码。

9.js中的排他思想

<style>
    button{
        width: 100px;
        height: 40px;
        margin: 10px;
        cursor: pointer;
    }
    .current{
        background-color: yellow;
    }
</style>
<body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
</body>
<script>
    <!--首先鼠标放到哪个按钮，那个按钮就变成黄色的背景（添加类）-->
    <!--1.首先获取事件源-->

    var btnArr = document.getElementsByTagName("button");
        //绑定事件
    for(var i=0;i<btnArr.length;i++){
        btnArr[i].onmouseover =function () {
            //排他思想就是删除其他的，只剩下当前的一个
            //排他思想是和for循环连用
            for(var j=0;j<btnArr.length;j++){
                btnArr[j].className = "";
            }
            this.className = "current";
        }
    }

</script>

10.实现表格中鼠标滑过改变背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隔行变色</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        .wrap{
            width: 500px;
            margin: 100px auto;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 10px solid #c0c0c0;
            width: 500px;
        }
        th,td{
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th{
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td{
            font: 14px "微软雅黑";
        }
        tbody tr{
            background-color: #f0f0f0;
            cursor: pointer;
        }

        
    </style>
</head>
<body>
        <div class="wrap">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>课程</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody id="target">
                    <tr>
                        <td>1</td>
                        <td>吕不韦</td>
                        <td>语文</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>吕不韦</td>
                        <td>语文</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>吕不韦</td>
                        <td>语文</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>吕不韦</td>
                        <td>语文</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>吕不韦</td>
                        <td>语文</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>吕不韦</td>
                        <td>语文</td>
                        <td>100</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            var tbody = document.getElementById("target");
            var trArr = tbody.children;
            //循环遍历各行

            for(var i=0;i<trArr.length;i++){
                if(i%2!==0){
                    trArr[i].style.backgroundColor = "#a3a3a3";
                }else{
                    trArr[i].style.backgroundColor = "#ccc";
                }
                //这里的重点是鼠标移开回复原来的颜色
                //计数器（进入tr后，立刻记录颜色，然后离开的时候使用记录好的颜色）
                var color = "";
                trArr[i].onmouseover = function () {
                    //赋值颜色之前，先记录颜色
                    color = this.style.backgroundColor;
                    this.style.backgroundColor = "#fff";
                }
                trArr[i].onmouseout = function () {
                    this.style.backgroundColor = color;
                }
            }
        </script>
</body>
</html>

11.在js是获取body的方法 var body = document.body;例如下面的例子，运行效果如下图

点击其中的图片背景图片会换成相应的图片

  <script>
            var box = document.getElementsByTagName("div")[0];
            //body的获取js内部帮我们优化完毕
            var body = document.body;
            var imgArr = box.children;
            for(var i=0;i<imgArr.length;i++){
                imgArr.index = i ;
                imgArr[i].onclick = function () {
                    body.style.background = "url("+this.src+")";
                }
            }
        </script>

12.cloneNode方法创建节点的拷贝，并返回该副本。var newTip = tip.cloneNode(true);

13.push()是操作数组的，如果要往一个标签中添加元素需要使用appendChild();

14.newWin.moveTo(100,100)。可把窗口的左上角移动到一个指定的坐标。

15.str.charAt(index)返回指定位置的字符串。

str.charCodeAt(index)这个会返回unicode中的码值。

爱上喝水的女孩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三、网页练习JS知识点、小函数总结

1.事件的三要素：事件、事件源、事件驱动。2.DOM的解析过程： HTML加载完毕后，渲染引擎会在内存中把HTML文档生成一个DOM树，然后过去元素节点，操作的时候就是修改该元素的属性。3.DOM节点的获得如下图的节点父子兄关系：a.父亲节点parentNode调用方式节点.parentNodeb.兄弟节点：(1) 在IE678中用nextSibling,在火狐谷歌中IE+9以后就用n...
复制链接

扫一扫