JavaScript的一些操作

最新推荐文章于 2019-11-25 14:37:18 发布

Ethiopia1024

最新推荐文章于 2019-11-25 14:37:18 发布

阅读量295

点赞数 1

分类专栏： html/xml/javaScript/css

本文链接：https://blog.csdn.net/Cinderella___/article/details/80691632

版权

html/xml/javaScript/css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天清理电脑，把以前的本地学习笔记移到博客里面来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom基础</title>
    <script>
        //从parent元素中选取css类名为className的元素
        function getByClass(parent,className){
            var result = [];//结果数组
            var elem = parent.getElementsByTagName('*');//找到parent中的所有元素
            for(var i = 0;i<elem.length;i++){
                if(elem[i].className == className){//筛选
                    result.push(elem[i]);//满足条件，存入结果数组
                }
            }
            return result;//返回结果数组
        }

        window.onload = function(){
            var o1 = document.getElementById("ul");
//            alert(o1.childNodes.length);
            console.log(o1.children.length);
            //以下是常用的选择子节点的操作
//            for(var i = 0;i<o1.childNodes.length;i++){
//                if(o1.childNodes[i].nodeType == 1){
//                    alert(i);
//                }
//            }
            var a1 = document.getElementsByClassName("a1");
            for(var i=0;i< a1.length;i++) {
                a1[i].onclick = function () {
                    this.parentNode.style.display = 'none';
                }
            }

            //测试函数：getByClass
            var box = getByClass(o1,'a1');
            for(var i = 0;i<box.length;i++){
                box[i].style.backgroundColor = 'red';
            }

            //DOM创建元素
            var txt = document.getElementById('txt');
            var btn1 = document.getElementById("btn1");
            var aLi = o1.getElementsByTagName('li');//获得ul中的li

            btn1.onclick = function(){
                var li1 = document.createElement('li');
                li1.innerHTML = txt.value;
//                o1.appendChild(li1);
                o1.insertBefore(li1,aLi[0]);//在第0个前面插入元素
            }
        }
    </script>
</head>
<body>
DOM节点：
    childNodes：子节点数组（包含文本节点和元素节点，不同浏览器下不一样）
    nodeType：节点类型
        取值如下：
            3: 文本节点
            1：元素节点
    获取子节点
    children ：只包括元素的个数，不包括文本节点
    parentNode ：父节点
        例子：点击链接，隐藏整个li
    offsetParent :获取一个元素定位的父级节点
        例子：获取元素在页面上的实际位置
    首尾子节点：
        有兼容性问题
        （IE 6-8 ）firstChild、lastChild：
        （高级浏览器）firstElementChild、lastElementChild
    兄弟节点：
        有兼容性问题
        （IE 6-8 ）nextSibling、nextElementSibling
        （高级浏览器）previousSibling、previousElementSibling
元素属性操作：
    第一种：oDiv.style.display = "block";
    第二种：oDiv.style["display"] = "block";
    第三种：DOM方式
        获取：getAttribute(名称)
        设置：setAttribute(名称，值)
        删除：removeAttribute(名称)

创建、插入和删除DOM元素
    创建DOM元素：
        createElement(标签名)：   创建一个节点
        appendChild(节点)：    追加一个节点(如果该元素原来有父级的话，就会先把元素从原有的父级上删掉，再添加到新的父级上面)
            例子：为ul插入li
    插入元素：
        insertBefore(节点，在谁之前)：  在已有的元素前插入
            例子：倒叙插入li
    删除元素：
        removeChild(节点)：   删除一个节点
            例子：删除Li

文档碎片：
    可以理论上提高DOM操作性能
    原理
    document.createDocumentFragment()
<ul id="ul">
    <input type="text" id="txt">
    <input type="button" value="创建li" id="btn1">
    <li>1 <a href="javascript:" class="a1">隐藏</a>
    <li>1vdf <a href="javascript:" class="a1">隐藏</a>
    <li>1s <a href="javascript:" class="a2">隐藏</a>
    <li>1sef <a href="javascript:" class="a1">删除</a>
</ul>
</body>
</html>

