【jQuery】2.jquery基础知识2

  • 阿里云国际版折扣https://www.yundadi.com

  • 阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6


    一、jquery对象和DOM对象
    1.DOM对象
    (1)DOM,文档对象模型,每一份DOM都可以表示成一棵树

    (2)从DOM树中可以看出各个元素之间的关系

    (3)可以用getElementById或者getElementsByTagName等方法来获取元素
    节点,这样得到的DOM元素就是DOM对象。DOM对象可以使用原生js中
    的方法,比如innerHtml等

    例子:

    <script>
    var p=document.getElementById('p');
    //用DOM方法得到的对象,就是DOM对象
    alert(p.innerHTML);
    </script>


    2.jquery对象


    jquery对象是由jquery包装过后的DOM对象,它可以使用jquery库里面的方法


    jquery对象无法使用DOM对象中的方法(如果DOM对象中的方法在jquery被改写过,那么可以使用DOM对象中这个被改写的方法)



    例子:


    <script>
    var p=$('p');
    //用jQuery选择器得到的对象,就是jQuery对象
    alert(p.html());
    </script>


    二、DOM对象和jquery对象的互相转换

    (1)jquery对象转成成DOM对象


    有两种方法


    1.使用index


    2.使用get()方法


    测试:


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="GBK">
    <title>demo2.1</title>
    <script src="jquery-1.8.0.min.js"></script>
    </head>
    <body>

    <input type="text" id="a" value="111111"/>
    <script>
    var input=$('#a');
    alert(input.val());
    alert(input[0].value);
    alert(input.get(0).value);
    //jquery对象转换成DOM对象的方法
    //1.可以使用索引,index
    //2.可以使用get(index)方法
    </script>
    </body>
    </html>


    (2)DOM对象转换成jquery对象


    只要把DOM对象用$()包起来就OK了


    测试:


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="GBK">
    <title>demo2.2</title>
    <script src="jquery-1.8.0.min.js"></script>
    </head>
    <body>

    <input type="text" id="a" value="111111"/>
    <script>
    var input=document.getElementById('a');
    alert($(input).val());

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


    三、jquery与其它js库共存

    我们使用js库的时候,不一定会仅仅使用jQuery,还有可能使用其他的js库(如prototype),那么有可能会产生冲突,所以要有一种方法让它们共存。



    共存方法:使用jQuery.noConflict()方法释放$的权



    测试:


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="GBK">
    <title>demo2.3</title>
    <script src="jquery-1.8.0.min.js"></script>
    <script src="prototype.js"></script>
    </head>
    <body>

    <input type="text" id="a" value="aaaaaa"/>
    <script>
    jQuery.noConflict();
    alert($F('a'));//prototype获取value值的方法
    alert(jQuery('#a').val());//jQuery获取value值的方法
    </script>
    </body>
    </html>


    这样就会避免两种“$”权限冲突,我们两种js库就都可以使用了。

  • 阿里云国际版折扣https://www.yundadi.com

  • 阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6