Dom操作的常用案例实现

　　本文介绍几个Dom操作的几个常用的案例。虽然现在各种web框架层出不穷，也很方便。但是了解最基本的实现方法对我们开发还是有很大的帮助的：

　　1.图片滚动案例

　　1.1 效果如下：

　　1.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width:300px;
            height:335px;
            border:3px solid #b0b0b0;
            position: relative;
            overflow: hidden;
            margin:100px auto;
        }
 
        img{
            position: absolute;
            top: 0;
            left:22px;
        }
 
        /*两个span一个在div的左一个在div的右*/
        .wrap .left{
            height:100%;
            width:150px;
            position: absolute;
            left:0;
        }
 
        .wrap .right{
            height:100%;
            width:150px;
            position: absolute;
            right:0;
 
        }
 
    </style>
 
</head>
<body>
    <div class="wrap" id="box">
        <img src="2.jpg" id="naruto">
        <span class="left" id="pic_left"></span>
        <span class="right" id="pic_right"></span>
    </div>
 
    <script>
 
    var left = document.getElementById('pic_left');
    var right = document.getElementById('pic_right');
    var img = document.getElementById('naruto');
 
    var count = 0;
    var time = null;
 
    //鼠标移入的时候动作
    left.onmouseover = function () {
        time = setInterval(function () {
           count -= 2;
           count >= -100 ? img.style.left = count + 'px':clearInterval(time);
        },30)
 
    };
 
    right.onmouseover = function () {
        time = setInterval(function () {
            count += 2;
            count < 0 ? img.style.left = count + 'px':clearInterval(time);
        },30)
 
    }
 
    </script>
 
</body>
</html>

图片滚动

　2.选项卡案例

　　2.1 效果如下：

　　2.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding:0;margin:0;}
 
        ul{list-style:none;}
 
        #tab{
            width:480px;
            margin-top:55px;
            margin-left:auto;
            margin-right:auto;
            border:2px red solid;
        }
 
        /*ul下的li的属性*/
        ul li{
            float: left;
            width:160px;
            height:60px;
            line-height: 60px;
            text-align: center;
            background-color:grey;
        }
 
        /*ul下的li里的a的属性*/
        ul li a{
            text-decoration: none;
            color:black;
        }
 
        /*li的active属性*/
        li.active{
            background-color: aqua;
        }
 
        p{
            display:none;
            height:200px;
            text-align: center;
            line-height:200px;
            background-color: #2b84da;
        }
 
        p.active{
            display:block;
            font-size:36px;
        }
 
    </style>
 
</head>
<body>
 
    <div id="tab">
        <ul>
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">图片</a></li>
        </ul>
 
        <p class="active">首页内容</p>
        <p>新闻内容</p>
        <p>图片内容</p>
    </div>
 
    <script>
        var tab_li = document.getElementsByTagName('li');
        var tab_content = document.getElementsByTagName('p');
 
        for(var i=0;i<tab_li.length;i++){
            //保存变量i的临时值
            tab_li[i].index = i;
            tab_li[i].onclick = function () {
                for(var j=0;j<tab_li.length;j++){
                    tab_li[j].className = '';
                    tab_content[j].className = '';
                }
                this.className = 'active';
                tab_content[this.index].className = 'active';
            }
        }
 
    </script>
 
</body>
</html>

　3.简易留言板

　　3.1 效果如下：

　　3.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
    <style>
        a{
            cursor: pointer;
        }
 
        a:hover{
            color:red;
            background-color: orange;
        }
    </style>
 
</head>
 
<body>
    <div>
        <p>
            <h2>简易留言板</h2>
        </p>
    </div>
 
    <!--留言显示的div-->
    <div id="box">
    </div>
    <!--操作区-->
    <div>
        <textarea id="msg" style="height: 69px;"></textarea>
        <input id="words" type="button" value="留言" />
        <input id="count" type="button" value="统计" onclick="counter();" />
    </div>
 
    <script>
        //取值
        var msg = document.getElementById('msg');
 
        //开始时在显示区创建新的ul
        var ul = document.createElement('ul');
        var box = document.getElementById('box');
         box.appendChild(ul);
 
        //点击留言的操作
        var words = document.getElementById('words');
        //全局变量count
        count = 0;
        //点击留言的事件~~~~~~~~~~~~~~~~~~~~~~~
        words.onclick = function () {
            //找到textarea的值
            message = msg.value;
            // 新建一个li
            var li = document.createElement('li');
            ////往li里添加内容——注意这里是innerHTML！！！
            li.innerHTML = msg.value + '<span>&nbsp;&nbsp;&nbsp;<a>X</a></span>';
 
            //判断后加入到ul
            var lis = document.getElementsByTagName('li');
            if (lis.length === 0) {
                    ul.appendChild(li);
                    count++;
                }
            else {
                    ul.insertBefore(li, lis[0]);
                    count++;
            }
            //输入完毕后将textarea的值设置成空
            msg.value = '';
 
            //点击X对a标签进行操作~~~注意要写在“留言”的onclick事件里！
             var spans =  document.getElementsByTagName('span');
             for(var i=0;i<spans.length;i++){
                 spans[i].onclick = function () {
                 //this代表spans[i]
                 ul.removeChild(this.parentNode);
                 count--;
                    }
                }
        };
 
    //计数的函数
         function counter() {
             alert('一共发布了'+count+'条留言~');
         }
 
    </script>
 
