当前位置: 首页 > news >正文

jQuery:入门

jQuery 入门

Date: January 19, 2023


目标:

能够说出什么是 jQuery

能够说出 jQuery 的优点

能够简单使用 jQuery

能够说出 DOM 对象和 jQuery 对象的区别




jQuery 概述

JavaScript 库

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

JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。

常见的JavaScript 库

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

这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。



jQuery 的概念

jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

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

jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质: 就是学习调用这些函数(方法)。
jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

Untitled

优点

轻量级。核心文件才几十kb,不会影响页面加载速度

跨浏览器兼容。基本兼容了现在主流的浏览器

链式编程、隐式迭代

对事件、样式、动画支持,大大简化了DOM操作

支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等

免费、开源




jQuery 的基本使用

jQuery 的下载

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

版本:
1x :兼容 IE 678 等低版本浏览器, 官网不再更新
2x :不兼容 IE 678 等低版本浏览器, 官网不再更新
3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本

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



jQuery 的使用步骤

  1. 引入 jQuery 文件

  2. 使用即可



jQuery 的入口函数

$(function () {       ...  // 此处是页面 DOM 加载完成的入口 
}) ;
$(document).ready(function(){   ...  //  此处是页面DOM加载完成的入口
});
  1. 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
  2. 相当于原生 js 中的 DOMContentLoaded。
  3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
  4. 更推荐使用第一种方式。
  • Code:

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script><style>div {width: 200px;height: 200px;background-color: pink;}</style>
    </head><body><script>// $('div').hide();// 1. 等着页面DOM加载完毕再去执行js 代码// $(document).ready(function() {//     $('div').hide();// })// 2.  等着页面DOM加载完毕再去执行js 代码$(function() {$('div').hide();})</script><div></div></body></html>
    

为什么要等到DOM结构渲染完毕再执行内部代码?



jQuery 的顶级对象 $

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

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



jQuery 对象和 DOM 对象

  1. 用原生 JS 获取来的对象就是 DOM 对象

  2. jQuery 方法获取的元素就是 jQuery 对象。

  3. jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。

注意:

只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。

DOM 对象与 jQuery 对象之间是可以相互转换的。

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

  1. DOM 对象转换为 jQuery 对象: $(DOM对象)
$('div')
  1. jQuery 对象转换为 DOM 对象(两种方式)
$('div') [index]       index 是索引号
$('div') .get(index)    index 是索引号
  • Code:jQuery顶级对象$

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script><style>div {width: 100px;height: 100px;background-color: pink;}</style>
    </head><body><div></div><span></span><script>// 1. DOM 对象:  用原生js获取过来的对象就是DOM对象var myDiv = document.querySelector('div'); // myDiv 是DOM对象var mySpan = document.querySelector('span'); // mySpan 是DOM对象console.dir(myDiv);// 2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装$('div'); // $('div')是一个jQuery 对象$('span'); // $('span')是一个jQuery 对象console.dir($('div'));// 3. jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法// myDiv.style.display = 'none';// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法</script>
    </body></html>
    
  • Code:DOM对象和jQuery对象相互转换

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script>
    </head><body><video src="mov.mp4" muted></video><script>// 1. DOM对象转换为 jQuery对象// (1) 我们直接获取视频,得到就是jQuery对象// $('video');// (2) 我们已经使用原生js 获取过来 DOM对象var myvideo = document.querySelector('video');// $(myvideo).play();  jquery里面没有play 这个方法// 2.  jQuery对象转换为DOM对象// myvideo.play();$('video')[0].play()$('video').get(0).play()</script>
    </body></html>
    


相关文章:

jQuery:入门

jQuery 入门 Date: January 19, 2023 目标&#xff1a; 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 jQuery 概述 JavaScript 库 仓库&#xff1a; 可以把很多东西放到这个仓库里面。找东西只需要到仓库里…...

实例3:树莓派呼吸灯

实例3&#xff1a;树莓派呼吸灯 实验目的 通过背景知识学习&#xff0c;了解digital与analog的区别。通过GPIO对外部LED灯进行呼吸控制&#xff0c;熟悉PWM技术。 实验要求 通过python编程&#xff0c;用GPIO控制LED灯&#xff0c;使之亮度逐渐增大&#xff0c;随后减小&am…...

android适配ipv6,请求慢?

先贴一篇我们经常能搜索到的解决方案&#xff1a; Android 在 4G 下访问 IPV6 慢的解决方案 文章很有参考意义&#xff0c;但也并不是所有请求慢的的原因&#xff01; 本文是另一种原因,有兴趣就继续往下看一看. 使用的okhttp框架,模式支持ipv6和ipv4协议,但两种协议同时存在时…...

【LeetCode】剑指 Offer(10)

目录 题目&#xff1a;剑指 Offer 27. 二叉树的镜像 - 力扣&#xff08;Leetcode&#xff09; 题目的接口&#xff1a; 解题思路&#xff1a; 代码&#xff1a; 过啦&#xff01;&#xff01;&#xff01; 题目&#xff1a;剑指 Offer 28. 对称的二叉树 - 力扣&#xff0…...

学校AI视频行为分析监测系统 opencv

学校AI视频行为分析监测系统通过pythonopencv网络模型AI视频分析技术&#xff0c;学校AI视频行为分析监测算法对学校区域人员打架行为识别、跌倒行为识别、翻墙识别、人员聚众识别、攀高识别、抽烟行为等进行智能识别预警。OpenCV的全称是Open Source Computer Vision Library&…...

内存数据库的设计与实现(已在大型项目中应用)

