day -js+jq

一. DOM

1. 查找标签

1）直接查找

全局查找

        document.getElementById("idname")
        document.getElementsByTagName("tagname")
        document.getElementsByName("name")
        document.getElementsByClassName("name")

局部查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        ele = document.getElementById("idname")
        ele.getElementsByClassName("c1")
    </script>
</head>
<body>
    <div id="idname">
        ...
    </div>
</body>
</html>

2）导航查找

        document.parentElement
        document.children
        document.firstElementChild
        document.lastElementChild
        document.nextSibling
        document.previousSibling

2. 操作标签

1）操作文本

取值操作：

        dom.innerHTML:<a>123</a>
        dom.innerText:123

赋值文本

        dom.innerHTML="<a>123</a>"
        dom.innerText="123"

2）操作value

针对input,select,textare

3）操作属性

        dom.setAttribute(name,value)
        dom.getAttribute(属性名)
        dom.removeAttribute("属性名")

4）class属性操作

        dom.classList.add("c4")
        dom.classList.remove("c4")

5）css的样式操作

        dom.style.color = "red"

6）节点的增删改查

        //创建节点
        document.createElement("p")
        //添加节点
        添加节点的父节点.appendChild("p")
        //删除节点
        删除节点父节点.removeChild("p")
        //替换节点
        替换节点的父节点.replaceChild(新节点,旧节点)

3. 事件绑定

        dom.onclick=function () {
            
        }

二. 二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province">
        <option value="">请选择省份</option>
        <option value="henan">河南省</option>
        <option value="hubei">湖北省</option>
        <option value="hunan">湖南省</option>
    </select>

    <select id="city">
        <option value="">请选择城市</option>
    </select>

    <script>
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        province.onchange = function () {
        var data = {"henan":["郑州","开封","洛阳"],"hunan":["长沙","岳阳","衡阳"],"hubei":["武汉","宜昌","襄阳"]};
        var choose_pro = this.value;
        var cities = data[choose_pro];
        //清空操作
        city.options.length=1
        for (var i=0;i<cities.length;i++){
            //创建节点
            var option = document.createElement("option")
            option.innerHTML = cities[i];
            //添加节点
            city.appendChild(option)
        }
        }
    </script>
</body>
</html>

三.Jquery

Jquery类==$类

Jquery对象==$()

1. 查找标签

    <script src="jquery.js"></script>
    <script>
        document.getElementsByClassName("c1")
        $(".c1")
    </script>

集合类型：

　　1. 元素一定是DOM对象

　　2. 提供了更多的方法

dom对象和query对象的对象

　　　　　 $()[0]

$("c1") ----------------------→ DOM对象

-------------------------

　　　　　$(DOM)　

选择器

        //层级选择器
        $(".c1 .c2 span")

导航查找

        //查找兄弟标签
        // [dom1,dom2,dom3,dom4,dom5] --- [dom2] --- [dom3]
        $(".c2 .c3").eq(1).next().css("color","red");
        //查找父亲
        $(".end").parent()
        //查找后代
        $(".c1").children(".c2").css("color","red");

2.操作标签　

1）文本操作

        $().html()
        $().text()

2) value操作

$().val()

3) 属性操作

   $().attr(属性名，属性值)

4）class操作

        $().addclass()
        $().removeclass()

5）css样式操作

$().css("color","red")

6）节点操作

        //创建节点
        var $ele=$("<img>")
        //添加节点
        $("父节点").append($ele);
        $("父节点").append("<img src=''>");

猜你喜欢