</body>
</html>

4.点击有惊喜

4.1 效果如下：

4.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击有惊喜</title>
    <style>
        .pla{
            background-color: #4331ff;
            height:333px;
            width:333px;
            margin-top: 55px;
            margin-left: 40%;
            text-align: center;
            line-height: 333px;
            font-size:33px;
            color:white;
        }
    </style>
 
</head>
<body>
 
    <div class="pla">
        点击有惊喜！
    </div>
 
    <script>
        var obj = document.getElementsByClassName('pla')[0];
        console.log(obj);
        var a = 0;
        obj.onclick = function () {
            a++;
            if(a%4===1){
                this.style.background = 'green';
                this.innerText = '请继续~';
                this.style.color = 'black';
            }
            else if(a%4===2){
                this.style.background = 'orange';
                this.innerText = '惊喜马上来！';
                this.style.color = 'white';
            }
            else if(a%4===3){
                this.style.background = 'white';
                this.innerText = '哈哈！逗你玩儿呢！';
                this.style.color = 'black';
            }
            else{
                this.style.background = '#4331ff';
                this.innerText = '点击有惊喜!';
                this.style.color = 'white';
            }
 
        }
 
    </script>
</body>
 
</html>

5.匀速运动

5.1 效果如下：

5.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/
            /*padding:0;*/
            /*margin:0;*/
        /*}*/
 
        .box{
            width:100px;
            height:100px;
            background-color: #2b84da;
            position:absolute;
            left:0;
 
        }
 
    </style>
 
</head>
<body>
    <input id="btn" type="button" value="动起来" />
    <br><br>
    <div id="box1" class="box" ></div>
 
    <script>
        var btn = document.getElementById('btn');
        var box = document.getElementById('box1');
 
        var count = 0;
        var time = null;
 
        btn.onclick = function () {
            time = setInterval(function () {
                count += 10;
                if(count>200){
                    clearInterval(time);
                    box.style.display = 'none';
                }
                //移动靠改变left的值
                box.style.left = count + 'px';
 
            },100)
        }
 
    </script>
 
</body>
</html>

6. 5秒后关闭广告

6.1 效果如下：

6.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0;margin:0;}
 
        img{
            height:266px;
            width:256px;
            position: fixed;
            left:0;
            top:0;
        }
 
        ul{
            list-style-type:none;
        }
    </style>
 
</head>
<body>
 
    <img src="1.png" id="img">
    <ul>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
        <li>把标准养成习惯，让习惯符合标准</li>
    </ul>
 
    <script>
        window.onload = function () {
            var img = document.getElementById('img');
 
            setTimeout(function () {
                img.style.display = 'none';
            },3000);
 
        }
 
    </script>
 
</body>
</html>

7.左侧菜单

7.1 效果如下：

7.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 
        .hide{
            display:none;
        }
 
        .item .header{
            height:35px;
            background:grey;
            color: orange;
            line-height: 35px;
        }
 
    </style>
 
</head>
<body>
    <div style="height:48px"></div>
 
    <div style="width: 300px;">
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1')">菜单一</div>
            <div class="content">
                <div>内容一</div>
                <div>内容二</div>
                <div>内容三</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu('i2')">菜单2</div>
            <div class="content hide">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>
            <div class="content hide">
                <div>内容1</div>
                <div>内容2</div>
                <div>内容3</div>
            </div>
        </div>
    </div>
 
    <script>
        function ChangeMenu(nid) {
            var current_header = document.getElementById(nid);
            var item_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }
            //当前的兄弟的下一个div去掉hide
            current_header.nextElementSibling.classList.remove('hide');
        }
 
    </script>
 
</body>
</html>

8. 全选反选取消操作的Dom实现

8.1 效果如下：

