使用jQuery在单击标签时隐藏某个div - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery的简单使用

通过jQuery注册事件 jQuery注册事件也很简单，通过选择器包装好标签对象后，调用相关的事件方法即可，调用事件方法时需要传递一个函数对象，当事件被触发就会执行函数里的代码。.../删除样式在jQuery中有一个addClass方法，可以给标签添加类样式，相对的removeClass方法则是删除标签中的类样式：标签通过jQuery可以很方便的控制标签，例如可以对某个标签增加子标签，或者删除某个标签等等，append方法就可以给某个标签添加一个子标签： <!...; }); 控制标签属性 attr方法可以控制标签的所有属性，通过这个方法可以给某个标签动态设置属性，也可以通过这个方法来获得某个属性的值，...jQuery的显示/隐藏效果 show方法可以显示某个组件，hide方法则可以隐藏某个组件： <!

7K1 0

Web前端知识(四)

4.1.3. jQuery基本使用第一步:下载jQuery库第二步:引入下载的jQuery库第三步:编写jQuery代码 4.1.4.jQuery获取标签 4.1.5.jQuery中事件介绍...addClass(class1 class2 class3...)给某个元素添加多个 CSS 类添加多个类时, 类名使用空格隔开 $ (‘div’).addClass(‘myClass1 myClass2...; offset().top; position()获取某个元素相对于父元素的偏移位置 position().left position().top 4.1.7.2.操作HTML l使用jQuery...代码实战: 切换显示隐藏我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。...").toggle(1000);}); 【隐藏和显示以及切换动画总结】: Ø注意:在无参数的时候,只是硬性的显示内容和隐藏内容。

7.4K3 0

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

是的

没有找到

JQuery

-- 需求：按钮 div，按钮单击控制div隐藏 display:none style --> 按钮 div id="box"><...() .prevAll() 选中某个属性 = 某个值的标签，只要键值对存在 $('img[alt=aa]').css('background','green') 下面的环境都是父子集 has选中了谁的子级是...---$(this) 会自动检索事件发生的目标链式编程（链式调用）的好处：简化代码量，执行的时候提高效率，导航标签都用ul套li jq中使用onclick、onmouseover等都取消on <!...***常用动画函数 slideUp()隐藏 slideDown()显示 slideToggle() 一会显示一会隐藏清除动画排队机制，在形成动画函数之前加stop() fadeIn() 淡入...').slideUp() // 隐藏 // $('div').slideDown() // 显示 // 清除动画排队机制：在形成动画函数之前加

7.8K2 0

Web阶段：第五章：JQuery库

3.JQuery流行程度 jQuery现在已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。...Jquery 的初体验需求：使用Jquery和javascript给一个按钮绑定单击事件注意：使用Jquery之前要将第三方jar包导入使用Jquery给一个按钮绑定单击事件，Jquery中的$()代替window.onload // alert($); // 测试jquery引入是否成功！...，（单位是毫秒）第二个参数是动画执行完成时的回调函数 hide() 隐藏可见的元素第一个参数是动画执行的时候，（单位是毫秒）第二个参数是动画执行完成时的回调函数 toggle() 可见就隐藏...jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果 div> 练习：CSS_动画品牌展示需求： 1.点击按钮的时候，隐藏和显示卡西欧之后的品牌

26.3K2 0

html滚动条使用，以及页面有多个div块，如何让body页面不使用滚动条，只在某个div内使用滚动条

滚动条基本知识：建议比价华丽的页面使用overflow:scroll这个样式的滚动条，比较好看。...scrollbar属性、样式详解 1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条） overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置...body页面不使用滚动条，只在某个div内使用滚动条先说说正常显示的，显示滚动条和不显示滚动条，效果图如下：代码： iframe 中始终显示滚动条：jquery实现的代码： iframe 中始终显示滚动条： div的滚动即使启动了也没有显示，这种情况可能是没有设置此div的高度或宽度，这是需要设置的。

4.7K3 0

jQuery 入门指南教程

注意dom对象和jQuery对象是有区别的，调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。...对于jQuery对象只能使用jQuery的方法，而dom对象只能使用dom的方法，如要获取第三个div>元素的内容。...div 元素 $('div').eq(5); // 选择第六个 div 元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法： $('div').next...它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。...而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。

1.2K1 1

学习jQuery这一篇就够了

目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！...本地引入：将 jQuery 下载下来，然后导入项目中，使用 script 标签进行引用 jquery-1.9.1.min.js"> jquery/1.9.1/jquery.min.js"> # 1.5 jQuery 快速使用 <!...注意：如果存在（不存在）就删除（添加）一个样式类需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...需求描述：为 ul 下的所有 li 添加单击事件，要求将该单击事件委托给 ul，当单击 li 时，所对应的 li 背景变为红色 1111 2222</

1K5 0

Jquery入门基础教程免费版

————————————————-----------看大厂的源码------ jd:1.6.4 sina:1.7.3 jquery 3.选择器和方法 3.1 使用jquery访问三个div元素在jquery里面，使用[]来指定属性选择器，基本选择器[属性选择器] 属性选择器符号说明用法 $("a[href]") 选择所有包含href属性的元素 $("a[href]").css("background...Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件方法描述执行时机 click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。隐藏的；如果元素是隐藏的，切换为可见的。

1021 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

可以用同样的方法解决元素上的问题阻止默认行为网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为在jquery中,提供了preventDefault...举一个例子,在项目中,经常需要验证表单,在单击”提交”按钮是,验证表单内容,例如元素是否是必填字段,某元素长度是否够6位,单表单不符合提交条件时,要阻止表单的提交 eg: $(“#sub”).bind(...该方法的作用是获取到光标相对于页面的x坐标和y坐标.如果没有使用jquery时,那么IE浏览器中是使用event.pageX()和event.pageY()方法.如果页面上有滚动条,则还要加上滚动条的宽度和高...id="showMsg">div> ---- 4 Ajax【掌握】第一层，最原始层，$.ajax,一般不使用，完成更强大功能时需要使用。...在jQuery 1.3中也可以接受一个字符串了。 •callback:载入成功时回调函数。

8.3K2 0

javaWeb核心技术第五篇之jQuery

jquery对象, 使用js的方式获取的对象称为dom(js)对象, 两者的方法和属性不能混用, 使用jquery的方法和属性时,必须保证对象是jquery对象...; //7 两者设置值的区别 //html在设置内容时,可以解析html标签 $("div").html("已满18,请戴眼镜......"); //8 两者获取值的区别 //html在获取时,原样获取(不会解析任何标签) // alert($("div").html()); //text在获取时...; //7 两者设置值的区别 //html在设置内容时,可以解析html标签 $("div").html("已满18,请戴眼镜......"); //8 两者获取值的区别 //html在获取时,原样获取(不会解析任何标签) // alert($("div").html()); //text在获取时

8K1 0

JQuery的学习

div> //使用JQuery获取元素对象 var div1 = $("#div1"); alert(div1.html()) var div2...JQuery对象和JS对象区别与转换： 1.JQuery对象在操作时，更加方便； 2.JQuery对象和JS对象方法不通用； 3.两者相互转换： * JQuery --> JS : JQuery...);//可以将其当做数组来使用 //对$divs 中所有的div让其标签体内容变为"bbb" // $divs.html("bbb"); // JQuery --> JS :...swing",可用参数"linear" * swing:动画执行时效果是：先慢，中间快，最后又慢 * linear：动画执行时速度是匀速的 3.fn:在动画完成时执行的函数...使用定时器来完成。setTimeout (执行一次定时器) 2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display 3.

16.6K2 0

WEB入门之十八动画特效

核心技能部分 8.1 显示/隐藏动画在DOM中，可以通过样式属性display来控制元素的显示和隐藏，但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数，详见表8-1-1所示。...下面我们对上一个示例进行简单改造，单击按钮时，让图片显示；再次单击时，让图片隐藏；依次循环... ......，图片会在淡入和淡出动画之间进行切换，单击下面的单选按钮时可以使用fadeTo函数对图片的透明度进行精确控制 8.1 自定义动画在前面讲过的诸多动画函数中，基本上都是通过改变元素的高度、宽度和透明度来实现动画的...任务实训部分 1：表格展开/关闭动画训练技能点 jQuery内置动画特效函数需求说明实现一个如图8.2.1所示的表格，当单击某个分组时，该分组下面的成员就显示/隐藏。...内置动画函数需求说明图8.2.6显示的是广告图片，默认透明度偏暗，当鼠标悬浮到某个图片时，该图片变亮，离开时恢复变暗。

761 0

Web前端学习第4章 jQuery 2 jQuery常用方法

一、事件概述事件的基本概念上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候...二、鼠标单击事件我们先来将最常用的鼠标单击事件click，jQuery的基本语法如下所示： 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...，当我们点击img标签的时候，使用attr方法将其src属性设置成另一张了图片的地址，这样就实现了图片的切换。...鼠标移动获取坐标鼠标在元素上移动的时候也会触发事件，下面我们来实现一个功能，当鼠标移动到一个div的时候，获取鼠标在网页页面上的坐标,代码如下所示： 1 在控制台输出x坐标和y坐标。课后练习滑动显示和隐藏的右边栏，点击按钮弹出，电气其他位置隐藏。让图片跟随鼠标移动。返回顶部

1.9K3 0

jquery入门

运用jQuery时，需要在页面中引入jQuery文件 jQuery的hello world 在页面中引入jQuery支持 --> jquery-1.12.4.js"> #box{width: 200px...id="box">div> // jQuery代码，写在一对script标签中 // 可以使用最简洁的代码，完成JS中复杂的功能！...JQuery代码使用$(function() { ...代码：就是页面标签加载完成执行的代码.. }) */ $(function() {...-- 使用JQuery改造瀑布流！

2.9K2 0

WEB入门之十八动画特效

核心技能部分 8.1 显示/隐藏动画在DOM中，可以通过样式属性display来控制元素的显示和隐藏，但是这没有动画效果。jQuery提供了实现显示/隐藏动画的函数，详见表8-1-1所示。...下面我们对上一个示例进行简单改造，单击按钮时，让图片显示；再次单击时，让图片隐藏；依次循环... ......，图片会在淡入和淡出动画之间进行切换，单击下面的单选按钮时可以使用fadeTo函数对图片的透明度进行精确控制 8.1 自定义动画在前面讲过的诸多动画函数中，基本上都是通过改变元素的高度、宽度和透明度来实现动画的...任务实训部分 1：表格展开/关闭动画训练技能点 jQuery内置动画特效函数需求说明实现一个如图8.2.1所示的表格，当单击某个分组时，该分组下面的成员就显示/隐藏。...内置动画函数需求说明图8.2.6显示的是广告图片，默认透明度偏暗，当鼠标悬浮到某个图片时，该图片变亮，离开时恢复变暗。

1541 0

【融职培训】Web前端学习第4章 jQuery 2 jQuery常用方法

一、事件概述事件的基本概念上一章我们讲解了使用jQuery选择器获取元素，并通过一些方法来操作元素，本章我们讲解事件的概念，通过事件我们可以加强用户与浏览器的交互性，例如可以实现当用户点击某个元素的时候...二、鼠标单击事件我们先来将最常用的鼠标单击事件click，jQuery的基本语法如下所示： 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...，当我们点击img标签的时候，使用attr方法将其src属性设置成另一张了图片的地址，这样就实现了图片的切换。...鼠标移动获取坐标鼠标在元素上移动的时候也会触发事件，下面我们来实现一个功能，当鼠标移动到一个div的时候，获取鼠标在网页页面上的坐标,代码如下所示： 1 在控制台输出x坐标和y坐标。课后练习滑动显示和隐藏的右边栏，点击按钮弹出，电气其他位置隐藏。让图片跟随鼠标移动。返回顶部

1.6K1 0

继续死磕前端

要么老老实实放置在所需应用样式的标签后面，要么将其丢到 window.onload 方法内部。 jquery 提供了一种速度更快，使用更便捷的方式，那便是 ready 方法。...html('xxx'); jquery 中获取或者设置某个属性值时可以使用如下方法： // 取出图片的地址 var $src = $('#img1').prop('src');...当我们验证邮箱格式、手机号、身份证号时必不可少，那么 jquery 中如何使用呢？...这是一个div元素div>'); 移动或者插入标签的方法 1、 append() 和 appendTo()：在现存元素的内部，从后面放入元素 var $span = $('这是一个span...，从后面放入元素 4、 before() 和 insertBefore()：在现存元素的外部，从前面放入元素删除标签 $('#div1').remove(); 3.4 对象 JavaScript 的对象

2.8K1 0

JQuery事件处理

Jquery事件 1、绑定事件示例代码：绑定事件 div style=”display:none;”> 什么是绑定事件？...div> //单击显示，再次点击隐藏 /*$(function(){ $(“a”).bind(‘click’,function(){ if...style=” display:none;”>这里的内容默认是隐藏的div> //JQuery中目前有两个合成事件hover(),toggle...).next().show(); },function(){ $(this).next().hide(); }) });*/ //上面例子中，第一单击显示，第二次单击隐藏，同样可以用合成时间toggle...使用addClass(),再次单击就用removeClass去掉就可以 },function(){ $(this).next().hide(); }) }); 3、事件冒泡示例代码

2.8K5 0

项目中遇到的bug（web前端-持续更新）

input放在a标签里面单击不能获取input的光标（IE环境下）双击才可以获得焦点，目前有的解决方案：不要给a标签添加href属性；不要在外面套上a标签。...隐藏input标签的光标项目需求：input值json加载，只读+光标隐藏，通用的解决方案有其他标签模拟，但是不能改input 所以解决方案为给input加下面这两个属性： //只读 readonly...return jQuery(a).text().toUpperCase() .indexOf(m[3].toUpperCase()) >= 0; }; 例子 div>johndiv...> div>Johndiv> div>hey hey JOHN hey heydiv> $('div:Contains("john")') //会选择到两个div 当一个变量被声明后，扩充其属性并不会改变原数据类型...= 'complete') { return; } //load事件在win

9942 0

WEB入门之十四 jQuery事件

4.页面卸载事件unload 当用户关闭某个页面时，浏览器会卸载此页面，此时发生的就是unload事件。示例5.6演示在该事件发生时弹出一个对话框。...在jQuery中，事件对象通常作为匿名函数的参数使用，语法如下所示： jQuery对象 ....事件，在该事件中通过两个匿名函数控制类名是content的div，第一个函数控制该div显示，第二个函数控制该div隐藏。...div>div> 该示例与5.12差不多，只是由hover事件换成了toggle事件，当鼠标单击绿色的标题时，下面的内容就会显示出来；当鼠标再次单击绿色的标题时，下面的内容就会隐藏起来...把bind换成live后，表格中的任何一行在单击时都可以改变背景色，包括动态创建的行。

811 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