day04：自定义属性

最新推荐文章于 2024-08-06 12:58:11 发布

Laker 23

最新推荐文章于 2024-08-06 12:58:11 发布

阅读量133

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/qq_51667621/article/details/129602266

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、列表隔行换色效果
二、列表高亮显示
三、显示隐藏二维码模板
四、通过name属性获取元素
五、根据类样式获取元素
七、获取元素的其他方式
八、总结
九、鼠标经过显示边框
十、扩展搜索效果
十一、扩展输入密码长度
十二、设置和获取文本框的值
十三、设置自定义属性

一、列表隔行换色效果

<input type="button" value="隔行换色" id="btn">
<ul id="uu">
    <li>红旗</li>
    <li>五菱宏光</li>
    <li>奔驰</li>
    <li>兰博基尼</li>
    <li>哈弗</li>
    <li>奥拓</li>
    <li>奥迪</li>
    <li>悍马</li>
</ul>
<script src="publick.js"></script>
<script>
    // 需求：奇红偶黄
    my$("btn").onclick = function(){
        // 获取所有的li
        var list = my$("uu").getElementsByTagName("li");//集合--伪数组
        // 循环遍历
        for(var i = 0; i < list.length; i++){
            // 判断
            if(i % 2 == 0){//表示的是偶数(因为我们的下标是从0开始)
                list[i].style.backgroundColor = "red";
            }else{
                list[i].style.backgroundColor = "yellow";
            }
        }

    }
</script>

二、列表高亮显示

<style>
    ul{
        list-style: none;
        cursor: pointer;
    }