2，DOM操作表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作表格</title>
    <script>
        window.onload = function(){
            var oTab = document.getElementById("tab1");
            //表格的简便操作
            console.log(oTab.tBodies[0].rows[1].cells[1].innerHTML);
            //隔行变色
            var oldColor = '';//记录原来的颜色
            for(var i = 0;i<oTab.tBodies[0].rows.length;i++){
                oTab.tBodies[0].rows[i].onmouseover = function(){
                  oldColor = this.style.backgroundColor;
                    this.style.backgroundColor = 'blue';
                };
                oTab.tBodies[0].rows[i].onmouseout = function(){
                    this.style.backgroundColor = oldColor;
                };
                if(i%2){
                    oTab.tBodies[0].rows[i].style.backgroundColor = '';
                }
                else{
                    oTab.tBodies[0].rows[i].style.backgroundColor = '#ccc';
                }
            }

            //表格的添加和删除;
            var oName = document.getElementById("name");
            var oAge = document.getElementById("age");
            var oBtn1 = document.getElementById("btn1");
            oBtn1.onclick = function(){
                //第一列
                var oTr = document.createElement("tr");
                var oTd = document.createElement("td");
                var id = oTab.tBodies[0].rows.length+1;
                oTd.innerHTML = id++;//避免id重复
                oTr.appendChild(oTd);

                //第二列
                oTd = document.createElement("td");
                oTd.innerHTML = oName.value;
                oTr.appendChild(oTd);

                //第三列
                oTd = document.createElement("td");
                oTd.innerHTML = oAge.value;
                oTr.appendChild(oTd);

                //第四列
                oTd = document.createElement('td');
                oTd.innerHTML = "<a href='#'>删除</a>";
                oTr.appendChild(oTd);
                oTd.getElementsByTagName('a')[0].onclick = function(){
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                };

                //插入整行
                oTab.tBodies[0].appendChild(oTr);
            };

            //表格的搜索
            var oBtn2 = document.getElementById('btn2');
            var oTxt = document.getElementById("name");
            oBtn2.onclick = function(){
                for(var i = 0;i<oTab.tBodies[0].rows.length;i++){
                    var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
                    var sTxt = oTxt.value.toLowerCase();//忽略大小写来搜索东西
                    var arr = sTxt.split(' ');//用空格切开字符串，实现多关键字搜索
                    oTab.tBodies[0].rows[i].style.backgroundColor = '';

                    for(var j = 0;j<arr.length;j++){
                        if(sTab.search(arr[j]) != -1){//多关键字搜索并且模糊搜索
                            oTab.tBodies[0].rows[i].style.backgroundColor = 'red';
                        }
                    }

                    //纯模糊搜索并且忽略大小写
//                    if(sTab.search(sTxt) != -1){
//                        oTab.tBodies[0].rows[i].style.backgroundColor = 'red';
//                    }
//                    else{
//                        oTab.tBodies[0].rows[i].style.backgroundColor = '';
//                    }
                }
            };

            //表格的【排序】
            var oBtn3 = document.getElementById('btn3');
            oBtn3.onclick = function(){
                var arr = [];//声明一个数组，只有Array类型的数组才有sort方法。
                for(var i = 0;i<oTab.tBodies[0].rows.length;i++){
                    arr[i] = oTab.tBodies[0].rows[i];//将表格的每一行移入数组
                }
                arr.sort(function(tr1,tr2){//比较函数
                    var n1 = parseInt(tr1.cells[0].innerHTML);
                    var n2 = parseInt(tr2.cells[0].innerHTML);
                    return n1 - n2;
                });
                for(var i = 0;i<arr.length;i++){
                    oTab.tBodies[0].appendChild(arr[i]);
                }
            };
        }
    </script>
</head>
<body>
输入姓名：<input id="name" type="text"> <br>
输入年龄：<input id='age' type="text"> <br>
<input id="btn1" type="button" value="添加"> <br>
<input id="btn2" type="button" value="搜索"> <br>
<input id="btn3" type="button" value="排序">
    <table border="1" width="500px" id="tab1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <!--一个表格可以有很多tbody，但只有一个thead和一个tfoot-->
        <tbody>
            <tr>
                <td>11</td>
                <td>blue</td>
                <td>23</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>2</td>
                <td>张三</td>
                <td>23</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>33</td>
                <td>李四</td>
                <td>28</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>4</td>
                <td>王五</td>
                <td>16</td>
                <td>删除</td>
            </tr>
            <tr>
                <td>15</td>
                <td>张伟</td>
                <td>24</td>
                <td>删除</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