一、概况 1、设计总图 组成,由Redis集群缓存,普通缓存,传统数据库,各类数据驱动 2、内存数据库的增删改查,分页查询 组成,由数据查询,分页查询,数据存储,数据修改,数据删除 3、内存数据库的驱动 组成,由驱动适配器,普通缓存驱动,Redis缓存驱动 4、内存数据库与…...

Linux基础命令-stat显示文件的状态信息

文章目录 stat 命令介绍 语法格式 基本参数 测试三个时间的变化过程 1&#xff09;使用cat命令 2&#xff09;使用echo命令 3&#xff09;使用chmod命令 4&#xff09;使用vim命令 参考实例 1&#xff09;显示文件的状态信息 2&#xff09;以简洁的形式显示状态信…...

SQL入门DEMO

单表查询 ● --查询订购日期在1996年7月1日至1996年7月15日之间的订单的订购日期、订单ID、客户ID和雇员ID等字段的值 ● --查询供应商的ID、公司名称、地区、城市和电话字段的值。条件是“地区等于华北”并且“联系人头衔等于销售代表”。 –查询供应商的ID、公司名称、地…...

辉光管时钟学习制作及开源软硬件工程

文章目录前言开源地址辉光管项目介绍辉光管的工作条件硬件部分部分介绍充电电路驱动电路不足之处软件部分总结前言 作为一个电子人&#xff0c;一直想做一个辉光管时钟&#xff0c;算是大学的一个心愿&#xff0c;终于在快要毕业前做了一个&#xff0c;下面把软件和硬件的部分…...

动手学深度学习(第二版)学习笔记 第三章

第三章 线性神经网络 代码&#xff1a;d2l-zh/pytorch/chapter_linear-networks 3.1 线性回归 3.1. 线性回归 — 动手学深度学习 2.0.0 documentation 解析解 线性回归的解可以用一个公式简单地表达出来&#xff0c;这类解叫作解析解&#xff08;analytical solution&…...

冯诺依曼体系结构与操作系统的概念及理解

一、 冯诺依曼体系结构1、概念2、内存的作用3、硬件原理解释软件行为二、操作系统的概念及基本作用1、概念2、设计操作系统的目的3、操作系统的主要作用4、什么是管理5、管理的目的6、操作系统如何为我们服务一、 冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们…...

【深度探讨】如何利用区块链改善公共服务

发表时间&#xff1a;2022年5月4日 信息来源&#xff1a;bsvblockchain.org BSV区块链协会全力支持符合企业和政府对于节能降耗和合法合规等相关要求的区块链生态系统。 然而&#xff0c;虽然监管机构负责其监管范围内的技术服务的性质、目的和影响&#xff0c;但他们并不是全…...

【打卡】图分析与节点嵌入

背景介绍 图&#xff08;Graphs&#xff09;是一种对物体&#xff08;objects&#xff09;和他们之间的关系&#xff08;relationships&#xff09;建模的数据结构&#xff0c;物体以结点&#xff08;nodes&#xff09;表示&#xff0c;关系以边&#xff08;edges&#xff09;…...

python元编程详解

什么是元编程 软件开发中很重要的一条原则就是“不要重复自己的工作&#xff08;Don’t repeat youself&#xff09;”&#xff0c;也就是说当我们需要复制粘贴代码时候&#xff0c;通常都需要寻找一个更加优雅的解决方案&#xff0c;在python中&#xff0c;这类问题常常会归类…...

为什么文档对 SaaS 公司至关重要?

在过去十年左右的时间里&#xff0c;SaaS的兴起使全球数百家公司成为家喻户晓的公司。但他们并不是仅仅依靠产品的力量到达那里的。客户服务和支持是使一切在幕后顺利进行的原因——其中很大一部分是文档。以正确的风格和正确的位置在您的网站上找到适当的用户文档对于将浏览器…...

Echarts 实现电池效果的柱状图

第022个点击查看专栏目录本示例是解决显示电池电量状态的柱状图&#xff0c;具体的核心代码请参考源代码。 文章目录示例效果示例源代码&#xff08;共102行&#xff09;相关资料参考专栏介绍示例效果 示例源代码&#xff08;共102行&#xff09; /* * Author: 还是大剑师兰特…...

计算机网络高频知识点(一)

目录 一、http状态码 二、浏览器怎么数据缓存 三、强缓存与协商缓存 1、强缓存 2、协商缓存 四、简单请求与复杂请求 五、PUT 请求类型 六、GET请求类型 七、GET 和 POST 的区别 八、跨域 1、什么时候会跨域 2、解决方式 九、计算机网络的七层协议与五层协议分别指…...

JavaScript split()方法

JavaScript split()方法 目录JavaScript split()方法一、定义和用法二、语法三、参数值四、返回值五、更多实例5.1 省略分割参数5.2 使用limit参数5.3 使用一个字符作为分割符一、定义和用法 split() 方法用于把一个字符串分割成字符串数组。 二、语法 string.split(separat…...

前端面试题 —— 性能优化

目录 一、CDN的作用 二、CDN的使用场景 三、懒加载的概念 四、懒加载与预加载的区别 五、documentFragment 是什么&#xff1f;用它跟直接操作 DOM 的区别是什么&#xff1f; 六、常见的图片格式及使用场景 七、懒加载的特点 八、如何优化动画&#xff1f; 九、如何提⾼…...

我的周刊(第080期)

我的信息周刊&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。&#x1f3af; 项目stable-diffusion-webui-docker[1]基于 Docker 的一…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...