初识jQuery

最新推荐文章于 2024-08-02 14:21:03 发布

JJ_Smilewang

最新推荐文章于 2024-08-02 14:21:03 发布

阅读量276

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/125490816

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.JavaScript库

JavaScript库就类似于一个library，是一个封装好的特定的集合（方法和函数）。简单的说就是在这个库里面，封装了很多预先定义好的函数，需要使用的时候直接调用即可。比如动画animate、显示show、隐藏hide等。

我们习惯把封装好的JS文件称之为JS库，而未封装的JS文件称为原生JS代码。jQuery就是我们常见的JavaScript库之一，其里面基本都是函数(方法)，而其内部是用JavaScript实现的。

2.jQuery的概念

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是 “Write Less, Do More" ，即提倡写更少的代码，实现更多的效果。

j 就是 JavaScript，Query 查询，意思就是查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能。

学习jQuery 本质：就是学习调用这些函数（方法）。

jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

jQuery 的优点：

① 轻量级，核心文件才几十kb，不会影响页面加载速度
② 跨浏览器兼容。基本兼容了现在的主流浏览器
③ 链式编程、隐式迭代
④ 对事件、样式、动画支持，大大简化了DOM操作
⑤ 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
⑥ 免费、开源

3. jQuery 的基本使用

3.1 jQuery的入口函数

//  jQuery的入口函数
$(function() {
    // ... 此处是页面DOM加载完成的入口
})

相当于原生代码的：

document.addEventListener('DOMContentLoaded', function() {
    // ... 此处是页面DOM加载完成的入口
});
jQuery的入口函数：

① 它的作用是等着DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，有了它，<script>标签放在html标签的前后均可。

② 相当于原生 js 中的 DOMContentLoaded。

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

3.2 jQuery 的顶级对象 $

// $是jQuery的别称（另外的名字） 即$等同于jQuery
// 入口函数
$(function() {
    alert(11);
}); 
等同于：
jQuery(function() {
    alert(11)
})
我们都知道原生JavaScript 的顶级对象是window，而在jQuery 中的顶级对象则是 $，当然$和jQuery是等同的，但是我们为了方便，通常直接使用$。因此把元素利用$ 包装成 jQuery 对象，就可以调用jQuery 的方法了。

3.3 jQuery 对象和 DOM 对象

<body>
    <div></div>
    <script>
        // 1.DOM对象： 用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); //myDiv 是DOM对象
       
        // 2.jQuery对象：用jQuery方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装
        $('div'); // $('div') 是一个jQuery对象
        console.dir($('div')); // 得到的是一个伪数组

        // 3. jQuery对象只能使用jQuery方法，DOM对象则只能使用原生的JavaScript 属性和方法
        myDiv.style.display = 'none';   // DOM对象隐藏元素的方法
        // myDiv.hide(); // myDiv是一个DOM对象不能使用jQuery里面的hide方法
        // $('div').style.display = 'none'; // 这个 $('div')是一个jQuery对象不能使用原生js 的属性和方法
        $('div').hide();  // jQuery对象隐藏元素的方法
    </script>
</body>

注意：

① 用原生JS 方法获取来的对象就是DOM对象；

② 用jQuery方法获取的元素就是jQuery对象；

③ jQuery对象的本质：利用$ 对DOM对象包装后产生的对象（以伪数组的形式存储）

④ DOM对象和jQuery 对象之间是可以相互转换的，转换方法如下：

（1） DOM对象转换为 jQuery对象：$(DOM对象)
（2） jQuery对象转换为 DOM对象（两种方式）
$('div')[index] // index是索引号，常用
$('div').get(index) // index是索引号

body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为 jQuery对象
        // (1) 我们使用$直接获取视频，得到就是jQuery对象
        $('video');
        console.dir($('video')) // jQuery对象是 伪数组
        // (2) 我们使用原生js 获取过来的是DOM对象 myvideo
        var myvideo = document.querySelector('video');
        // $(myvideo).play(); jQuery里面没有play 这个方法，所以只能转换为DOM对象

        // 2. jQuery对象转换为DOM对象
        // myvideo.play();  
        // $('video')[0].play();
        $('video').get(0).play();
    </script>
</body>

JJ_Smilewang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery

JavaScript库就类似于一个library，是一个封装好的特定的集合（方法和函数）。简单的说就是在这个库里面，封装了很多预先定义好的函数，需要使用的时候直接调用即可。比如动画animate、显示show、隐藏hide等。我们习惯把封装好的JS文件称之为JS库，而未封装的JS文件称为原生JS代码。jQuery就是我们常见的JavaScript库之一，其里面基本都是函数(方法)，而其内部是用JavaScript实现的。jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是 “Write Le
复制链接

扫一扫

专栏目录