3，js事件应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: purple;
            position: absolute;;
        }
    </style>
    <script>
        //封装返回鼠标位置的函数
        function getPos(ev){
            var scrollTop = document.body.scrollTop;
            var scrollLeft = document.body.scrollLeft;
            return {    x: ev.clientX+scrollLeft,
                         y: ev.clientY+scrollTop };
        }
        window.onload = function(){
            document.onclick = function(){
                console.log("要想给整个页面加事件，直接用document,因为body相当于是document的子节点，body可能撑不开");
                console.log('横坐标 ' + event.clientX + ',' + '纵坐标 ' + event.clientY);//不兼容
            }
            //让DIV跟随鼠标移动
            document.onmousemove = function(ev){
                var oEvent = ev||event;//浏览器兼容处理
                var oDiv = document.getElementById('div1');
                var pos = getPos(oEvent);
                oDiv.style.left = pos.x + 'px';
                oDiv.style.top = pos.y + 'px';//为了使长页面也能精确跟着鼠标走。
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
<!--event对象和事件冒泡
    什么是event对象：
        用来获取事件的详细信息：鼠标位置、键盘按钮
        例子：获取鼠标位置：clientX
        document的本质：document.childNodes[0].tagName
    获取event对象（兼容性写法）：
        var oEvent = ev||event  （ev是可以传到function中的参数）
    事件流：
        事件冒泡：（会沿着父级一直往上传递）
            取消冒泡：oEvent.cancelBubble = true
            例子：仿select控件
            DOM事件流

     鼠标事件：
        鼠标位置
            可视区位置：clientX、clientY
                例子：跟随鼠标的DIV
                    消除滚动条的影响
                        var scrollTop = documentElement.scrollTop || document.body.scrollTop
                        滚动条的意义--可视区与页面顶部的距离
        获取鼠标在页面的绝对位置
            封装函数
            例子2：一串跟随鼠标的DIV

      键盘事件：
        keyCode
            获取用户按下键盘的哪个键
            例子：键盘控制DIV移动
      其他属性
        ctrlKey、shiftKey、altKey
        例子：提交留言
            回车提交
            ctrl+回车提交

      默认行为
           也称默认事件，浏览器自带的，如右键菜单
      阻止默认行为
        普通写法：return false;
        例子1：屏蔽右键菜单
            弹出自定义右键菜单
        例子2：只能输入数字的输入框
            keydown、keyup事件的区别

     拖拽：拖着div移动
        简易拖拽
            拖拽原理
                距离不变
                三个事件
        靠谱拖拽
            原有拖拽的问题
                直接给document加事件
            FF下，空div拖拽bug
                阻止默认事件
            防止拖出页面
                修正位置

事件绑定
    IE方式
        attachEvent(事件名称，函数)，绑定事件处理函数
        detachEvent(事件名称，函数)，解除绑定
    DOM方式
        addEventListener(事件名称，函数，捕获)
        removeEventListener(事件名称，函数，捕获)
    何时使用事件绑定
    绑定事件和this
    绑定匿名函数，会无法删除
高级拖拽
    拖拽原理
        距离不变
        三个事件：down、move、up
    限制范围
        对位置进行判断
            例子1：不能拖出窗口的div
            例子2：不能拖出指定对象的div
        磁性吸附
    图片拖拽
        阻止默认事件
     文字选中
        阻止默认事件
        IE下拖动有问题
            事件捕获
     与DOM配合
        带框的拖拽
        保留原有位置的拖拽
自定义滚动条
    拖拽
        只有横向拖拽
        限制范围——范围的大小
        计算比例——当前值/最大值
    控制其他对象
        例子1：控制物体的大小
        例子2：控制物体的透明度
        例子3：控制文字滚动

-->

</body>
</html>

4，键盘按键控制div移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: #ccc;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            document.onkeydown = function(ev){//键盘按下事件
                var oEvent = ev||event;//获取事件对象
                var oDiv = document.getElementById('div1');
                //键盘上面的每一个键都有一个对应的keyCode
                if(oEvent.keyCode == 37){//如果按下是键盘左键
                    oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                }
                else if(oEvent.keyCode == 39){//按下键盘右键
                    oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                }
                else if(oEvent.keyCode == 38){//按下键盘上键
                    oDiv.style.top = oDiv.offsetTop - 10 + 'px';
                }
                else if(oEvent.keyCode == 40){//按下键盘下键
                    oDiv.style.top = oDiv.offsetTop + 10 + 'px';
                }
            };
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

5，键盘提交留言

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘提交留言</title>
    <script>
        window.onload = function(){
            var oTxt1 = document.getElementById('txt1');
            var oTxt2 = document.getElementById('txt2');
            oTxt1.onkeydown = function(ev){
                var oEvent = ev||event;
                //如果按下的是回车或者按下ctrl+回车则提交留言
                if((oEvent.keyCode == 13)||(oEvent.keyCode == 13 && oEvent.ctrlKey)){
                    oTxt2.value += oTxt1.value + '\n';//将留言放进文本域
                    oTxt1.value = '';//清空输入文本框
                }
            }
        }
    </script>
</head>
<body>
<input type="text" id="txt1"> <br>

<textarea id="txt2" rows="10" cols="40"></textarea>>
</body>
</html>

6，拖拽div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽div</title>
    <style>
        #div1{
            height: 100px;
            width: 100px;
            background-color: #00ffff;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var disX = 0;//鼠标离div的横向距离
            var disY = 0;//鼠标离div的纵向距离

            //当鼠标按下，计算出鼠标和物体的距离
            oDiv.onmousedown = function(ev){
                var oEvent = ev||event;
                //鼠标离div的横向距离为 鼠标的位置减去div的横向位置
                disX = oEvent.clientX - oDiv.offsetLeft;
                //鼠标离div的纵向距离为 鼠标的位置减去div的纵向位置
                disY = oEvent.clientY - oDiv.offsetTop;

                document.onmousemove = function(ev){//让div跟着鼠标移动
                    var oEvent = ev||event;
                    //l和t记录当前div的位置
                    var l = oEvent.clientX - disX;
                    var t = oEvent.clientY - disY;
                    //若拖拽出了浏览器的可视区，就禁止拖出.
                    if(l<0) {//左面出不去
                        l = 0;
                    }
                    //右面 == 可视区的宽度位置减去div的宽度
                    else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
                        l = document.documentElement.clientWidth-oDiv.offsetWidth;
                    } //右面出不去
                    if(t<0){//上面出不去
                        t = 0;
                    }
                    //下面 == 可视区的高度位置减去div的高度
                    else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
                    t = document.documentElement.clientHeight-oDiv.offsetHeight;
                    }//下面出不去
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                };

                document.onmouseup = function(){//鼠标抬起时，就去掉拖拽
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                return false;
            };
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

