如何设置JQuery .show/.hide而不重复Div选择器 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

「jQuery」基础 - 01

从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。...>惊喜不，意外不div> div>惊喜不，意外不div> div>惊喜不，意外不div> div>惊喜不，意外不div> 相同的操作 <...1.3.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式...().siblings().hide(); }); }) 1.5. jQuery 效果 jQuery 给我们封装了很多动画效果，最为常见的如下：显示隐藏：show...显示隐藏显示隐藏动画，常见有三个方法：show() / hide() / toggle() ；语法规范如下: show hide toggle 代码演示 <button

8.2K2 1

好久不用 jQuery，来复习一下

在网页中，每个 id 名称只能使用一次，class 允许重复使用。 ?...选择器等价方法 $(".one + div") $(".one").next(“div”) $("#two ~ div") $("#two").nextAll(“div”) 1.2.3 过滤选择器...动画 1.4.1 show() 方法和 hide() 方法 show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。...当把元素隐藏后，可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。...而通过 jQuery 中的 (document).ready() 方法注册的事件处理程序，在 DOM 完全就绪时就可以被调用。

6.2K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

jQuery Cheat—Sheet（jQuery学习笔记）

---- #jQuery 效果隐藏和显示 jQuery hide() 和 show() jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示...() 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。...) - 使用预定义的值也可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： $(“button”).click(function(){ $(“div”).animate(...- 设置或返回所选元素的内容（包括 HTML 标记） - val() - 设置或返回表单字段的值下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容： $(“#btn1...- text() - 设置或返回所选元素的文本内容 - html() - 设置或返回所选元素的内容（包括 HTML 标记） - val() - 设置或返回表单字段的值下面的例子演示如何通过 text

18.3K3 0

【一起来烧脑】读懂JQuery知识体系

jQuery 选择器元素选择器，#id选择器，.class选择器 $("p:first") 选取第一个元素 $("ul li:first") 选取第一个元素的第一个...触发或将函数绑定到被选元素的双击事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 jQuery 隐藏/显示 hide()和show()方法来隐藏和显示...HTML元素 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show...(){ $("p").hide(1000); }); toggle()方法来切换hide()和show()方法显示被隐藏的元素，隐藏已显示的元素 $("button").click(function...()方法 Not()方法不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 Not()方法返回不匹配标准的所有元素 jQuery AJAX AJAX是与服务器交换数据的技术在不重载全部页面的情况下

3.4K3 0

jQuery学习笔记

