zoukankan      html  css  js  c++  java
  • js中的DOM对象和jQuery对象的比较

    1. 二者的不同之处:

    通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象。 

    例如, 针对下面的一个div结构:

        <div id="Box"></div>
        <div class="box"></div>
        <div class="box"></div>

    通过原生JS获取这些元素节点的方式是:

    <script type="text/javascript">
            var myBox = document.getElementById("Box")          //通过id获取单个元素
            var boxArr = document.getElementsByClassName("box") //通过class获取的是伪数组
            var divArr = document.getElementsByTagName("div")   //通过标签获取的是伪数组
    </script>

    通过jQuery获取这些元素节点的方式:

       <script src="jquery.js"></script>
       <script type="text/javascript">
            <!--获取的是数组, 里面包含着原生JS中的DOM对象-->
            console.log($("#Box"));
            console.log($(".box"));
            console.log($("div"));
        </script>

    结果显示为:

    由于jQuery自带了css()方法,我们还可以直接在代码中给div设置css属性, 如下面所示:

            $("div").css({
                "width": "200px",
                "height": "200px",
                "background-color": "red",
                "margin-top": "20px"
            })

    总结:

    jQuery就是把DOM对象重新包装了一下, 让其具有了jQuery方法。

    2. 二者的相互转换

    (1)DOM对象转为jQuery对象:

    $(JS对象);

    (2)jQuery对象转为DOM对象:

    jQuery对象[index];    //方式1 (推荐使用)
    
    jQuery对象.get(index); //方式2

    jQuery对象转换成DOM对象之后, 可以直接调用DOM提供的一些功能。 

            $("div")[1].style.backgroundColor = "yellow";
            $("div")[2].style.backgroundColor = "red";

    总结:

      如果想要使用使用哪种方式设置属性或方法, 必须转换成该类型。

    3. jQuery示例: 隔行换色

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>隔行换色</title>
        <script src="jquery.js"></script>
        <script>
            $(function () {
                var jQuery_li = $("li");
                for(var i=0; i<jQuery_li.length; i++){
                    if(i % 2 == 0){
                        jQuery_li[i].style.backgroundColor = "yellow";
                    }else {
                        jQuery_li[i].style.backgroundColor = "green";
                    }
                }
            })
        </script>
    </head>
    <body>
        <ul>
            <li>This is the first line.</li>
            <li>This is the second line.</li>
            <li>This is the Third line.</li>
            <li>This is the fourth line.</li>
            <li>This is the fifth line.</li>
            <li>This is the sixth line.</li>
        </ul>
    </body>
    </html>

    显示结果为:

  • 相关阅读:
    Simple Microservices Architecture on AWS
    信封加密 Envelope
    AWS::Serverless::Application
    API Gateway Stage variables
    重新开始继续准备AWS Dev认证考试:AWS Lambda 环境变量
    MXnet 转 OpenVino,在树莓派上做的图片推理
    OpenVino的MXnet模型转换
    Grafana 6.3.3发布 系统指标监控与分析平台
    【小工具】鼠标右键 图片转文字
    【Shiro】Shiro登录验证失败问题
  • 原文地址:https://www.cnblogs.com/yang-wei/p/9494358.html
Copyright © 2011-2022 走看看