Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jQuery 隐藏具有指定class属性值的元素

jQuery 隐藏具有指定class属性值的元素

原创
作者头像
IT工作者
发布于 2022-02-17 12:22:51
发布于 2022-02-17 12:22:51
5.5K00
代码可运行
举报
文章被收录于专栏:程序技术知识程序技术知识
运行总次数:0
代码可运行

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端</title>
<style>
.antzone{
  width:200px;
  height:100px;
  background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#bt").click(function(){
    $(".antzone").hide()
  });
});
</script>
</head>
<body>
<div class="antzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

点击按钮可以隐藏class属性值为"antzone"的元素。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jQuery第三十一篇 增 删 替换 复制
//增 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; bac
贵哥的编程之路
2020/10/28
5790
python web开发 jQuery基础
大多数情况下, jQuery 函数位于 document ready 函数中,防止没有加载完成就对不存在的元素进行操作
Michael阿明
2022/01/07
4.4K0
python web开发 jQuery基础
jQuery
    2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
changxin7
2022/05/06
9.1K0
jQuery
jQuery实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="jquery-3.2.1.min.js"></script> <style> * { margin: 0px; padding: 0px; } li { list-style: none; }
人生不如戏
2018/04/12
1.1K0
jQuery基础
一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。 [2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! [3]  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 [4]  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdo
用户1214487
2018/01/24
2.2K0
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
下载:https://files.cnblogs.com/files/xiaoxiao5016/font-awesome.min.css  或者官方下载:https://fontawesome.com/download
杨校
2019/06/14
8350
jQuery文档对象模型DOM的实际应用
DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中,DOM 不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性、扩展性。
王小婷
2018/12/19
1.2K0
04 . 前端之JQuery
JQuery简介 # 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 # 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便
iginkgo18
2020/09/27
3.6K0
三、jQuery属性操作
2、如何操作属性 对象.属性名称 = 值 对象.属性名称 对象[‘属性名称’] = 值 对象[‘属性名称’] Javascript
Dreamy.TZK
2020/06/16
3.9K0
三、jQuery属性操作
配合JQuery练习
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src="http://ajax.microso
仇诺伊
2018/09/12
9110
jQuery基础--jQuery特殊属性操作
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
eadela
2019/09/29
2.2K0
jQuery实现的进度条效果
[JavaScript]代码     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>进度条效果</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> #progress { background:white; height:20px; padding:2px; border:1p
用户8983410
2021/09/22
8910
jQuery使用技巧
使用回调方法的缺点之一是当执行类库中的方法后,上下文对象被设置到另外一个元素,比如,执行下面代码:
零式的天空
2022/03/22
1.4K0
JQuery 实现开发常用功能
标签克隆的两种实现方式: <body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> function Add(ths) {
王瑞MVP
2022/12/28
5.4K0
jQuery学习笔记
jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档
Mirror王宇阳
2020/11/13
7.7K0
jQuery学习笔记
jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件
之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。翻开源码其实可以看到,所有的快捷事件在底层的处理都是通过一个”on”方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法 基本用法:.on( events ,[ selector ] ,[ data ] ) 最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同
Yiiven
2022/12/15
4.2K0
jquery入门
运用jQuery时,需要在页面中引入jQuery文件 jQuery的hello world <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>helloworld</title> <!-- 1. 在页面中引入jQuery支持 --> <script src="js/jquery-1.12
周小董
2019/03/25
3K0
jquery获取紧邻的上一个元素
本章节分享一段代码实例,它实现了获取紧邻的上一个同级元素的功能。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> #box li { width: 350px; height: 25px; line-height: 25
IT工作者
2021/12/28
1.4K0
javaWeb核心技术第五篇之jQuery
- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作。并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可
海仔
2019/08/26
8.2K0
jQuery
ps:.offset()方法允许我们检索一个元素相对于文档(document)的当前位置,和 .position()的差别在于: .position()是相对于相对于父级元素的位移;
HammerZe
2022/03/25
7K0
jQuery
相关推荐
jQuery第三十一篇 增 删 替换 复制
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验