01 jQuery入门

2022-10-15 22:14:18

1.jQuery概诉

1.1 javaScript库

仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了

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

简单理解：库就是一个JS文件，对原生JS代码进行封装，高效使用

常见的javaScript库

jQuery
prototype
YUI
Dojo
Ext js
移动端的zepto

1.2 jQuery的概念

jQuery 是一个快速、简介的javaScript库，宗旨是"write Less,Do More" ,倡导写更少的代码做更多的事情

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

优化了DOM操作、事件处理、动画设计、Ajax交互

学习jQ的本质就是学习调用这些函数（方法），提高开发效率

1.3 jQuery 的优点

优点

轻量级。核心文件才几十kb,不会影响页面加载速度
跨浏览器兼容，基本兼容主流浏览器
链式编程，隐式迭代
对事件、样式、动画支持、大大简化DOM操作
支持插件扩展开发，如：树形菜单、日期控件、轮播图
免费、开源

2.jQ的基本使用

2.1 jQuery的下载

1x ：兼容 IE 678 等低版本浏览器，官网不再更新

2x ：不兼容 IE 678 等低版本浏览器，官网不再更新

3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

官网地址： https://jquery.com/

各个版本的下载：https://code.jquery.com/

2.2 jQuery的使用步骤

引入jQuery文件

使用即可

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script src="jquery.min.js"></script>
     <style>
         div {
             width: 200px;
             height: 200px;
             background-color: pink;
         }
     </style>
 </head>
 
 <body>
     <div></div>
     <script>
         $(‘div‘).hide()
     </script>
 </body>
 
 </html>

2.3 jQuery的入口函数

两种写法

$(document).ready(function() {
	...// DOM加载完成的入口
})

$(function() {
    ...// DOM加载完成的入口
})

等着DOM结构渲染完毕即可执行内部代码，不用等待外部资源加载完成加载完成，jQuery帮我们完成了封装
相当于原生js中的DOMcontentLoaded
不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
更推荐使用第一种方式

2.4 jQuery的*对象$

$是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都直接使用$

$ 是jQuery 的*对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用 jQuery 的方法。

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script src="jquery.min.js"></script>
 
     <style>
         div {
             width: 200px;
             height: 200px;
             background-color: pink;
         }
     </style>
 </head>
 
 <body>
     <div></div>
     <script>
         // 1.$是jQuery的别称
         $(function() {
             alert(‘11‘)
         })
         jQuery(function() {
             alert(‘22‘)
         })
         // 2.$是jQuery的*对象，相当于原生javaScript中的window
     </script>
 </body>

2.5 jquery对象和DOM对象

原生JS获取来的对象就是DOM对象
jQuery方法获取的元素就是jQuery对象
jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）
jquery 对象只能使用jquery方法，DOM对象则使用原生js属性和方法

这两个可以互相转换，因为原生js比jq更大，原生有的属性jq没有，想要使用这些属性和方法需要把jq对象转换DOM对象才能使用

DOM对转换jq对象

$(DOM对象)

jq对象转换为DOM对象

$(‘‘)[index]
$(‘‘).get(index)

演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <video src="mov.mp4" muted></video>
    <script>
        // 1. DOM对象转换为jquery对象
        // （1）直接获取视频，得到jq对象
        $(‘video‘)

        // (2) 使用原生js 获取过来DOM对象
        var myvideo = document.querySelector(‘video‘)
            // $(myvideo).play() jq 没有play方法
            // myvideo.play()

        // 2.jq对象转换为DOM对象
        $(‘video‘)[0].play()
        $(‘video‘).get(0).play()
    </script>
</body>

</html>