8.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
</head>
<body style="margin: 0 auto">
    <div >
        <input type="button" value="添加" >
        <input type="button" value="全选" onclick="selectall()">
        <input type="button" value="反选" onclick="non_select()">
        <input type="button" value="取消" onclick="cancle()">
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.2</td>
                    <td>191</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>192</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script>
        function selectall() {
            var tbody = document.getElementById("tb");
            //获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i<tr_list.length;i++){
                //循环所有tr找到当前tr
                var current_tr = tr_list[i];
                //找到tr的第一个孩子的第一个孩子，就是checkbox的input
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
 
        }
 
        function cancle() {
            var tbody = document.getElementById("tb");
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
 
        function non_select() {
            var tbody = document.getElementById("tb");
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){
                    checkbox.checked = false;
                }
                else {
                    checkbox.checked = true;
                }
            }
 
        }
 
    </script>
 
</body>
</html>

9.模态对话框——这个用的比较多

9.1 效果如下：

9.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 
        .hide{
            display: none;
        }
 
        .c1{
            position: fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background-color: grey;
            opacity:0.7;
            z-index: 9;
        }
 
        .c2{
            width:500px;
            height:400px;
            background-color: white;
            position: fixed;
            left:50%;
            top:50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
 
    </style>
 
</head>
<body style="margin: 0 auto">
    <div >
        <input type="button" value="添加" onclick="show()">
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.2</td>
                    <td>191</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>192</td>
                </tr>
 
            </tbody>
 
        </table>
 
    </div>
 
    <!--第二层的遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!--第二层的遮罩层结束-->
    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text"></p>
        <p><input type="text"></p>
        <p>
            <input type="button" value="确定">
            <input type="button" value="取消" onclick="hide()">
 
        </p>
    </div>
    <!--弹出框结束-->
 
    <script>
        function show() {
            document.getElementById("i1").classList.remove('hide');
            document.getElementById("i2").classList.remove('hide');
 
        }
 
        function hide() {
            document.getElementById("i1").classList.add('hide');
            document.getElementById("i2").classList.add('hide');
        }
 
    </script>
 
</body>
</html>

10.Dom获取当前时间

10.1 效果如下：

10.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
 
        setInterval(function () {
 
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth();
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        document.body.innerHTML = '今天是'+ y +'年' + num(m+1)+ '月' + num(d) + '日' + num(h) + ':' + num(min) + ':' + num(s);
        },1000);
 
        function num(n) {
            if(n<10){
                return '0' + n;
            }
            else {
                return n;
            }
        }
 
    </script>
 
</body>
</html>

11.输入框案例

11.1 效果如下：

11.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{padding:0;margin:0;}*/
        .w_div{
           border:2px orange solid;width:388px;
            position: relative;
        }
 
        #msg{
            position: absolute;
            left:0;
            top:72px;
            color:grey;
        }
 
    </style>
 
</head>
<body>
    <div style="border: 2px red solid;width:388px;">
        <br>
        <label>placeholder方法效果:</label>
        <input style="height: 33px;width:196px;" type="text" placeholder="请输入内容~  aa">
         <br><br>
    </div>
    <br><br>
 
    <div class="w_div" >
        <br>
        <label>label与input利用position方法:</label>
        <br><br>
        <input style="height:33px;width:196px" type="text" id="text" />
        <lable for="txt" id="msg">输入~~  aa</lable>
        <br><br>
    </div>
 
    <script>
        var text = document.getElementById('text');
        var msg = document.getElementById('msg');
        //检测用户输入表单的时候
        text.oninput = function () {
            if(this.value === ''){
               msg.style.display = 'block';
            }
            else
            {
                msg.style.display = 'none';
            }
        }
 
    </script>
 
</body>
</html>

12.联动框

12.1 效果如下：

12.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联动</title>
</head>
<body>
<select name="" id="province">
    <option value="">请选择省份</option>
</select>
 
<select name="" id="city">
    <option value="">请选择城市</option>
</select>
 
<script>
     data = {"内蒙古":["包头市","呼和浩特市","乌海市","临河市"],"四川省":["成都市","绵阳市"],"河北省":["邯郸市","邢台市"]};
 
     p = document.getElementById('province');
     c = document.getElementById('city');
 
     for(var i in data){
         optionP = document.createElement('option');
         optionP.innerHTML = i;
         p.appendChild(optionP);
     }
 
     p.onchange = function(){
         //先清空city的option
         c.innerHTML = '';
         current_pro = this.value;
          //获取省份的option的value的值也可以这么做：
         //this.options：所有的option标签；this.selectedIndex：当前选择的标签的索引
         //var current_pro = (this.options[this.selectedIndex]).innerText;
         city_lst = data[current_pro];
         // console.log(city_lst);
        //遍历city_lst，重铸city的option
         for(var i=0;i<city_lst.length;i++){
             optionC = document.createElement('option');
             optionC.innerHTML = city_lst[i];
             c.appendChild(optionC)
         }
     }
 
