jQuery 的基本使用

最新推荐文章于 2024-07-04 12:16:35 发布

Lotus_fragrance

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量160

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/125128860

版权

1、jQuery 的入口函数

2、jQuery 对象和 DOM 对象

#博学谷I学习技术支持#

1、jQuery 的入口函数

1、$(function () {

... // 此处是页面 DOM 加载完成的入口

}) ;

2、$(document).ready(function(){

... // 此处是页面DOM加载完成的入口

});

1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们

完成了封装。

2. 相当于原生 js 中的 DOMContentLoaded 。

3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内

部代码。

4. 更推荐使用第一种方式

代码演示：

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <script>
        $(function() {
            $('div').hide();
        })
    </script>
    <div></div>
</body>

2、jQuery 对象和 DOM 对象

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和

方法需要把 jQuery对象转换为DOM对象才能使用

1. DOM 对象转换为 jQuery 对象： $(DOM对象)

$('div')

2. jQuery 对象转换为 DOM 对象（两种方式）

$('div') [index]， index 是索引号

$('div') .get(index)， index 是索引号

代码演示：

<body>
    <div class="box"></div>

    <script>
        // 2. jQuery 对象转换为 DOM 对象（两种方式）
        // $('div')[index]， index 是索引号
        // $('div').get(index)， index 是索引号
        var box = $('div')[0];
        box.style.width = 100 + 'px';
        box.style.height = 100 + 'px';
        box.style.backgroundColor = 'red';
    </script>
</body>