JQuery应用实例学习 —— 19 JQuery对象与DOM对象的关系与转换

忘是亡心i 2022-05-12 05:18 194阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <h1>jquery对象与DOM对象的关系与转换</h1>
        <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        </ul>
        <p id="test">test</p>
    </body>
    <script src="jquery.js"></script>
    <script>
    // 选择器找到了test才能改背景
    // 下面一行,充分证明$(选择器)返回值不是DOM对象
    $('#test').style.background = 'blue'; 
    
    // 下面二行, 充分证明, DOM对象 ,也不是 $()的返回值.
    var test = document.getElementById('test');
    test.css('background' , 'blue');
    
    // $()返回的到底是什么? 是对象,但不是DOM对象,而是jQuery对象
    /* 
    jquery对象与DOM对象有什么关系?
    答: jQuery按选择器,选中1个或多个DOM对象,
    把这些DOM对象,放在jQuery对象上, 
    索引分别是 0 1 2 3 ...N
    */
    console.log($('li')); 
    // 找到0123依次的4个li对象
    
    // jquery对象转化为DOM对象, 直接[索引] 取值即可
    $('li')[2].style.background = 'blue'; // 第三个li标签对象
    
    // 也可以用get(索引)方法
    $('li').get(3).style.background = 'green'; // 第四个li标签对象
    
    
    // DOM对象,转化为 jquery对象, 直接把DOM对象,传给$()
    $(test).css('background','orange');
    // $('xxx')找xxx标签  $(xxx)找xxxjQuery对象
    
    var lis = document.getElementsByTagName('li'); 
    // ByTagName会找到4个li
    console.log($(lis));
    // 会把4个DOM对象找出来放到他内部
    
    </script>
    </html>