</script>
</body>
</html>

13.计时器

13.1效果如下：

13.2 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<input type="text" id="time" style="width: 233px;">
<input type="button" id="start" value="start">
<input type="button" id="stop" value="stop">
 
<script>
    text_obj = document.getElementById('time');
    start_obj = document.getElementById('start');
    stop_obj = document.getElementById('stop');
 
    //设置一个全局变量，接收setInterval计时器对象，方便后面将它clear掉
    var s;
    //格式化显示格式
    function num(n) {
            if(n<10){
                return '0' + n;
            }
            else {
                return n;
            }
        }
    //开始
    start_obj.onclick = function(){
       s = setInterval(function () {
 
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth();//0--11,所以实际月份得加1
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        text_obj.value = '今天是'+ y +'年' + num(m+1)+ '月' + num(d) + '日' + num(h) + ':' + num(min) + ':' + num(s);
        },1000);
    };
    //停止
    stop_obj.onclick = function(){
        clearInterval(s);
    }
 
</script>
</body>
</html>

14.文字动态变化

14.1 效果如下：

14.2 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1" style="background-color: aqua">欢迎欢迎莅临指导</div>
 
    <script>
        function func1() {
 
        //根据id获取指定标签的内容，定义局部变量接收
        var tag = document.getElementById("i1");
        //获取标签内部的字符串
        var content = tag.innerText;
 
        var f = content.charAt(0);
        var l = content.substring(1,content.length);
 
        var new_content = l+f;
       tag.innerText = new_content;
 
        }
 
       setInterval('func1()',500)
 
    </script>
 
</body>
</html>

Dom操作的常用案例实现的更多相关文章

python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法
(一)认识JQuery JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法 JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...
WebApis中DOM操作的基本案例
1.1. 排他操作 1.1.1 排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法: 所有元素全部清除样式(干掉其他人) 给当前元素设置样式 (留下我自己) 注意 ...
12-关于DOM操作的相关案例
1.模态框案例需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框代码如下: <!DOCTYPE html> <h ...
关于DOM操作的相关案例
1.模态框案例需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框代码如下: <!DOCTYPE html> <h ...
12 DOM操作的相关案例
1.模态框案例需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框代码如下: <!DOCTYPE html> <h ...
JQuery之DOM操作及常用函数
属性操作 attr(name)获取属性值 var imgSrc = $("img").attr("src") attr(name,value)设置属性值 $(& ...

随机推荐

对中文进行MD5加密的注意事项（Java版，编码问题）
http://blog.csdn.net/tongdao/article/details/20690187 在工作中需要和第三方进行Http通信,在通信内容中有几个参数涉及到了中文.自己在进行MD5加 ...
LeetCode - Number of Distinct Islands
Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...
java保留2位小数及BigDecimal使用
java保留两位小数的方法 import java.math.BigDecimal; import java.text.DecimalFormat; import java.text.NumberFo ...
初始Openwrt
系统结构在上一章我们已经完成了刷机工作,这个时候系统进行了首次启动,并且格式化了它的"可写"分区.那么在设备里分区到底是怎么样进行的呢?我们首先需要知道:不同的处理器下OpenW ...
maven 阿里云国内镜像中央仓库
修改maven根目录下的conf文件夹中的setting.xml文件,具体内容和示意图如下: <mirror> <id>alimaven</id> <name ...
GUI相关学习资料
分类 1,基于OS,包括windows,linux,android,ios 2,基于语言,包括c++,java,c#,javacript 3,按照技术分类,这个其实和os,编程语言分不开,大概可以分为 ...
TypeScript 之类型推导
https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Type%20Inference.html 类型推导:发生在初始化变 ...
ElasticSearch（六）底层索引控制
相似度算法涉及到了ES的底层,首先讲一下ES的底层核心,相似度模型,ES的查询和传统的数据库查询最大的差别就在相似度查询(之前讲过,索引存储的最大差别就是讲非结构化数据转化为结构化),ES里面会给文 ...
Typescript学习总结之模块
面向对象的特性模块模块可以帮助开发者将代码分割为可重用的单元.开发者可以自己决定将模块中的哪些资源(类.方法.变量) 暴露给外部使用,哪些资源只在模块内使用. 如下图, 创建了a.ts 和b.ts ...
Tornado cookie 笔记
set_cookie()/get_cookie()的使用 def get(self): # self.get_cookie()获取cookie if not self.get_cookie('name ...

Dom操作的常用案例实现

Dom操作的常用案例实现的更多相关文章

随机推荐

热门专题