jQuery 学习笔记（一）——jQuery简介、jQuery语法

最新推荐文章于 2024-11-06 20:52:22 发布
最新推荐文章于 2024-11-06 20:52:22 发布
阅读量879 收藏
点赞数
分类专栏： jQuery 文章标签： jquery function microsoft javascript button html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Titilover/article/details/6797252
版权

 内容选自w3cschool教程

 

一句话描述JQuery：jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

 

一. jQuery简介

 

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

 

1. jQuery库的特性

jQuery是一个JavaScript函数库。

jQuery库包含以下特性：

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

     

    2. 向页面添加jQuery

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

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

    <head>
<script type="text/javascript" src="jquery.js"></script>
</head>

    请注意，<script> 标签应该位于页面的 <head> 部分。

     

    3. 基础的jQuery实例

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

    实例：

    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<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>


    4. 下载 jQuery

    共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

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

     

    5. 库的替代

    Google 和 Microsoft 对 jQuery 的支持都很好。

    如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

    使用 Google 的 CDN：

    <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

    使用 Microsoft的 CDN：

    <head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>

     

    二. jQuery语法

     

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

    1. jQuery 语法实例：

    （1）$(this).hide() - 隐藏当前元素。

    <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>

<body>
<button type="button">Click me</button>
</body>
</html>

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

    <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>

</html>

    （3）$("p").hide() - 隐藏所有 <p> 元素。

    <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<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>

    （4）$(".test").hide() - 隐藏所有 class="test" 的段落

    <html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

</body>
</html>

     

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

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

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

    提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

    2. 文档就绪函数

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

    $(document).ready(function(){

--- jQuery functions go here ----

});

    这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

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

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

     

IMFuckingHigh
关注
专栏目录
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1398
本文主要介绍有关jQuery的相关知识点
jQuery学习笔记——jQuery基础
m0_55394328的博客
09-07 510
什么是jQuery？jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。通过这段时间的学习，我感觉jQuery是一个“语法糖”，就像是包在糖果外面的包装，让js看起来更好看。以上就是今天的学习内容啦，分享给大家。
jQuery学习笔记（一）——jQuery入门
今天怎么又下雨的博客
03-01 290
什么是jQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；
jQuery学习笔记一——jQuery中与JavaScript的语法区别
li286487166的博客
04-15 1222
一、jQuery与DOM必须分清的几个知识点 1.window.onload与$(documnet).ready()的区别 window.onload只能调用一次，必须等待网页中所有内容加载完毕后才能执行window.onload = fuction(){ alert("test"); }; window.onload = fuction(){ alert("test2"); }
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 1244
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery学习笔记
深思纵似丁香结，一展芭蕉寸凡心。
01-20 1143
jQuery学习笔记 JQuery入门-笔记部分 jQuery概述 jQuery是js库 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数 jquery是为了简化js的操作 jquery的安装 <script src="js/jquery-3.4.1.js" type="text/javascript"></script> 需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）! jquery核心 $ 符号在j
JavaWeb基础学习笔记17——JQuery
weixin_44623055的博客
02-27 1201
目录 1、JQuery概念 2、JQuery快速入门 2.1、步骤 3、JQuery对象和JS对象的区别与转换 4、选择器 4.1、基本选择器 4.1.1、标签选择器 4.1.2、id选择器 4.1.3、类选择器 4.1.4、并集选择器 4.2、层级选择器 4.2.1、后代选择器 4.2.2、子选择器 4.3、属性选择器 4.3.1、属性名称选择器 4.3.2、属性选择器 4.3.3、复合属性选择器 4.4、过滤选择器 4.4.1、首元素选择器 4.4.2、尾元素选择
Jquery学习笔记——第一天
破风少年
02-25 961
Jquery学习打卡Jquery学习笔记---第一天Jquery笔记 第一天1.Jquery引言a)什么是Jqueryb)Jquery的好处c)其他Js框架2.第一个Jquery的程序3.DOM对象 与 Jquery对象4.Jquery对象的获取a)选择器i.基本选择器1.id选择器 $(“#id”) 获得的是一个Jquery对象2.类选择器3.标签选择器4.多路选择器5.选择器 全选择器ii...
JQuery学习笔记——1
qq_46412427的博客
03-08 167
笔记内容 1.jQuery Hello world 2.jQuery 选择器 3.jQuery 过滤器 4.jQuery 元素筛选 jQuery 介绍 什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想！！！ 它的核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为最流行的
jQuery学习笔记2 —— jQuery选择器
u014630987的博客
03-05 341
jQuery选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟练使用选择器，不仅可以简化代码还能达到事半功倍的效果。 ## jQuery选择器是什么 ## Web前端开发要求结构（HTML）、样式（CSS）和行为（JavaScript）三者分离，而将结构和样式联系在一起的则是通过CSS选择器实现的，下面是常用的一些CSS选择器：
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jQuery学习笔记 获取jQuery对象
01-21
使用jQuery选择器选择页面元素，目的是为了生成jQuery对象，语法相当简单：$(selector)。但值得注意的是，这是生成jQuery对象，不是DOM对象，因此$(selector)[removed]以获取元素内部HTML代码是错误的，正确写法是$...
jQuery——学习笔记.md
08-01
jq语法
jQuery学习笔记精心整理
02-23
### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**： - **第三方**：jQuery是由第三方组织或个人编写的函数库，并非浏览器内置或开发者自定义的函数，因此使用前需从官方网站（[www.jquery.com]...
JQuery 学习笔记 选择器之五
10-29
需要注意的是，虽然在JQuery学习笔记中的代码示例使用的是JQuery 1.3.2版本，但现代的JQuery库版本可能已经对这些选择器提供了更好的支持和更多的选择器类型。因此，建议在实际开发中查阅当前所使用版本的JQuery文档...
Autosar CP 内存抽象接口MemIf规范导读
11-03 735
内存抽象接口（Memory Abstraction Interface，简称MemIf）是AUTOSAR架构中用于访问和管理非易失性随机存取存储器（NVRAM）的重要组成部分。
最新整理：Selenium自动化测试面试题
11-01 1009
最新整理的在面试过程中会被问到的自动化测试题库，拿走不谢！
1.1 关于游戏编程
最新发布
逆的博客
11-06 536
1.1.1、游戏中客户端和服务器的交互 1.1.2、游戏客户端安装包和服务器安装包 1.1.3、客户端软件如何和服务端软件通信 1.1.4、计算机之间的通信数据传送抓取（wireshark） 1.1.5、关于游戏引擎
Spring AI : 让ChatGPT成为你构建应用的核心亮点
whisperzzza的博客
11-01 1345
当前在Java中调用大模型时，往往缺乏一个成熟且易于使用的AI应用框架。为了解决这个问题，Spring作为老牌的Java应用框架厂商，推出了Spring AI。它借鉴了langchain的一些核心设计理念，并结合了Java面向对象编程的优势，旨在提供一种更高效、灵活的方式来与各种大模型进行交互。Spring AI的核心优势在于其统一了不同AI服务提供商（如OpenAI、阿里云等）的接口实现，使得开发者只需编写一次代码，通过简单的配置更改即可轻松切换至不同的AI实现，极大地提升了开发效率和可维护性。
JavaScript基础与jQuery学习笔记
"小晨星分享的jQuery学习笔记" 这篇文档是小晨星在学习jQuery过程中整理的重要知识点，旨在帮助他人更好地理解并掌握jQuery。jQuery是一个高效、易用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值