猿问

当Js与jQuery同时对一个元素进行修改的时候,是哪个起效呢

为什么我这个“#imooc1”的p标签还是js的效果,JQuery的效果没出来

<script type="text/javascript">
       window.onload = function(){
            // 通过原生JS语法获取id为imooc1的元素p
            var p = document.getElementById('imooc1');
            // 将元素p在html中内容改变
            p.innerHTML = 'P1:您好!通过慕课网学习jQuery才是最佳的途径';
            // 将元素p的内容颜色改为红色
            p.style.color = 'red';    
        }
    </script>
    
    <!-- 使用jQuery语法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            /**
             * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
             * 调用该对象的html()方法进行更改内容
             * 调用该对象的css()方法进行更改颜色样式
             */
             
            $('#imooc1').html('p1:你好,世界').css('color','blue');
            var $p = $('#imooc2');
            $p.html('P2:您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');
        });
    </script>
    
</head>

<body>
    <p id="imooc1"></p>
    <p id="imooc2"></p>
</body>

仲鸣
浏览 1601回答 1
1回答

闹小志

你这个问题想错了侧重点,你要记得,代码都是从上往下执行的。那为什么会出现jquery代码先执行的情况呢?就要从别的方面考虑。首先我们来对程序做一些小改动,给两个函数中添加分别添加个打印:<script type="text/javascript">    window.onload = function(){     console.log("js");     } </script> <!-- 使用jQuery语法 --> <script type="text/javascript">     $(document).ready(function() {       console.log("jquery");     }); </script>运行之后,控制台的输出是这样的:我们再来做一些改变:<script type="text/javascript">    $(document).ready(function() {       console.log("js");     }); </script> <!-- 使用jQuery语法 --> <script type="text/javascript">     $(document).ready(function() {       console.log("jquery");     }); </script>运行结果为:以上结果说明,问题出现在window.onload和$(document).ready上,区别:window.onload  在DOM树和所有文件加载完成之后触发$(document).ready  在DOM树加载完成之后触发两个比较一下,也就是$(document).ready一定是在window.onload之前执行的!over!
随时随地看视频慕课网APP
我要回答