JQuery的入口函数以及对象

最新推荐文章于 2022-04-05 16:09:15 发布

原创最新推荐文章于 2022-04-05 16:09:15 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery的入口函数以及对象

JQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了JQuery，它是快速、轻量且功能丰富的JavaScript库。重点讲解了JQuery入口函数，包括其好处、两种写法，还对比了与window.onload的区别。此外，阐述了JQuery对象与DOM对象的区别、关联以及相互转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是JQuery:js库其实就是一个js文件，里面封装了大量的方法，它是快速的轻量的功能丰富的一个javascript库。

一、入口函数：

入口函数的好处：

1. 保证元素正确加载

2. 形成一个沙箱，防止全局变量污染

写法一：

$(document).ready(function() {

// 当文档加载好了，就执行

console.log('嘿嘿');

});

写法二：

$(function() {

console.log('嘿嘿');

});

入口函数与window.onload的区别：

1. jquery的入口函数可以写多个，不会覆盖。

2. jquery的入口函数执行要比window.onload早。jquery的入口函数只会等页面加载，不会等待图片的加载。

JQuery对象与DOM对象的区别：

DOM对象不能调用jquery对象的方法

jquery对象也不能调用DOM对象的方法

关联： jquery是对DOM的封装 jquery对象是DOM对象的一个集合，内部放的DOM对象

JQuery对象与DOM对象的相互转换：

<body>
  <ul>
    <li id="cloth">衣服</li>
    <li>裤子</li>
    <li>袜子</li>
    <li>裤衩</li>
    <li>鞋子</li>
  </ul>

  <script src="jquery-1.12.4.js"></script>
  <script>
    $(function() {
        var cloth = document.getElementById('cloth');
        // DOM ---->  jquery对象
        // $(DOM)  ----> jquery对象
        // console.log(cloth);
        // console.log($(cloth));
        // cloth.innerText = '哈哈';
        // $(cloth).text('哈哈');


        // jquery对象调用DOM的方法 
        // jquery对象 ------》  DOM对象   只需要取出来
        // $('li').style.backgroundColor = 'red';
        $('li')[2].style.backgroundColor = 'red';



        /* 
          DOM对象：通过webapi中的方法获取到的对象是DOM对象， 只能调用DOM自己的方法

          jquery对象： 通过jquery的方法获取到的对象，，，，jquery对象内部封装了很多的DOM对象，jquery对象自己提供了很多的方法，这些方法都是用来内部的DOM对象。

          DOM对象不能直接调用jquery的方法，想调用，需要把DOM对象变成jquery对象  $(dom)
          jquery对象也不能直接调用DOM的方法，把jquery内部的DOM对象取出来。
        
      */
    })
  </script>
</body>