</style>
<ul>
    <li>金士百</li>
    <li>雪花</li>
    <li>百威</li>
    <li>燕京</li>
    <li>青岛</li>
    <li>崂山</li>
    <li>珠江</li>
    <li>华丹</li>
    <li>勇闯天涯</li>
    <li>江小白</li>
    <script src="publick.js"></script>
    <script>
        var list = document.getElementsByTagName("li");//集合
        // 循环遍历
        for(var i = 0; i < list.length; i++){
            // 鼠标经过
            list[i].onmouseover = function(){
                // 当前，自己，自身
                this.style.backgroundColor = "pink";
            }
            // 鼠标离开
            list[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }
    </script>
</ul>

三、显示隐藏二维码模板

<style>
        .nodeSmall {
            width: 50px;
            height: 50px;
            background: url(images/bgs.png) no-repeat -159px -51px;
            position: fixed;
            right: 10px;
            top: 40%;
        }
        .erweima {
            position: absolute;
            top: 0;
            left: -150px;
        }
        .nodeSmall a {
            display: block;
            width: 50px;
            height: 50px;
        }
        .hide {
            display: none;/*隐藏*/
        }

        .show {
            display: block;/*显示*/
        }
</style>
<div class="nodeSmall" id="node_small">
    <a href="#"></a>
    <div class="erweima hide" id="er">
        <img src="images/456.png" alt=""/>
    </div>
</div>
<script src="publick.js"></script>
<script>
    // 获取外面div里面的a链接
    var aObj = my$("node_small").getElementsByTagName("a")[0];
    // 鼠标经过和鼠标离开
    aObj.onmouseover = function(){
        my$("er").className = "erweima show";
    }
    // 鼠标离开
    aObj.onmouseout = function(){
        my$("er").className = "erweima hide";
    }
</script>

四、通过name属性获取元素

<input type="button" value="显示效果" id="btn"><br />
<input type="text" value="大家继续棒棒哒，给力" name="name1"><br />
<input type="text" value="大家继续棒棒哒，给力" name="name2"><br />
<input type="text" value="大家继续棒棒哒，给力" name="name1"><br />
<input type="text" value="大家继续棒棒哒，给力" name="name3"><br />
<input type="text" value="大家继续棒棒哒，给力" name="name1"><br />
<input type="text" value="大家继续棒棒哒，给力" name="name1"><br />
<input type="text" value="大家继续棒棒哒，给力" name="name1"><br />
<script src="publick.js"></script>
<script>
    my$("btn").onclick = function(){
        // 通过name属性获取元素
        var inputs = document.getElementsByName("name1");//集合--伪数组
        // 遍历循环
        for(var i = 0; i < inputs.length; i++){
            inputs[i].value = "大家继续优秀";
        }
    }
</script>

五、根据类样式获取元素

<style>
    div{
        width: 300px;
        height: 50px;
        background: pink;
        margin-top: 10px;
    }
    .cls{
        background: skyblue;
    }
</style>
<input type="button" value="显示效果" id="btn">
<p class="cls">这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<span class="cls">这是第一个span标签</span><br />
<span >这是第二个span标签</span><br />
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>

<script src="publick.js"></script>
<script>
    // getElementsByClassName() --- 这个是H5新增加的
    // 需求：点击这个按钮实现只要是带cls这个类，都变背景色
    my$("btn").onclick = function(){
        var objs = document.getElementsByClassName("cls");//集合--为数组（注意cls前面没有点）
        // 循环遍历
        for(var i = 0; i < objs.length; i++){
            objs[i].style.backgroundColor = "red";
        }
    }
</script>

七、获取元素的其他方式

<input type="button" value="显示效果" id="btn">
<p class="cls">这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<script src="publick.js"></script>
<script>
    // 总结：归类这两个都是根据选择器的方式来获取元素的
    // var btn = document.getElementById("btn")--这是我们第一个学习的
    // var btnObj = document.querySelector("#btn");//这个写法前面必须加#号
    // btnObj.onclick = function(){
    //     alert("哈哈，大家厉害了，我们学习全面啊，详细啊")
    // }

    
    var objs = document.querySelectorAll(".cls");//集合--伪数组
    // 循环遍历
    for(var i = 0; i < objs.length; i++){
        objs[i].style.backgroundColor = "orangered";
    }
</script>

八、总结

获取元素的方式大总结：
根据id获取元素
1、document.getElementById(“id的属性值”)
根据标签获取元素
2、document.getElementsByTagName(“标签的名字”)
根据name的属性值获取元素
3、document.getElementsByName(“name的属性值”)
根据类样式的名字获取元素
4、document.getElementsByClassName(“类样式的名字”)

根据选择器的方式来获取元素
5、document.querySelector(“#btn”)
6、document.querySelectorAll(“.cls”)
7、document.body 专门获取body标签

扩展： 获取html的元素— document.documentElement–这个是专门来获取html这个标签的）

九、鼠标经过显示边框

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 200px;
            height: 150px;
            float: left;
            background: pink;
            margin-left: 10px;
            border:2px solid pink;
            /*小技巧，默认给个边框，这个边框的颜色就是背景色*/
        }
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="publick.js"></script>
<script>
    var divs = document.getElementsByTagName("div");//集合 ---伪数组
    // 循环遍历
    for(var i = 0; i < divs.length; i++){
        // 鼠标经过
        divs[i].onmouseover = function(){
            // 自身，自己
            this.style.border = "2px solid #f40";
        }
        // 鼠标离开
        divs[i].onmouseout = function(){
            // 自身，自己
            this.style.border = "";
        }
    }
</script>

十、扩展搜索效果

<style>
        input{
            color:gray;
            outline: none;
        }
</style>
<input type="text" value="请输入搜索内容" id="txt">
    <script src="publick.js"></script>
    <script>
        // 获取焦点事件 onfocus
        my$("txt").onfocus = function(){
            // 判断
            if(this.value == "请输入搜索内容"){
                this.value = "";//表示清空
                this.style.color = "black";
            }
        }

        // 失去焦点事件 onblur
        my$("txt").onblur = function(){
            // 判断
            if(this.value == ""){
                this.value = "请输入搜索内容";
                this.style.color = "gray";
            }
        }
</script>

十一、扩展输入密码长度

<input type="password" value="" id="txt">
<script src="publick.js"></script>
<script>
    // 需求：判断密码长度，我们要求的是密码长度是>=6并且 <=10 
    //(长度不能小于6位，不能超过10位)
    my$("txt").onblur = function(){
        if(this.value.length >= 6 && this.value.length <= 10){
            this.style.backgroundColor = "pink";
        }else{
            this.style.backgroundColor = "red";
        }
    }
    // 密码长度判断，工作里面正则表达式
</script>

十二、设置和获取文本框的值

<input type="text" value="我是内容" id="txt">
<script src="publick.js"></script>
<script>
    my$("txt").onblur = function(){
        // 设置文本框的值
        this.value = "看我72变化，哈哈";//设置文本框的值
        console.log(this.value);//获取文本框的值
        console.log(this.type);//获取文本框的类型
        console.log(this.id);//获取文本框的id
    }
</script>

十三、设置自定义属性

<style>
        ul{
            list-style: none;
            cursor: pointer;
        }
</style>
<ul id="uu">
    <li>小明的成绩</li>
    <li>小丽的成绩</li>
    <li>小花的成绩</li>
    <li>小李的成绩</li>
    <li>乔峰的成绩</li>
</ul>
<script src="publick.js"></script>
<script>
    // 设置自定义属性：setAttribute("属性的名字","属性的值");
    // 获取自定义属性: getAttribute("属性的名字")
    // 根据id获取ul标签里面的所有的li
    var list = my$("uu").getElementsByTagName("li");//集合--伪数组
    // 循环遍历
    for(var i = 0; i < list.length; i++){
        list[i].setAttribute("score",(i+1) * 20);
        // 点击每个li标签，显示对应的自定属性的值
        list[i].onclick = function(){
            alert(this.getAttribute("score"));
        }
    }
    // 应用场景就是tab栏切换
</script>