JQuery学习:jquery对象和js对象区别和转换

JQuery对象与JS对象区别与转换

  1、JQuery对象在操作时,更加方便

  2、JQuery对象和js对象方法不通用

  3、两者相互转换

    * jq -- > js:jq对象[索引] 或者 jq对象.ge(索引)

    * js -- > jq:$(js对象)

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery和js对象的转换</title>

    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>

    <div >div1.....</div>
    <div >div2.....</div>
    
    <script>
        //1.通过js方式来获取名称叫div的所有html元素对象
        var divs = document.getElementsByTagName("div");
        alert(divs.length);    //可以将其当作数组来使用
        //对divs中所有的div 让标签体内容变为"aaa"
        for( var i = 0; i < divs.length; i++ ){
            // divs[i].innerHTML = "aaa";
            $(divs[i]).html("ccc");     //js --> jq
        }

        //2、通过jq方式来获取名称叫div的所有html元素对象
        var $divs = $("div");
        alert($divs.length);   //也可以当作数组来使用
        //对divs中所有的div 让标签体内容变为"bbb",使用jq方式
        // $divs.html("bbb");
        $divs[0].innerHTML = "ddd";     //jq对象(索引)
        $divs.get(1).innerHTML = "eee";     //jq对象.get(索引)

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

    </script>


</body>
</html>