JavaWeb系列十六: jQuery初步入门

跟老韩-JavaScript开发利器之jQuery

    • 1.1 原理示意图
    • 1.2 快速入门
    • 1.2 什么是jquery对象
    • 1.3 dom对象转jQuery对象
    • 1.4 jQuery对象转dom对象

在这里插入图片描述

  1. jQuery是一个快速的, 简洁的javaScript库, 使用户能更方便地处理HTML, css, dom…
  2. 提供方法, events, 选择器, 并且方便地为网站提供AJAX交互
  3. 其宗旨是-WRITE LESS, DO MORE, 写更少的代码, 做更多的事情
  4. jQuery实现了浏览器的兼容问题

1.1 原理示意图

在这里插入图片描述

1.2 快速入门

  1. 下载: https://jquery.com/download/, jquery就是一个JS库. jQuery作者在原生的JavaScript基础上, 封装好的方法, 对象等.
  1. Download the compressed, production jQuery 3.6.4, 就是压缩过的
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. Download the uncompressed, development jQuery 3.6.4, 是没有压缩过的
    在这里插入图片描述
    在这里插入图片描述
  1. 新建JavaScript项目
  1. 选择JavaScript
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

1.2 什么是jquery对象

  1. jQuery对象就是对DOM对象进行包装后产生的对象
  • 比如: $(“#test”).html() 意思是指: 获取id为test的元素内的html代码. 其中html()是jQuery里的方法
  • 这段代码等同于用DOM实现代码:
    document.getElementById(“id”).innerHTML;
  1. jQuery对象是jQuery独有的. 如果一个对象是jQuery对象, 那么它就可以使用jQuery里的方法: $(“#id”).html();
  2. 约定: 如果获取的是jQuery对象, 那么要在变量前面加上$, 比如: var $variable = jQuery对象; 如果是DOM对象, 则var variable = DOM对象
  • var $variable : jQuery 对象
  • var variable : DOM对象

1.3 dom对象转jQuery对象

  1. 对于一个DOM对象, 只需要用$()把DOM对象包装起来, 就可以获得一个jQuery对象了. $(DOM对象)
  2. DOM对象转换成jQuery对象后, 就可以使用jQuery的方法了
  3. 应用实例
    在这里插入图片描述

1.4 jQuery对象转dom对象

  1. 两种转换方式将一个jQuery对象转换成DOM对象: [index]和.get(index);
  2. jQuery对象是一个数组对象, 可以通过[index]的方法, 来得到响应的DOM对象
  3. jQuery本身提供, 通过.get(index)方法, 得到对应的DOM对象
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/34087.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【ElasticSearch】ElasticSearch实战

初步检索 检索 ES 信息 1)、GET /_cat/nodes:查看所有节点 127.0.0.1 44 83 1 0.01 0.01 0.00 dilm * 1b06a843b8e3 *代表主节点 2)、GET /_cat/health:查看健康状况 1718265331 07:55:31 elasticsearch yellow 1 1 4 4 0 0…

ansible archive模块

用于创建归档文件的模块。它允许你在目标主机上创建tar、zip、gzip、bzip2、xz等类型的归档文件。解压使用unarchive模块。 path:要打包的源目录或文件的路径。(可以是单个文件或目录,也可以是包含多个文件和目录的列表。)dest&am…

告别单张OCR,Umi-OCR让你轻松实现批量识别!

大家好,今天我要给大家介绍一款强大的OCR识别软件——Umi-OCR。相信很多朋友都用过QQ、微信或天若OCR等应用来进行图片文字识别,但你是否遇到过需要批量识别图片文字时,这些软件却无法满足你的需求呢?今天,这个问题将迎…

LeetCode 算法:二叉树的中序遍历 c++

原题链接🔗:二叉树的中序遍历 难度:简单⭐️ 题目 给定一个二叉树的根节点 root ,返回 它的 中序 遍历 。 示例 1: 输入:root [1,null,2,3] 输出:[1,3,2] 示例 2: 输入&…

Spring数据访问架构设计解析

一、Spring JDBC 数据访问 1、简化了jdbc操作,定义了模板类JdbcTemplate 2、提高开发效率,构建了嵌入式数据源EmbeddedDatabase 3、统一底层异常结构DataAccessException 二、Spring事物管理器 声明式事物,Aop原理简化开发 三、Spring …

go sync包(三) 读写锁(二)

读写锁 RWMutex 写锁 加锁 RWMetex 的写锁复用了 Mutex: // Lock locks rw for writing. // If the lock is already locked for reading or writing, // Lock blocks until the lock is available. func (rw *RWMutex) Lock() {if race.Enabled {_ rw.w.state…

Selenium 选择器定位元素方式详解

