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对象
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

FFmpeg交叉编译报错pkg-config not found

ffmpeg交叉编译时报错: WARNING: arm-linux-gnueabihf-pkg-config not found, library detection may fail.不慌,没有就下载嘛,直接install: sudo apt-get install pkg-config-arm-linux-gnueabihf 参考: How To I…

无水蒸汽室的热特性​研究

更多资讯,请关注公众号【莱歌数字】~~ 扩散电阻在从源到汇的整体传热过程中继续起着主导作用。 随着电子元件占地面积小和高功耗的趋势,需要在散热器的底部散热对于降低扩散电阻变得非常重要。 在一些应用中,如高功率激光器,可…

JavaWeb系列十七: jQuery选择器 上

jQuery选择器 jQuery基本选择器jquery层次选择器基础过滤选择器内容过滤选择器可见度过滤选择器 选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历 DOM和Ajax 操作都依赖于选择器jQuery选择器的优点 $(“#id”) 等价于 document.getElementById(“id”);$(“tagName”) 等价…

Anzo Capital昂首资本独家揭秘,掌握价格行为交易法则,轻松盈利

探索交易成功的秘密!Anzo Capital昂首资本独家揭秘价格行为模式的五大核心步骤,助各位投资者都能把握市场脉搏,轻松盈利。 第一步,精准识别市场趋势,为成功交易奠定坚实基础。 第二步,洞察图表密码,巧妙标…

程序员系统入门大模型的路径和资源,看这篇就够了

本篇文章面向对大模型领域感兴趣,又不知如何下嘴的程序员。 看一下围绕大模型的应用场景和人才需求: **Prompt工程:**基于提示词对大模型的使用,会问问题就行。 **基于大模型的应用(狭义的):*…

Avalonia 常用控件二 Menu相关

1、Menu 添加代码如下 <Button HorizontalAlignment"Center" Content"Menu/菜单"><Button.Flyout><MenuFlyout><MenuItem Header"打开"/><MenuItem Header"-"/><MenuItem Header"关闭"/&…

一文讲清楚人工智能集成学习之多模型投票(Voting)

一、集成学习 集成学习是人工智能领域中一种强大的机器学习方法&#xff0c;它通过结合多个学习器来提高整体的预测或分类性能&#xff0c;通常能够比单一模型表现得更好。 1.1 集成学习的原理 集成学习的核心思想是“集思广益”&#xff0c;即通过集合多个模型的预测结果来提…

面向对象修炼手册(二)(消息与继承)(Java宝典)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;面向对象修炼手册 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 前言 消息传递 1 基本概念 1.…

Python19 lambda表达式

在 Python 中&#xff0c;lambda 表达式是一个小型匿名函数&#xff0c;通常用于实现简单、单行的函数。lambda 函数可以接受任意数量的参数&#xff0c;但只能有一个表达式。 基本语法&#xff1a; lambda arguments: expression这里&#xff0c;arguments 是传递给 lambda …

LeetCode —— 只出现一次的数字

只出现一次的数字 I 本题依靠异或运算符的特性&#xff0c;两个相同数据异或等于0&#xff0c;数字与0异或为本身即可解答。代码如下: class Solution { public:int singleNumber(vector<int>& nums) {int ret 0;for (auto e : nums){ret ^ e;}return ret;} };只出…

Kubernetes排错(十)-处理容器数据磁盘被写满

容器数据磁盘被写满造成的危害: 不能创建 Pod (一直 ContainerCreating)不能删除 Pod (一直 Terminating)无法 exec 到容器 如何判断是否被写满&#xff1f; 容器数据目录大多会单独挂数据盘&#xff0c;路径一般是 /var/lib/docker&#xff0c;也可能是 /data/docker 或 /o…

基于CDMA的多用户水下无线光通信(3)——解相关多用户检测

继续上一篇博文&#xff0c;本文将介绍基于解相关的多用户检测算法。解相关检测器的优点是因不需要估计各个用户的接收信号幅值而具有抗远近效应的能力。常规的解相关检测器有运算量大和实时性差的缺点&#xff0c;本文针对异步CDMA的MAI主要来自干扰用户的相邻三个比特周期的特…

wordpress教程自动采集并发布工具

随着互联网的快速发展&#xff0c;越来越多的人开始关注网络赚钱。而对于许多人来说&#xff0c;拥有一个自己的个人网站是一个不错的选择。然而&#xff0c;要让自己的个人网站内容丰富多样&#xff0c;就需要不断地进行更新。那么&#xff0c;有没有一种方法可以让我们轻松地…

服务器数据恢复—raid5热备盘同步失败导致阵列崩溃如何恢复数据?

服务器存储数据恢复环境&故障&#xff1a; 某品牌DS5300存储&#xff0c;包含一个存储机头和多个磁盘柜&#xff0c;组建了多组RAID5磁盘阵列。 某个磁盘柜中的一组RAID5阵列由15块数据盘和1块热备硬盘组建。该磁盘柜中的某块硬盘离线&#xff0c;热备盘自动替换并开始同步…

C语言入门系列:从内存原理看函数的值传递和引用传递

文章目录 一&#xff0c;值传递二&#xff0c;引用传递三&#xff0c;从内存原理看值传递和引用传递的区别1 值传递内存示意图2 引用传递内存示意图 参考文献 函数参数用于向函数传递数据&#xff0c;C语言支持两种传递方式&#xff1a;值传递和引用传递。 一&#xff0c;值传递…

校史馆虚拟翻书设计有哪些技术上的亮点?

近年来&#xff0c;互动多媒体已成为展览展示行业中备受瞩目的焦点&#xff0c;尤其是那些凭借尖端的投影与感应技术打造的互动装置&#xff0c;它们在各个主题展厅中独领风骚&#xff0c;其独特魅力不言而喻。而当我们深入思考其在校史馆设计中的应用时&#xff0c;不难预见&a…

【每日一题】503. 下一个更大元素 II

思路&#xff08;c&#xff09; 使用单调栈的解法&#xff0c;单调栈里面存的是大于当前元素的index&#xff0c;不是直接存值。但是这个题目是一个循环数组&#xff0c;可以在后面补一段前面的内容&#xff0c;这样就可以正常遍历。将每个位置对应的结果存在map中 后面循环…

BUUCTF [CISCN2019 华北赛区 Day2 Web1] Hack World

1、通过题目&#xff0c;可以知道该题目为SQL注入类型&#xff1a; 2、判断注入类型为数字注入&#xff1a; 3、通过BP抓包&#xff0c;来判断注入点。 字典爆破发现常规的注入方式都被过滤。 4、因此可以尝试通过布尔盲注的方式来得到flag。编写脚本得到flag import requests…

华为仓颉语言:编程语言的新篇章

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

Vue.js 自定义组件的三种用法

1.创建项目 创建项目,你可以参考我以前的博文,这里省略了 项目的目录结构如下: 接着,我们在 src/components 目录下创建一个自定义的组件 SplashHello.vue,示例代码如下所示: <template><div><p>{{ title }}</p><p>{{ message }}</p&…