Jquery学习之路（入门）

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 397 阅读

0 ·

CC 4.0 BY-SA版权

jquery学习之路专栏收录该内容

3 篇文章

订阅专栏

本文介绍了jQuery的基础使用方法，包括$(document).ready的功能及其应用场景，对比了jQuery与原生JavaScript在DOM操作上的区别，并详细讲解了jQuery对象与DOM对象之间的相互转换。

（1）jQuery使用：*$(document).ready* 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

<body>
  <div></div>
</body>
<!--引入jquery-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
   $(document).ready(function() {
     $("div").html("学习jQuery第一天")
   });
</script>

（二）jquery对象和DOM对象：通过jquery包装后的对象，是一个类数组对象，它与DOM对象完全不同，而DOM对象只是单独的一个DOM元素，唯一相似的是都能操作DOM。以下代码比较可以看出jquery简约很多。

<body>
    <p id="ccg1"></p>
    <p id="ccg2"></p>
</body>
<!-- 使用JS原生语法 -->
    <script type="text/javascript">
        window.onload = function() {
            var p = document.getElementById("ccg1");
            p.innerHTML = 'P1: dom对象';
            p.style.color = 'red';
        }
    </script>
<!-- 使用jQuery语法 -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
    <script type="text/javascript">
        $(document).ready(function() {
            /**
             * 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
             * 调用该对象的html()方法进行更改内容
             * 调用该对象的css()方法进行更改颜色样式
             */   
            var $p = $('#ccg2');
            $p.html('P2:jqeury对象').css('color','blue')
        });
    </script>

运行结果如下：
这里写图片描述

（三）jQuery对象转化成DOM对象：因为jquery对象是一个类数组对象，所有可以通过下标索引查找。jquery对象自身提供get()方法直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引

<body>
    <div>元素一</div>
    <div>元素二</div>
    <div>元素三</div>

     <script type="text/javascript">
        var $div = $('div'); //jQuery对象
//      var div = $div[0];  //方法一
        var div = $div.get(0);  //方法二
        div.style.color = 'red'; //操作dom对象的属性
    </script>

</body>

运行效果：
这里写图片描述

（四）DOM对象转化成jQuery对象：如果传递给$(DOM)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
    <script type="text/javascript">
        var div = document.getElementsByTagName('div'); //dom对象
        //将dom节点div转化为$div的jquery对象
        $div =  $(div)
        var $first = $div.first(); //找到第一个div元素
        $first.css('color', 'red'); //给第一个元素设置颜色
    </script>
</body>