【前端】【JS】前端学习之路（九）：DOM练习（四）（失去&获得焦点事件/tab案例/自定义属性）

1.模拟搜索

<input type="text" value="请输入搜索的具体内容" id="btn" style="color: grey;"/>

<script>
    //要让搜索框产生焦点的时候为空，失去焦点的时候默认填入“请输入搜索的具体内容” 并且文字为灰色

    //产生焦点操作
    my$("btn").onfocus = function () {
        if (this.value == "请输入搜索的具体内容") {
            this.value = "";
            this.style.color = "black";
        }

    };

    //失去焦点操作
    my$("btn").onblur = function () {
        if (this.value == "") {
            this.value = "请输入搜索的具体内容";
            this.style.color = "grey";
        }
    };


</script>

失去焦点：

获得焦点：

2.获取和设定自定义属性

<ul id="uu">
    <li>Chandler的成绩</li>
    <li>Monica的成绩</li>
    <li>Rachel的成绩</li>
    <li>Ross的成绩</li>
    <li>Joey的成绩</li>
</ul>

<script>
    var LiObj = my$("uu").getElementsByTagName("li");

    for (var i = 0; i < LiObj.length; i+&