很容易学习的JQuery库 : (一) 简介

2024-08-26 20:32

本文主要是介绍很容易学习的JQuery库 : (一) 简介,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jQuery 是一个 JavaScript 库;

jQuery 极大地简化了 JavaScript 编程;

jQuery 很容易学习。

上面的三句话是结合最近的学习整理后的心得,个人感觉可以很好地解释JQuery。

是什么

     jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。

     jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。

     jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

     jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

特性

    jQuery 库可以通过一行简单的标记被添加到网页中。

      jQuery 库包含以下特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

   示例:

向页面添加 jQuery 库

   jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。

  可以通过下面的标记把 jQuery 添加到网页中:

<span style="font-size:18px;"><span style="font-size:18px;"> <span style="font-size:18px;"><strong> <head><script type="text/javascript" src="jquery.js"></script></head></strong></span></span></span>
  值得注意的是,<script> 标签应该位于页面的 <head> 部分。

  基础 jQuery 实例

  下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素。

<span style="font-size:18px;"><strong><span style="font-size:18px;"> <span style="font-size:18px;"><strong> <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide();});});</script></head></strong></span></span></strong></span>
<span style="font-size:18px;"><strong><span style="font-size:18px;"> <span style="font-size:18px;"><strong></strong></span></span></strong></span>
<span style="font-size:18px;"><strong><span style="font-size:18px;"> <span style="font-size:18px;"><strong><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html></strong></span></span></strong></span>

安装

把 jQuery 添加到网页

如需使用 jQuery,您需要下载 jQuery 库(会在下面为您讲解),然后把它包含在希望使用的网页中。

 jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

<head>
<script src="jquery.js"></script>
</head>

  值得注意的是,<script> 标签应该位于页面的 <head> 部分。

  提示:您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ?

  在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!

下载 jQuery

  有两个版本的 jQuery 可供下载:

  • Production version - 用于实际的网站中,已被精简和压缩。
  • Development version - 用于测试和开发(未压缩,是可读的代码)

   这两个版本都可以从 jQuery.com 下载。

   提示:您可以把下载文件放到与页面相同的目录中,这样更方便使用。

替代方案

   如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

   谷歌和微软的服务器都存有 jQuery 。

   如需从谷歌或微软引用 jQuery,请使用以下代码之一:

   Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

JQuery语法

   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

jQuery 语法实例

  $(this).hide()
  演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
  $("#test").hide()
  演示 jQuery hide() 函数,隐藏 id="test" 的元素。
  $("p").hide()
  演示 jQuery hide() 函数,隐藏所有 <p> 元素。
  $(".test").hide()
  演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

  jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

  基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

  示例

  $(this).hide() - 隐藏当前元素

  $("p").hide() - 隐藏所有段落

  $(".test").hide() - 隐藏所有 class="test" 的所有元素

  $("#test").hide() - 隐藏所有 id="test" 的元素

  提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。

 文档就绪函数

  您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

<span style="font-size:18px;"><span style="font-size:18px;"> $(document).ready(function(){--- jQuery functions go here ----});</span></span>
  这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

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

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

学习小结

      通过近半个月的B/S的牛腩新闻发布的系统学习,感觉很有意思儿,蛮觉得网页的编辑比C/S的学习简单好些。但是,其中的许多函数的学习也是有点儿头晕(主要是因为函数的种类太多了),算是发点儿小牢骚吧!
      JQuery的学习很是重要,是在web学习过程中的一个很重要的工具,可以更完善设计,很有目的性的一个工具。         希望可以好好的总结一下最近的学习,连续的写几篇博客吧,期待自己更好完善的学习!

这篇关于很容易学习的JQuery库 : (一) 简介的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109607

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

ASIO网络调试助手之一:简介

多年前,写过几篇《Boost.Asio C++网络编程》的学习文章,一直没机会实践。最近项目中用到了Asio,于是抽空写了个网络调试助手。 开发环境: Win10 Qt5.12.6 + Asio(standalone) + spdlog 支持协议: UDP + TCP Client + TCP Server 独立的Asio(http://www.think-async.com)只包含了头文件,不依