前端与移动开发----webAPI----文本框事件,鼠标事件,标签属性操作方式

JavaScript-DOM操作

文本框事件

  • onfocus 获取焦点
dom.onfocus  ---> 获取焦点时候触发事件
  • onblur 失去焦点
dom.onblur    ---> 失去焦点触发事件

鼠标事件

  • onmouseenter 鼠标进入事件【没有事件冒泡】
dom.onmouseenter = function() {}
  • onmouseleave 鼠标离开事件
dom.onmouseleave = function() {}
备注:
onmouseenter 和 onmouseleave 是对应的一组
  • onmouseover 鼠标放到标签之上【会有事件冒泡,少用】
dom.onmouseover = function() {}
  • onmouseout 鼠标离开
dom.onmouseout = function() {}
  • 多个标签注册事件,获取索引方式
实现的功能:
   用户点击(鼠标悬停)到标签上,获取该标签对应的索引方式:
     1.通过给标签(对象)动态添加一个表示索引的属性,并赋值
     2.通过代码获取该索引值即可

案例

  • 隔行变色鼠标移动高亮显示案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            li {
                line-height: 50px;
            }
    
            li:nth-child(even) {
                background-color: green;
            }
    
            li:nth-child(odd) {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>哈哈</li>
            <li>嘿嘿</li>
            <li>嘻嘻</li>
            <li>嗯嗯</li>
        </ul>
        <script>
            var lis = document.querySelectorAll('li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseenter = function () {
                    for (var j = 0; j < lis.length; j++) {
                        lis[j].style.background = '';
                    }
                    this.style.background = 'red';
                }
            }
        </script>
    </body>
    </html>
    

  • tab栏切换案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        	<style type="text/css">
    		* {
    			margin: 0;
    			padding: 0;
    			list-style: none;
    			text-decoration: none;
    			font-size: 20px;
    			font-weight: 700;
    			color: #999;
    		}
    
    		.nav {
    			width: 100%;
    			height: 55px;
    			line-height: 55px;
    			background-color: #ccc;
    		}
    
    		.nav .w {
    			 width: 980px;
    			 margin: 0 auto;
    		}
    
    		.nav li {
    			float: left;
    		}
    
    		.nav li a {
    			display: block;
    			height: 55px;
    			padding: 0 30px;
    		}
    
    		.active {
    			background-color: orange;
    			color: #fff;
    		}
    	</style>
    </head>
    <body>
        <div class="nav">
            <div class="w">
                <ul>
                    <li><a href="javascript:;">首页</a></li>
                    <li><a href="javascript:;">前端培训</a></li>
                    <li><a href="javascript:;">PHP培训</a></li>
                    <li><a href="javascript:;">Java培训</a></li>
                    <li><a href="javascript:;">联系我们</a></li>
                </ul>
            </div>
        </div>
    
        <script>
            
            // 获取a标签
            var aBtns = document.querySelectorAll('.nav a');
    
            // 遍历所有a标签注册鼠标进入事件
            for(var i = 0; i < aBtns.length; i++) {
                  aBtns[i].onmouseenter = function() {
                      this.classList.add('active');
                  }
                  //鼠标离开移除原来的样式
                  aBtns[i].onmouseleave = function() {
                     this.classList.remove('active'); 
                  }
            }
    
    
    
        </script>
    </body>
    </html>
    

标签属性操作方式

  • 系统属性
☞ 获取属性的值:
   dom.getAttribute(属性名);
   备注:
   	   1.通过getAttribute可以获取标签属性对应的值
       2.如果标签没有对应的属性,那么getAttribute返回null
☞ 设置
  dom.setAttribute(属性名,);
    备注:
        1.通过setAttribute可以给标签添加新的属性
        2.如果该标签已经存在某个属性,是对该属性值得修改
☞ 删除
  dom.removeAttribute(属性名);
  	 备注:
     	1.通过removeAttribute可以将属性移除  	
  • 自定义属性( 通过H5中提供的方式设置自定义属性)
概念:以data-* 开始的属性,为自定义属性
作用:保存数据(处理业务中的数据)
注意:H5提供的这种方式就是用来操作自定义属性的,不能操作内置属性
☞ 获取
	dom对象.dataset   --->  返回自定义属性的对象【该属性只能获取自定义属性】    
	dom对象.dataset.属性名称  
	dom对象.dataset["属性名称"]
☞ 设置
	 Dom.dataset.自定义属性名称=;
备注:
	getAttribute()也可以用来获取自定义属性

案例

  • 利用自定义属性实现tab栏切换效果

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box {
                width: 300px;
                border: 1px solid #ccc;
                margin: 50px auto;
            }
    
            .title {
                width: 100%;
                height: 60px;
                line-height: 60px;
            }
    
            .title a {
                display: block;
                height: 100%;
                width: 100px;
                text-align: center;
                text-decoration: none;
                float: left;
                background-color: yellowgreen;
                color: black;
            }
    
            .content {
                width: 100%;
                height: 300px;
            }
    
            .public {
                width: 100%;
                height: 100%;
            }
    
            a.active {
                background-color: orange;
                color: #fff;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div class="title">
                <a href="javascript:;" class="active" data-myID="one">百度</a>
                <a href="javascript:;" data-myID="two">淘宝</a>
                <a href="javascript:;" data-myID="three">京东</a>
            </div>
            <div class="content">
                <div class="public item1" id="one" style="display: block;">百度对应的内容</div>
                <div class="public item2" id="two" style="display: none;">淘宝对应的内容</div>
                <div class="public item3" id="three" style="display: none;">京东对应的内容</div>
            </div>
        </div>
        <script>
            var aBtns = document.querySelectorAll('a');
            var items = document.querySelectorAll('.public');
            //先完成tab栏切换
            for (var i = 0; i < aBtns.length; i++) {
                //点击每一个a标签
                aBtns[i].onclick = function () {
                    //排他思想去掉其他样式
                    for (var j = 0; j < aBtns.length; j++) {
                        aBtns[j].classList.remove('active');
                    }
                    //给当前a标签设置样式
                    this.classList.add('active');
    
                    //2. 点击当前标签的时候,获取标签身上的自定义属性值(其实就是内容区域对应的id值)
                    var id = this.dataset.myid;
                    // console.log(id);
    
                    //利用排他思想,将其他盒子先隐藏
                    for (var k = 0; k < items.length; k++) {
                        items[k].style.display = 'none';
                    }
                    // 3. 通过id获取对应的内容盒子
                    var box = document.getElementById(id);
                    // 4. 将盒子显示
                    box.style.display = 'block';
                }
            }
        </script>
    </body>
    </html>
    

如有不足,请多指教,
未完待续,持续更新!
大家一起进步!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页