JQuery简单学习(2)——JQuery语法

最新推荐文章于 2023-05-20 21:02:09 发布
最新推荐文章于 2023-05-20 21:02:09 发布
阅读量88 收藏
点赞数
分类专栏： Web前端-JQuery专栏 文章标签： jQuery JavaScript HTML CSS Go ViewUI

 

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

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

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

美元符号定义 jQuery 
选择符（selector）“查询”和“查找” HTML 元素 
jQuery action() 执行对元素的操作 
实例
$(this).hide() - 隐藏当前元素

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

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

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

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。
————————————————————
jQuery 语法实例
$(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>
 
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 

$("#test").hide()  
<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>
 
演示 jQuery hide() 函数，隐藏 id="test" 的元素。 

$("p").hide()  
<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>
 
演示 jQuery hide() 函数，隐藏所有 <p> 元素。 

$(".test").hide()  
<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 hide() 函数，隐藏所有 class="test" 的元素。 
————————————————————
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： 
$(document).ready(function(){

--- jQuery functions go here ----

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

下面是两种假如文档完全加载之前运行函数的话，操作失败的情况：

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

iteye_9300
关注
专栏目录
jquery 源码学习——第一章 理解架构
qq_27009517的博客
01-20 716
四部分： jQuery课程简介，jQuery源码解析（架构与依赖模块）教程-慕课网https://www.imooc.com/video/4392
JS学习笔记——jquery
lxy95512的博客
03-04 501
JavaScript库 JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库 就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。 jQuery的概念 jQuery是一一个快速、简
jQuery学习笔记——jQuery基础
m0_55394328的博客
09-07 493
什么是jQuery？jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。通过这段时间的学习，我感觉jQuery是一个“语法糖”，就像是包在糖果外面的包装，让js看起来更好看。以上就是今天的学习内容啦，分享给大家。
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1354
本文主要介绍有关jQuery的相关知识点
JQuery学习12.30——JQuery
MODXc的博客
12-30 337
什么是jQuery jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more. jQuery对象就是通过jQuery包装DoM对象后产生的对象 jQuery与DoM对象互转 DoM转jQuery：只需要用$()把DoM对象包装起来 jQuery转DoM 通过[index]的方法得到对
jQuery学习笔记2 —— jQuery选择器
u014630987的博客
03-05 334
jQuery选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟练使用选择器，不仅可以简化代码还能达到事半功倍的效果。 ## jQuery选择器是什么 ## Web前端开发要求结构（HTML）、样式（CSS）和行为（JavaScript）三者分离，而将结构和样式联系在一起的则是通过CSS选择器实现的，下面是常用的一些CSS选择器：
JQuery原理剖析——自己手写简易版JQuery
m0_64231944的博客
05-20 929
jQuery知识点总结
jQuery使用——jQuery语法
前端初学者常见问题
06-11 320
今天我们就来看一下jQuery语法。 通过 jQuery，可以选取(selector） HTML 元素，并对它们执行“操作”（actions）。 基础语法： $(selector).action(); $(美元符号)定义 jQuery; 选择符（selector）“查询"和"查找” HTML 元素; jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐...
JQuery学习笔记——1
qq_46412427的博客
03-08 158
笔记内容 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
weixin_41185694的博客
05-10 487
1.jQuery 概述 1.1 JavaScript库 ~：即library,是一个封装好的特定的集合（方法和函数） ~为了快速方便地操作DOM，里面基本都是函数（方法） 常见JS库：jQuery Prototype YUL Dojo Ext JS 移动端的zepto，这些都是对原生JS的封装，内部都是用JavaScriot实现的。 1.2 jQuery (JavaScript Query)查询JS,吧JS中的DOM操作做了封装，可以快速查询使用里面的功能 ~封装了JS常用的功能代码 2 j
jQuery图片轮播插件——前端开发必看
10-22
在前端开发中，图片轮播插件是一种非常常见的功能，它能够在有限的空间中循环展示图片或内容。...虽然jQuery已经不再是前端开发的唯一选择，但其简洁的语法和丰富的插件库，依然让很多开发者在特定场景下选择使用它。
jquery引用文件——jquery.js
11-25
jQuery的语法以"$"开头，如`$(selector)`表示选择元素。例如，选择所有`<p>`元素： ```javascript $('p').css('color', 'red'); // 设置所有段落字体颜色为红色 ``` jQuery还提供了许多方法，如`.append()`...
jQuery——学习笔记.md
08-01
jq语法
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
05-09
在"一天搞定jQuery(一)——使用jQuery完成定时弹出广告"的主题中，我们将深入探讨如何利用jQuery来实现一个定时弹出的广告功能。 首先，我们需要了解jQuery的核心概念。jQuery通过选择器（Selectors）获取DOM元素，...
jquery写个checkbox——类似邮箱全选功能
10-27
- jQuery处理事件与原生JavaScript类似，但语法更简洁。例如，点击事件处理用`.click()`方法。 - 本例中绑定点击事件到全选按钮(`btn`)、各个复选框(`checkboxes`)以及反选链接(`btn2`)上。 5. jQuery方法 - `....
模块化多电平变流器MMC VSG控制（同步发电机控制）MATLAB–Simulink仿真模型 5电平三相MMC，采用VSG控制
最新发布
10-07
模块化多电平变流器MMC VSG控制（同步发电机控制）MATLAB–Simulink仿真模型 5电平三相MMC，采用VSG控制 受端接可编辑三相交流源，直流侧接无穷大电源提供调频能量。 设置频率波动和电压波动的扰动，可以验证VSG控制的调频调压效果
使用scikit-learn进行鸢尾花数据集分类及模型评估（包含详细的完整的程序和数据）
10-07
内容概要：本篇文章详述了使用Scikit-learn这一强大的开源机器学习库对经典的鸢尾花数据集进行预处理、特征选取和模型训练。采用随机森林分类器完成对鸢尾花种类的识别和分类的任务，利用多种模型评估手段衡量其分类能力。 适合人群：对于机器学习有一定基础知识的研究人员和工程师，特别是对模型搭建感兴趣的技术人员。 使用场景及目标：针对具有明确标记的数据集进行探索性数据分析和初步模型开发的工作场景下，帮助学习者理解和掌握机器学习流程的关键步骤，提升他们使用Scikit-learn进行建模的能力。 其他说明：本文提供了详细的步骤指南与代码样例，同时指出了可能进一步提高效果的方向，如超参数优化、特征工程等。
基于C# Avalonia的Linux平台上位机应用开发与通信实操
10-07
1、跨平台应用开发需求 - 工业应用：c# Windows Winform 系统国产 Linux - 技术扩展： - Linux 应用 Ava 2、从Windows到跨平台 - C#框架：Winform、WPF、Xamarin（移动端）、MAUI（移动端、桌面 不包含Linux）、Avalonia（跨平台 Linux） Avalon(WPF) - 其他框架：QT（C++）、Electron（js） - 开发形式：项目结构、交互对接（WPF基本一致）
基于rrt算法的机器人路径规划python代码.rar
10-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
jQuery15天学习指南：快速上手与理解
"15天学会jquery - 快速入门教程" 在JavaScript的世界里，jQuery是一个备受推崇的库，尤其适合初学者。...通过学习jQuery，初学者可以更快地进入JavaScript开发领域，而有经验的开发者也能从中受益，提升工作效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值