day -js+jq

A. DOM

1. Find label

1) a direct lookup

Global Search

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

Find locally

<!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) Find a navigation

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

2. Operation label

1) Operation text

Operating values:

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

Text assignment

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

2) Operation value

For input, select, textare

3) Operation attribute

        dom.setAttribute(name,value)
        dom.getAttribute (property name)
        dom.removeAttribute ( "property name")

4) class attribute manipulation

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

5) css style operation

        dom.style.color = "red"

6 additions) change search node

        // Create node
        document.createElement("p")
        // add nodes
        Add a node's parent .appendChild ( "p")
        // delete nodes
        Delete parent node .removeChild ( "p")
        // replace node
        .ReplaceChild replace the parent node (new node, old node)

3. Event binding

        dom.onclick=function () {
            
        }

II. Two linkage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province">
        <Option value = ""> Please select a province </ option>
        <Option value = "henan"> Henan </ option>
        <Option value = "hubei"> Hubei </ option>
        <option value="hunan">湖南省</option>
    </select>

    <select id="city">
        <Option value = ""> Please select a city </ option>
    </select>

    <script>
        var province = document.getElementById("province");
        var city = document.getElementById("city");
        province.onchange = function () {
        var data = { "henan": [ "Zhengzhou", "opened", "Luoyang"], "hunan": [ "Changsha", "Yueyang", "Hengyang"], "hubei": [ "Wuhan", " Yichang "," Xiangyang "]};
        var choose_pro = this.value;
        var cities = data[choose_pro];
        // emptying operation
        city.options.length=1
        for (var i=0;i<cities.length;i++){
            // Create node
            var option = document.createElement("option")
            option.innerHTML = cities[i];
            // add nodes
            city.appendChild(option)
        }
        }
    </script>
</body>
</html>

Three .Jquery

Jquery class == $ class

Jquery objects == $ ()

1. Find label

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

Collection type:

　　1. The elements must be DOM object

　　2. Provide more ways

Objects dom objects and query objects

　　　　　 $()[0]

$ ( "C1") ---------------------- → DOM objects

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

　　　　　$ (DOM)　

Selector

        // level selector
        $(".c1 .c2 span")

Navigation Find

        // Find Brother Label
        // [dom1,dom2,dom3,dom4,dom5] --- [dom2] --- [dom3]
        $(".c2 .c3").eq(1).next().css("color","red");
        // Find a father
        $(".end").parent()
        // Find offspring
        $(".c1").children(".c2").css("color","red");

2. Operation label　

1) text manipulation

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

2) value operation

$().val()

3) Operation attribute

   $ (). Attr (attribute name, attribute value)

4) class operation

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

5) css style operations

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

6) node operation

        // Create node
        var $ele=$("<img>")
        // add nodes
        $ ( "Parent") .append ($ ele);
        $("父节点").append("<img src=''>");

Guess you like