Selenium 选择器定位元素方式详解 在自动化测试中,定位网页元素是一个至关重要的步骤。Selenium 提供了多种选择器来帮助我们精确地找到页面上的元素。以下将详细介绍各种选择器的用法和区别,包括 ID、XPATH、LINK_TEXT、PARTIAL_LINK_TEXT、NAME、TAG_…

将Windows11右键菜单修改为Windows10风格

Windows11更新后,右键菜单很多功能隐藏起来了,使用时需要点击“显示更多选型”才能获取完整功能。为了能获得Windows10右键菜单丝滑的体验,我总结了以下方法。 方法一:控制台操作法 按住winR打开运行窗口 输入cmd,…

区间问题——905. 区间选点

目录 区间问题 定义 运用情况 注意事项 解题思路 AcWing 905. 区间选点 题目描述 运行代码 代码思路 改进思路 其它代码 代码思路 区间问题 定义 区间通常是指一个连续的范围,可以用数轴上的一段来表示。 运用情况 在数学中广泛用于表示变量的取值范…

未系安全带智能监测摄像机

未系安全带智能监测摄像机在现代安全管理中发挥着至关重要的作用。这些先进设备不仅仅是简单的监视工具,更是通过整合高级技术来提升工作效率和安全性,特别是在需要高度警惕的作业环境中尤为突出。 首先,这些智能监测摄像机配备了精准的视觉识…

SOLIDWORKS专业版2024价格

SOLIDWORKS Professional 专业版,带有 ECAD/MCAD 协作、自动成本估算、协作功能、设计和工程图检查、复杂的零部件库以及高级真实感渲染。 1. ECAD/MCAD协作:SOLIDWORKS专业版提供了强大的ECAD/MCAD协作功能,使得设计团队可以更高效地进行跨…

HTML(23)——垂直对齐方式

垂直对齐方式 属性名:vertical-align 属性值效果baseline基线对齐(默认)top顶部对齐middle居中对齐bottom底部对齐 默认情况下浏览器对行内块,行内标签都按文字处理,默认基线对齐 导致图片看起来会偏上,文字偏下。 示例&#…

帝国cms定时审核并更新的方法

比如你网站采集了成千上万篇文章,不可能一下子全部放出来的,所以为了模拟人工发布,那么就需要定时审核发布文章内容,本文内容核心解决了更加个性化的逼真模拟人工更新网站内容。 第一:首先要满足你的表中有未审核的数据 第二:到http://bbs.phome.net/showthread-31-19616…

谷歌浏览器截图

一 右击,然后点击检查; 二 然后ctrlshiftp,运行命令; 三 3.1搜索截图: 如果你设置为中文,搜索截图,选择你想要的截图类型; 如果你是在英文情况下: 输入capture full size 来过滤…

【Redis】如何保证缓存和数据库的一致性

目录 背景问题思路 三个经典的缓存模式Cache-Aside读缓存写缓存为什么是删除旧缓存而不是更新旧缓存?为什么不先删除旧的缓存,然后再更新数据库? 延迟双删如何确保原子性 Read-Through/Write-ThroughRead-ThroughWrite-Through Write Behind …

【九】【QT开发应用】WebRTC的sigslot源码和使用WebRTC的sigslot使用编写信号槽

WebRTC(Web Real-Time Communication) 是一个开源项目,提供实时通信能力,广泛应用于视频、音频和数据传输。在WebRTC的实现中,sigslot库用于信号和槽机制,以实现事件驱动的编程模型。 WebRTC的sigslot部分…

电子盖章怎么做_电子盖章软件

使用e-章宝(易友EU3000智能盖章软件)进行电子盖章的步骤如下: 一、准备阶段 软件获取: 访问e-章宝(易友EU3000智能盖章软件)的官方网站或相关渠道,下载并安装软件。账户注册与登录&#xff1a…

HTML常用标签简明汇总

常见标签 标签写法介绍<! – – >注释&#xff0c;内容不会在页面显示< h1 >< /h1 >标题&#xff08;只有1到6的标题等级&#xff09;< p >< /p>段落 独占一行< a href“网址”>< /a>超链接 用href 后面接网址< br >换行<…

泰迪智能科技大数据人工智能实训室优势特色介绍

泰迪智能科技大数据人工智能实训室是面向人工智能技术应用、大数据技术、软件技术专业&#xff0c;是一个教、学、培训认证统一的实训平台&#xff0c;集教学、实训、培训认证功能于一体&#xff0c;围绕人工智能主题&#xff0c;同时兼顾当前IT流行技术的发展趋势&#xff0c;…

注册机CAD2020激活遇到激活错误 0015.111的解决办法

这里写自定义目录标题 注册机下载位置破解要点 注册机下载位置 https://download.csdn.net/download/Stephen___Qin/89476691 破解要点 1.要以管理员身份运行CAD2020软件和注册机 2.要先点击注册的patch&#xff08;中文版本为“补丁”&#xff09;按键