************/ $(function(){ //jQuery代码 }); 选择器语法: jQuery的选择器语法格式和CSS的调用方法一样的哦！...表单属性过滤选择器 jQuery效果隐藏和显示 (hide/show) div id="demo"> hide" value="隐藏" /> show"...// 隐藏 $("#a1").hide(); }) $("#show").click(function(){ //显示 $("#a1").show...-- hide/show()语法原型 $().hide(speed,callback); $().show(speed,callback); speed:规定了淡入淡出的延迟时间可取(slow/

8.8K3 0

前端成神之路-01_jQuery

从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。...1.3.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式....显示元素 show() 隐藏元素 hide() 代码实现略。...(详情参考源代码) 1.5. jQuery 效果 jQuery 给我们封装了很多动画效果，最为常见的如下：显示隐藏：show() / hide() / toggle() ; 划入画出：slideDown...显示隐藏显示隐藏动画，常见有三个方法：show() / hide() / toggle() ; 语法规范如下: ?

13.2K1 0

jQuery基础图文系列

应用于文档中被用户高亮的部分 jQuery中的基本选择器：id选择器，类选择器，元素选择器，后代选择器，属性选择器。...hide() 和 show()隐藏和显示 HTML 元素 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(...function(){ $("p").show(); }); $("button").click(function(){ $("p").hide(1000); }); $(document)....; }); }); }); toggle() 方法来切换 hide() 和 show() 方法 $("button").click(function(){ $("p").toggle...(); // 显示弹出层窗体 $("#layer-pop").show(); // 设置弹出层窗体样式 $("#layer-pop").css

5.3K1 0

jQuery 教程

对DOM元素数组进行排序，并移除重复的元素 $.uniqueSort() 对DOM元素数组进行排序，并移除重复的元素 $.data() 在指定的元素上存取数据，并返回设置值 $.hasData() 确定一个元素是否有相关的...jQuery 实例 jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。...jQuery hide() 和 show() 演示jQuery hide() 和 show() 方法。...jQuery toggle() jQuery toggle() 用于切换 hide() 和 show() 方法。 jQuery hide() 另外一个隐藏文本的实例。...jQuery animate() – 使用预定义值演示通过 animate() 方法预定义 “hide”, “show”, “toggle” 值。

21K2 0

jQuery基础系列

应用于文档中被用户高亮的部分 jQuery中的基本选择器：id选择器，类选择器，元素选择器，后代选择器，属性选择器。...hide() 和 show()隐藏和显示 HTML 元素 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(...function(){ $("p").show(); }); $("button").click(function(){ $("p").hide(1000); }); $(document)....; }); }); }); toggle() 方法来切换 hide() 和 show() 方法 $("button").click(function(){ $("p").toggle...(); // 显示弹出层窗体 $("#layer-pop").show(); // 设置弹出层窗体样式 $("#layer-pop").css

3.4K2 0

jQuery 选择器

基础选择器和层级选择器案例代码 div>我是divdiv> div class="nav">我是nav divdiv> 我是p <...知识铺垫 jQuery 设置样式 $('div').css('属性', '值') 隐式迭代 // 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。...$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作案例代码多个里面筛选几个 ...}) 7.jQuery 里面的排他思想 // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。...show() 隐藏元素 hide() $(function(){ // 1.鼠标经过左侧的小li $("#left 1i").mouseover

3.9K3 0

1. jQuery 选择器

基础选择器和层级选择器案例代码 div>我是divdiv> div class="nav">我是nav divdiv> 我是p <...1.4 知识铺垫 jQuery 设置样式 $('div').css('属性', '值') jQuery 里面的排他思想 // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式...$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作链式编程 // 链式编程是为了节省代码量，看起来更优雅。...show() 隐藏元素 hide() $(function () { // 当鼠标经过左侧栏时相应的图片显示出来 // 鼠标经过事件...").eq(index).show(); // 其他(兄弟图片)图片隐藏 $("#content div").eq(index).siblings().hide(

1.1K3 0

Web前端JQuery入门实战案例

$("#btn1").click(function(){ // alert("dashu"); $("div").show(); // $("div").show...") $("#btn") $(".class") 基本选择器 jquery选择器是jquery提供的一组方法，用来方便我们找页面中的元素，jquery选择器返回的是jquery对象。..."red"); 交集选择器 $("li.green").css(); 层级选择器子代选择器 $("ul>li"); 后代选择器 $("ul li"); div id="father"> div>...(){ var idx=$(this).index(); $("#center>li:eq("+idx+")").show().siblings().hide(); }); }); 而linear是线性匀速的效果动画。

4.5K1 0

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

PS：jQuery 中使用 jQuery对象.val("内容") 来设置表单标签的 value 属性。...PS：jQuery中使用 jQuery对象.css("属性":"值"); 的方式设置标签的样式。 4、并集选择器语法：$("div,p,span")，中间使用逗号隔开。...小总结：jQuery中的一些方法 val(); // 获取或设置表单标签中的 value 值。 css(); // 设置元素的 css 样式属性值。...jQuery 中可以使用方法：show() 和 hide(); 3、show 和 hide 方法中可以添加参数，数字表示毫秒。...2、:eq() 选择器：匹配一个给定索引值的元素。 3、.hide() 隐藏一个元素； .show() 显示一个元素。

2.3K4 0

【前端性能】必须要掌握的原生JS实现JQuery

如果事后不研究原理，完全不会有成长废话不多说，下面的代码示例是一些流行的常用的JQuery功能的原生JS实现。 ...jQuery 选择器的原生实现便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。...Css的属性，而并非将它们全部传递给JQuery的Css函数时，性能明显会快很多。...show 与 hide 的原生实现 show()与hide()应该也是JQuery中十分常用的方法，原生JS实现同样轻松。...hide()---- /* jQuery */ $(el).show(); $(el).hide(); /* native equivalent */ el.style.display = '';

1.5K3 0

JavaScript学习笔记（四）—— jQuery入门

) 选择包含选择器所匹配元素的元素 :empty 选择所有不包含子元素或者不包含文本的元素 :parent 选择含有子元素或者文本的元素 $("div:contains('刘...");//设置HTML内容 }); }); 对元素的值进行操作在jQuery中，使用val()方法返回或设置被选元素的value属性。...").click(function () { $(this).parents(".ex").hide("slow"); }); }); 使用show...{ $("p").hide(); }); $(".btn2").click(function () { $("p").show(); }); }); </script...元素的淡入与淡出使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.: show(speed,callback) speed参数规定显示或隐藏的速度: - slow

12.4K5 0

第86节：Java中的JQuery基础

/div> Show jQuery fadeTo() 函数隐藏和显示 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show();...}); speed 参数设置值： "slow", "fast", "normal" 或 milliseconds $("button").click(function(){ $("p").hide(1000... div id="div1">dashucodingdiv> 表单选择器 ?...效果层级选择器后代选择器: 选择器1 选择器2 子元素选择器: 选择器1 > 选择器2 相邻兄弟选择器 : 选择器1 + 选择器2 ? 效果 ? 效果 ?

3.6K3 0

python_day15_前端_jQue

jQuery_v3.3.1.js"> 代码内容四选择器和筛选器 4.1 选择器 4.1.1 基本选择器... (4种) $(".outer div") 后代选择器 $(".outer>div") 子代选择器 $(".outer+div") 毗邻选择器... $(".outer~div") 最近标签毗邻选择器 # 后代选择器 div class="div1"> hello div1 hello worlddiv> show">显示 hide">隐藏hello worlddiv> show">往上隐藏 hide">往下出现<

7K2 0

JQuery学习第二天

1、CSS选择器学jQuery选择器之前先了解下css的选择器标签选择器（td、a、p），ID选择器（#note），类选择器（div.note、.mycss），群组选择器（td,a,p、div.a,...li,p），后代选择器（#links a、#footer .mycss），通配选择器（*） 2、JQuery选择器 JQuery选择器完全继承了CSS的选择器，而CSS只是改变样式，Jquery是添加动作...：MoreSelectors for jQuery，Basic Xpath等知识点汇总： Show()是显示隐藏的匹配元素，css(name,value)是给元素设置样式，text(string)是给元素添加文本内容...，filter(expr)选出表达式中元素expr可以多个用逗号隔开，addClass(class)给元算添加指定css类名，而removeClass正好相反附上一个简单的例子： ....$(‘ul li:gt(5):not(:last)’); $category.hide(); var $tog=$(‘div.showmore > a’); $tog.click(function

7847 0

jQuery基础与JavaScript与CSS交互-第五章

标题图目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器掌握过滤选择器掌握表单选择器 RIA技术常见的RIA技术 Ajax Sliverlight...div>下元素名是的子元素 $(‘.one + div’)：class为one的下一个div>元素 $(‘#two ~ div’)：id为two的元素后面的所有div>兄弟元素过滤选择器...要求选择器基本选择器层次选择器过滤选择器表单选择器技能（1）基本过滤选择器（2）jQuery对象的click()方法（3）jQuery对象的css()方法（4）选择器（5）...is()方法（6）show()方法（7）hide()方法（8）addClass()方法（9）mouseout()方法（10）mouseover()方法图片代码： div> 效果展示 “ul li:odd”选择列表ul中奇数项，用css()方法，设置背影判断class为tips，调用show()方法显示，调用hide()

1.2K3 0

2022年11月23日——jQuery——T1(基础选择器与表单选择器)

id选择器示例： div id="show">div> jquery-3.4.1.min.js"> $(function..."); }); id选择器唯一性示例： div id="show">div> div id="show">div> div id="show">div> div id="show">div> jquery-3.4.1.min.js"> $(function() {...class 属性用于为多个 HTML 元素设置特定样式。注意：不要使用数字开头的 class 属性！在某些浏览器中可能出问题。...id="show" class="div_class">div> div id="show" class="div_class">div> jquery-3.4.1

6.2K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