javaweb/JQuery/src/jq_js_Conversion.html at master · CPU-Code/javaweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_jq的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1....</div>
    <div id="div2">div2....</div>

    <script>
        /*
            1. JQuery对象在操作时，更加方便。
            2. JQuery对象和js对象方法不通用的.
            3. 两者相互转换
                * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
                * js -- > jq : $(js对象)
         */

        //1. 通过js方式来获取名称叫div的所有html元素对象
        var divs = document.getElementsByTagName("div");
        alert("divs.length = " + divs.length);     //可以将其当做数组来使用

        //对divs中所有的div 让其标签体内容变为""
        for (var i = 0; i< divs.length; i++){
            //divs[i].innerHTML = "divs[" + i + "].innerHTML";
            $(divs[i]).html("$(divs[" + i + "]).html");
        }

        //2. 通过jq方式来获取名称叫div的所有html元素对象
        var $divs = $("div");

        //也可以当做数组使用
        alert("$divs.length = " + $divs.length);

        //对divs中所有的div 让其标签体内容变为""  使用jq方式
        //$divs.html("$divs.html");

        //无法改变
        //$divs.innerHTML = "$divs.innerHTML";

        $divs[0].innerHTML = "$divs[0].innerHTML";
        $divs.get(1).innerHTML = "$divs.get(1).innerHTML";

    </script>
</body>
</html>