JavaScript笔记（8）：搜索框示例实现、样式操作、属性操作、标签操作

1.以下给出搜索框示例的详细代码：

onclick            //鼠标单击事件
onfocus            //获得焦点事件，即鼠标在本处点击
onblur             //失去焦点事件，即鼠标在别处点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框的实现</title>
</head>
<body>
    <input type="text" id="s_box" onfocus="on_focus();" onblur="on_blur();" value="请输入关键字">

    <script type="text/javascript">
        function on_focus() {
            var sbox_text=document.getElementById("s_box").value;
//            console.log(sbox_text);    用于调试的代码
            if(sbox_text=="请输入关键字") {
//                console.log(1)         用于调试的代码
                document.getElementById("s_box").value = "";
//                sbox_text = "";    该语句并不能修改id为"s_box"标签的value值
            }
        }
        function on_blur() {
            var sbox_text=document.getElementById("s_box").value;
            console.log(sbox_text);
            if(sbox_text=="") {
                 document.getElementById("s_box").value = "请输入关键字";
//                sbox_text = "请输入关键字";
            }
        }
    </script>
</body>
</html>

但是其实它还有一种极为简单的实现方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框的实现</title>
</head>
<body>
    <input type="text" placeholder="请输入关键字" />
</body>
</html>

2.样式操作

（1）常规的<style>标签的操作

（2）通过获取标签进行样式操作

obj.style.fontSize = "16px";
obj.style.backgroundColor = "red";
.style.color = "red";

3.属性操作

attributes            //获取相应标签所有属性的信息
getAttribute          //获取相应标签的某个属性
removeAttribute       //移除响应标签的某个属性

4.标签操作

(1)以字符串形式创建标签，并添加到HTML中

(2)以对象的方式创建标签，并添加到HTML中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过JS添加标签的两种方式</title>
</head>
<body>
    <input type="button" value="第一种" onclick="tag_add_1();">
    <input type="button" value="第二种" onclick="tag_add_2();">
    <div id="tag_add">
        <input type="text">
    </div>

    <script>
        <!--第一种添加标签的方式，以字符串形式-->
        function tag_add_1() {
            var tag = "<input type='text' value='字符串添加'>";
//            var tag = "<input type=\"text\" value=\"字符串添加\">"     或者采用这种写法
            document.getElementById("tag_add").insertAdjacentHTML("beforeEnd",tag);
//           insertAdjacentHTML()的第一个参数只能是"beforeBegin"、"afterBegin"、"beforeEnd"、"afterEnd",这表示标签插入的位置
        }
        function tag_add_2() {
            var tag1 = document.createElement("input");      //createElement(),创建一个<input>标签
            tag1.setAttribute("type","text");     //设置tag1的类型属性为"text"
            tag1.style.color = "red";
            tag1.value = "对象方式添加";

            var tag2 = document.createElement("div");
            tag2.appendChild(tag1);             //appendChild(),将tag1变成tag2的子元素

            document.getElementById("tag_add").appendChild(tag2);
        }
    </script>
</body>
</html>

JavaScript笔记（8）：搜索框示例实现、样式操作、属性操作、标签操作

猜你喜欢