jQuery基础----开始简单的了解

简介

jQuery名字的来自JavaScript和查询（Query），它就是辅助JavaScript开发的js类型。其核心思想是写的更少，做的更多（write less ，do more），所以实现了很多浏览器的兼容问题。

其拥有的优点: 其是免费，开源，其语法涉及可以使开发更加便捷，比如操作文件对象，制作动画效果，事件处理，使用Ajax以及其它功能

而说是聊jQuery其实就是将其一些常用的方法进行演示。

安装

说是安装其更像是简单配置其运行的环境，首先去其官网：https://jquery.com/download/

然后看到如下两个：

在这里插入图片描述

点击的话，不会下载js文件的，而是显示js文件的内容：

在这里插入图片描述

然后放在自己项目所在的地址的后，然后再页面如此配置：

<script src='路径/jquery-xxx.js'></script>

演示

jQuery的入口函数

在实例中的所有 jQuery 函数位于一个 document ready 函数中：

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

// 当然一般会简写为
$(function(){
  //此处是页面DOM加载完成的入口    
})

是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

所以等着DOM结构选用完毕即可执行内部的代码，不必等到所有的外部资源加载完毕，jQuery将其进行封装，相当于js中的DOMContentLoaded，而不是js中的load事件（等待外部的js文件，css文件图片加载完毕才会执行）。

初体验

结构如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>test</title>
</head>
<body>
    <script>javascript">
        $(function(){
            alert(22)
        })
    </script>
</body>
</html>

然后看效果：

在这里插入图片描述

顶级对象 $

是否好玩这个 $ 符号是什么东西。

因为$ 是jquery的别名，在代码中开发中可以使用jQuery代替 $, 但是一般开发为了方便都直接使用$ .

在这里插入图片描述

为什么说是顶级对象呢？因为$对jQuery相当于JavaScript中的window。而元素可以通过$包装的jQuery对象可以调用jQuery的方法。

jQuery对象

原生的JavaScript获取的对象是DOM对象。
jQuery方法回去的是元素的jQuery对象。

两者是不同的对象，当然也可以进行相互转换的，下面测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js"></script>
    <title>test</title>
</head>
<body>
    <div >测试</div>
    <script>javascript">
        var dom=document.querySelector('div');
        console.log(dom)
        console.log(typeof dom)
        var jq= $("div")
        console.log(jq)
        console.log(typeof jq)
    </script>
</body>
</html>

在这里插入图片描述

可以看出两个都是对象，但是又是不同的对象。所以各自的方法调用也会有所不同，dom调用方法就是自己的方法，而jQuery对象自然调用自己的方法，不能彼此调用对方的方法。

同时展开jQuery对象后发现，jQuery对象是一个为数组形式存储的。

在这里插入图片描述

jQuery对象和dom对象转换

当然两个对象也是可以相互转换的，为什么要转换呢？

原生的js比jQuery更大，原生的一些属性和方法jQuery没有完全封装，想要使用这些方法，自然需要把jQuery对象转换为DOM对象才能使用。
而DOM对象转换jQuery对象的原因是，因为jQuery封装js然后直接通过简单的方法或属性就可以调用。也就是方法用户使用一些常用的方法。

两者如此转换呢？

DOM对象转换jQuery对象：

javascript">$(DOM对象)

演示

在这里插入图片描述

jQuery对象转换为DOM对象：

jQuery对象[index]   // index 是索引号

// 或则如下写
jQuery对象.get(index)   // index 是索引号

在这里插入图片描述

现在了解了一下jQuery，后面开始聊一些常用发方法。