前端学习笔记-jQuery-jQuery概述

JavaScript库

JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大推函数的精度理解库，就是在找个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单理解：就算一个JS文件，里面对我们原生的js代码进行了封装，存放到里面，这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery，就算为了快速方便的操作DOM，里面基本都是函数（方法）。

 

常见的JavaScript库

• jQuery
• Prototype
• YUI
• Dojo
• Ext JS
• 移动端的zepto

这些库都是对原生的JavaScript的封装，内部都是用JavaScript实现的。

 

jQuery的概念

jQuery是一个快速、简洁的JavaScript框架（js库），其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

优点：

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

 

jQuery的入口函数

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

$(document).ready(function () {
    ... // 此处是页面DOM加载完成的入口
});

 

jQuery的顶级对象 $

 

jQuery对象和DOM对象

• DOM 对象：用原生js获取过来的对象就是DOM对象
• jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装 形成一个伪数组的形式
• jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法

 

jQuery对象和DOM对象相互转换

因为原生的js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法，需要把jQuery对象转换为DOM对象才能使用

1.DOM对象转jQuery对象

$(DOM对象)

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

$('div')[index]         // index是索引号  div 根据实际情况获取

$(‘div’)get(index)

<video src="mov.mp4" muted></video>
    <script>
        
        // 我们直接获取视频，得到就是jQuery对象
        $('video');
        // 我们已经使用原生js 获取过来 DOM对象
        var myvideo = document.querySelector('video');
        
        // 1. DOM对象转换为 jQuery对象
        // $(myvideo) 

        // 2.  jQuery对象转换为DOM对象 才能调用里面的play()方法
        $('video')[0].play()
        $('video').get(0).play()
    </script>