7，一串跟着鼠标走的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 50px;
            width: 50px;
            background-color: palevioletred;
            position: absolute;;
        }
    </style>
    <script>
        //封装返回鼠标位置的函数
        function getPos(ev){
            var scrollTop = document.body.scrollTop;
            var scrollLeft = document.body.scrollLeft;
            return {    x: ev.clientX+scrollLeft,
                        y: ev.clientY+scrollTop };
        }

        window.onload = function(){
            document.onmousemove = function(ev){
                var oEvent = ev||event;//浏览器兼容处理
                var pos = getPos(oEvent);
                var oDiv = document.getElementsByTagName('div');
                //后一个div跟着前一个div走
                for(var i = oDiv.length-1;i>0;i--){
                    oDiv[i].style.left = oDiv[i-1].offsetLeft + 'px';
                    oDiv[i].style.top = oDiv[i-1].offsetTop + 'px';
                }
                //第一个div跟着鼠标走
                oDiv[0].style.left = pos.x + 'px';
                oDiv[0].style.top = pos.y + 'px';
            }
        }
    </script>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></body></html>

8，右键菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>右键菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 80px;
            height: 100px;
            background-color: #ccc;
            position: absolute;
            border: 1px;
            display: none;
        }
        ul{
            list-style: none;
        }
    </style>
    <script>
        window.onload = function(){
            //点击右键菜单事件
            document.oncontextmenu = function(ev){
                var oEvent = ev||event;//获取事件对象
                var oDiv = document.getElementById('div1');
                oDiv.style.display = 'block';//点击右键显示右键菜单
                oDiv.style.left = oEvent.clientX + 'px';
                oDiv.style.top = oEvent.clientY + 'px';
                return false;//消除默认事件，即取消原来浏览器的默认菜单
            }
            document.onclick = function(){//点击页面其他地方菜单收起来
                var oDiv = document.getElementById('div1');
                oDiv.style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <ul>
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
            <li>aaaa</li>
        </ul>
    </div>
</body>
</html>

Ethiopia1024

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的一些操作

今天清理电脑，把以前的本地学习笔记移到博客里面来目录： 1，DOM 基础 2，DOM操作表格 3，js事件应用 4，键盘按键控制div移动 5，键盘提交留言 6，拖拽div 7，一串跟着鼠标走的div 8，右键菜单1，DOM 基础&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; ...
复制链接

扫一扫