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

简介

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

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

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

安装

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

然后看到如下两个：

在这里插入图片描述

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

在这里插入图片描述

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

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

1
2

演示

jQuery的入口函数

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

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

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

1
2
3
4
5
6
7
8
9
10

是为了防止文档在完全加载（就绪）之前运行 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>testtitle>
head>
<body>
    <script>
        $(function(){
            alert(22)
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后看效果：

在这里插入图片描述

顶级对象 $

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

因为$ 是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>testtitle>
head>
<body>
    <div >测试div>
    <script>
        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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

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

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

在这里插入图片描述

jQuery对象和dom对象转换

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

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

两者如此转换呢？

DOM对象转换jQuery对象：

$(DOM对象)
1

演示

在这里插入图片描述

jQuery对象转换为DOM对象：

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

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

1
2
3
4
5

在这里插入图片描述

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

相关阅读:
【数据结构】队列
[山东科技大学OJ]2677 Problem D: 求e的近似值
【线性系统理论】笔记三
Java单例模式的几种写法及其优缺点，用Enum枚举实现被认为是最好的方式？
GoLang核心知识点
pycharm安装（windows）
Flask框架配置Celery-[2]:将前端上传的文件，通过异步任务保存，异步处理上传的文件
UTONMOS：元宇宙如何破解虚拟经济的人、货、场问题
AD教程（九）导线及NetLabel的添加
自动化测试工具的定义及作用

原文地址：https://blog.csdn.net/u011863822/article/details/125892542