位置:首页 » 技术 » Jquery基础之hide,show,toggle

Jquery基础之hide,show,toggle

日期:2016-04-30 阅读:0num
Advertisement

1.认识JQurey,在上面的博文中有提到,实现同样的效果,引用jquery可以减少很多代码。jquery的宗旨就是write less,do more,这就好比我们能够借用jquey这个强大的javascript库来减少我们的代码量。搭建jquery环境也比较简单,一个是下载jquery文件库到本地引用,还有一个直接引用文件库的URL,这里提供一个1.9.0的地址:

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script><!--引用这个jquery库-->
<style type="text/css">
#test{
    display:none;
    width:120px;
    height:50px;
    border:1px solid blue;
     }</style>
<div id="test">Hello world!</div>
<!--设置三个按钮,每次点击调用特定的函数--><button onclick="sayHello()">点我打开!</button><button onclick="sayGoodbye()">点我关闭!</button><button onclick="change()">点我切换!</button><script type="text/javascript">
            function sayHello(){
                $("#test").show(5000);
            <!--设参数5000,表示用5000ms的时间完成这个动作-->
            }

             function sayGoodbye(){
                $("#test").hide();
            <!--不设置,默认速度-->
            }

             function change(){
                $("#test").toggle("slow");
            <!--设置以slow的速度打开-->
            }
        </script>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

2.Jquery 效果:隐藏hide(),显示 show(),切换toggle()

Jquery基础之hide,show,toggle


Jquery基础之hide,show,toggle

相关文章
  • Jquery基础之hide,show,toggle Jquery基础之hide,show,toggle

    1.认识JQurey,在上面的博文中有提到,实现同样的效果,引用jquery可以减少很多代码.jquery的宗旨就是write less,do more,这就好比我们能够借用jquey这个强大的javascript库来减少我们的代码量.搭建jquery环境也比较简单,一个是下载jquery文件库到本地引用,还有一个直接引用文件库的URL,这里提供一个1.9.0的地址: <meta content="text/html; charset=utf-8" http-equiv=&quo

  • jquery中show()、hide()和toggle()用法实例教程

    本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javascript&

  • jquery中show()、hide()和toggle()用法实例

    这篇文章主要介绍了jquery中show().hide()和toggle()用法,以实例形式分析了show().hide()和toggle()在显示.隐藏及切换等应用技巧,需要的朋友可以参考下 本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 代码如下: <html> <head> <ti

  • jQuery 基础学习笔记小结(一)

    jQuery 基础学习笔记总结(一) Jquery 学习笔记 总结 感想: 此前在做网站时用到过jquery相关,特别是Ajax相关技术,可是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料主要的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉很麻烦的东西,通过Jquery的函数和插件都很容易的实现了并且效果极佳.这里只是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled&quo

  • 【jQuery基础学习】04 jQuery中的报表操作及cookie插件的使用

    [jQuery基础学习]04 jQuery中的表格操作及cookie插件的使用 这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统,所以说数据表格用到的还是比较多的.那么在这里写出来说不定还能用上. 关于jQuery的表格应用 隔行变色 $(function(){ $("tbody>tr:odd").addClass("样式

  • jQuery基础知识,很赞的!

    jQuery基础知识,很赞的!!! 一.jQuery基础 1.jQuery是什么? jQuery是一个js框架,其主要思想是,通过 选择器查找到对应的节点,然后对这个节点进行 封装(封装成一个jQuery对象).通过调用jQuery 对象的属性或者方法来实现对节点的操作.这样做的 好处是:第一,将不同的浏览器之间的差异屏蔽起来了. 第二,代码更加简洁,维护方便. 2.jQuery编程的步骤 step1: 使用选择器查找节点 step2: 调用jQuery对象的方法或者属性 选择器:jQuery模

  • jQuery基础小结(转)

    jQuery基础总结(转) 1 :eq()和nth-child() 看下面代码: <SCRIPT LANGUAGE="JavaScript"> $(function(){ $("#selected-plays > li:eq(1)").addClass("a"); //等价于 $("#selected-plays > li:nth-child(2)").addClass("a");

  • Jquery基础知识温习(转)

    Jquery基础知识复习(转) jQuery 1.特点: 小巧 功能强 跨浏览器 插件 2.使用 实际是js文件 a) 复制js到WebRoot b) 页面<script src="jquery.js" charset=""></script> 3.核心对象及常用方法和属性 a)名称 jQuery和$ 用$找出来的对象叫jQuery对象 用document找出来的对象叫Dom对象 b)dom和jquery对象转换 jQuery对象.get(0

  • jQuery基础知识

    一.jQuery基础 1.jQuery是什么? jQuery是一个js框架,其主要思想是,通过 选择器查找到对应的节点,然后对这个节点进行 封装(封装成一个jQuery对象).通过调用jQuery 对象的属性或者方法来实现对节点的操作.这样做的 好处是:第一,将不同的浏览器之间的差异屏蔽起来了. 第二,代码更加简洁,维护方便. 2.jQuery编程的步骤 step1: 使用选择器查找节点 step2: 调用jQuery对象的方法或者属性 选择器:jQuery模仿css选择器语法,创建的一套 用于

  • jQuery基础(犀利的jQuery笔记)

    jQuery基础(锋利的jQuery笔记) 一.认识 JQuery 1. 概述 jQuery是为了简化JavaScript的开发而诞生的一个JavaScript库.它是一个轻量级的库.拥有强大的选择器.出色的DOM操作.可靠的事件处理.完善的兼容性和链式操作等功能. jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作. 2. 配置jQuery环境 获取jQuery最新版本: http://jqu

  • 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画

    1.jQuery基础语法 · 链式编程 $("#div1").show().css("color":"red") ·用一个ready事件作为处理HTML文档的开始. $(document).ready(function(){ // 在这里写你的代码... }); 简写:$(function() { // 在这里写你的代码... }); ·onload事件是在 dom元素 图片 css等加载完毕后出发, ready是在dom元素加载完毕后出发,加快

  • jquery基础函数用法六

    jquery基础函数用法6 71. hide(),hide(speed, callback).前者是把element隐藏用的是display:none的样式.后者是把element的长,宽,以及透明度都改变.callback表示动画完成后调用的函数.speed表示速度. eg: 1. <p>Hello</p> $("p").hide() ==>> [ <p style="display: none">Hello<

  • JQuery基础-一步一个脚印儿

    JQuery基础------一步一个脚印 1.工厂函数 $() 标签名:$('p')取出文档中所有的段落 ID:$('#some-id')会取得文档中对应ID的一个元素 类:$('.some-class')会取得文档中带有some-class类的所有元素 eg:$(document).ready(function(){ $('#selected-plays >li').addClass('horizontal'); }); 意思所有DOM加载后就运行,对id为selected-plays下面所有

  • jQuery基础学习(二)(效果)

    jQuery基础学习(2)(效果) jQuery效果 a.隐藏效果 $(selector).hide(speed,callback); $(selector).show(speed,callback); (1)可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒. (2)可选的 callback 参数是隐藏或显示完成后所执行的函数名称. <!DOCTYPE html> <html> <head

  • jQuery 基础小结

    jQuery 基础总结 以下给一些jQuery里用法相似的标签作了粗略的总结. 样式篇 $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码; jQuery对象转化成DOM对象: jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素. jQuery自带的get()方法:转换为DOM对象 DOM对象转化成jQuery对象:$ 基本选择器:id选择器 类选择器 元素选择器 层级选择器: 子选择器:$('div > p') 选择

  • jQuery基础语法实例教程 入门

    本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 代码如下: $("div") 也

  • jquery show()和hide()让元素动起来

    在jquery中我显示与隐藏元素可以直接使用show()和hide()来操作,这比起js中的操作要方便了,同时show()和hide()还可以设置参数让我们的运行有个缓存效果,下面我来给大家介绍. 基本用法 show() 方法 显示出隐藏的 <p> 元素. 代码如下 复制代码 $(".btn2").click(function(){ $("p").show(); }); hide()隐藏可见的 <p> 元素: 代码如下 复制代码 $(&quo

  • jquery基础教程札记

    jquery基础教程笔记 css选择符 $('#id > li').addClass('none'); // > 子元素 $('#id li:not(.none)').addClass('not-none'); // :not选择符 XPath选择符 $('a[@title]') //所有带title属性的链接 $('div[ol]') //取包含一个ol元素的所有div ^ 开始 $结尾 *任意位置 $('a[@href^="mailto:"]'.addClass('ma

  • 更多Jquery基础范例

    更多Jquery基础实例 1. 隐藏元素 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(fu

  • Jquery 基础学习札记

    Jquery 基础学习笔记 1.属性: 为所有匹配的元素设置一个计算的属性值 //为所有的input添加属性class="btn" //$("input").attr("class","btn"); 2.CSS:为每个匹配的元素添加指定的类名 //对所有的提交按钮添加样式 $("input:submit").addClass("btn"); 3.值:获得第一个匹配元素的当前值 //取的某

最新文章
  • 看起来 Corvette Z06 2016 将会支持 iOS CarPlay

    http://techcrunch.com/2015/06/22/chevrolets-first-carplay-enabled-cars-are-rolling-off-the-production-line/ --cut-- loniper在2016-05-09 14:38:56回答到: 不知道这个能不能后续通过更换中控模块来支持 PP在2016-05-09 14:38:56回答到: 更希望看到HPE800.

  • HTMLCanvasElement.captureStream()有什么替代方法么

    有个项目需要在前端用 js 将 js 计算出来画在 canvas 的图像混合 video 的视频作为 stream 发出去,转而搜到 captureStream 这个函数提供差不多的一个思路.然后发现这个函数目前只有 Firefox41 . 42 . 43 内实现了,别的浏览器直接挂--话说有谁有什么替代思路嘛 --cut-- iwege在2016-05-09 11:51:30回答到: https://github.com/zb3/CanvasVideoRecorder ? iwege在2016

  • Photoshop把普通照片转素描效果 Photoshop把普通照片转素描效果

    原图: 最终效果: 1.首先打开素材图片,复制背景图层,得到图层1,然后选择图像-调整-色相/饱和度命令,设置饱和度为-100,把图片转为黑白,如图所示. 2.按下Ctrl+J复制出图层1副本,然后选择图像-调整-反相命令,效果如图所示. 3.设置图层1副本的混合模式为颜色减淡,如图所示. 4.选择滤镜-模糊-高斯模糊命令,半径设置可以根据用户的实际情况而定,效果如图所示. 5.按下Ctrl+Alt+Shift+E盖印,得到图层2,然后添加图层蒙版,如图所示. 6.取消图层1副本的可见性(单击眼

  • 揭秘:埃及金字塔 狮身人面像为何建在金字塔旁? 揭秘:埃及金字塔 狮身人面像为何建在金字塔旁?

    金字塔,东方文化四大奇迹之一,古埃及是世界历史上最悠久的文明古国之一.金字塔是古埃及文明的代表作,它建造于沙漠之中,结构精巧,外形宏伟,是埃及的象征.金字塔古埃及法老王们死后的安眠之地. 1.图拉古迹的探索 古老的著名国都-图拉,它是由墨西哥谷地延伸到尤卡坦地区的一座逃漓山城,位于伊达尔戈州,距墨西哥城55英里.这座古都城有壮观的金字塔,让人不解的是在高高的金字塔上面耸立着一排排神情威武的巨型雕像.这些严峻的武士雕像是为保卫人类和平在站岗放哨!?还是在等候着"天神"的到来? 古城图拉建

  • Facebook内部资料:产品设计评价体系解密 Facebook内部资料:产品设计评价体系解密

    如何对设计进行评判,一定有很多答案,有利有弊.问100位设计师,会得到100种回答.用线上PV.UV等数据说话,更多受产品属性.运营动作影响:采用用户调研,往往得到的是用户角度的单方面看法,缺少专业指导性意见:用需求方的满意来衡量,可能最后需求方认可的是设计师认为最滥的方案. 两家都挂有"天下第一"相邻卖臭豆腐的师傅. 你们谁家的臭豆腐闻起来臭? 回答:"我" 你们谁家的臭豆腐吃起来香? 回答:"我" 那你们到底谁的臭豆腐天下第一? 他们家的臭豆

  • 蔬菜为何也会致癌?

    蔬菜裁培中往往大量施用化肥,植物吸收的多余氮肥便以'硝酸盐'情势积存在叶片中.各部位硝酸盐含量不同:茎叶部最高,根部次之,茄果最低. 蔬菜采收之后,在硝酸还原酶的作用下,硝酸盐被还原为亚硝酸盐,使得蔬菜中亚硝酸盐含量升高.同时,维生素C养分素的含量却会降落.储躲温度越高,这种变更就越快.在夏季,假如将绿叶蔬菜放在室温下24小时,其维生素C几乎全部损失,而其中的亚硝酸盐浓度可以上升几十倍乃至几百倍.

  • 两种顾客忠诚度培养新方式 两种顾客忠诚度培养新方式

    通过积分.折扣或者小礼品奖励顾客,培养他们的忠诚度,是商家们最常用的方法.不过,大多数情况下,商家们只会记录你当下的购买行为,如果你没带会员卡可能就积不了分或者换不了礼品,那就不好办了."商业不靠谱"观测到一家名为Rnkd的在线平台,它可以帮助你解决这个问题--你只需要将自己柜子里的物品标签拍下来,连同购买地信息一起上传,如果得到确认,你将会有不错的回报. Rnkd由Zappos(在线商城)的创始人Nick Swinmum创立,它支持用户通过facebook或者邮箱账号注册,也提供ip

  • WinXP系统如何设置文件夹权限以免被他人不小心删除 WinXP系统如何设置文件夹权限以免被他人不小心删除

    1.桌面有一个我的电脑的图标,然后用鼠标点击打开,弹出的窗口中选中工具这个选项,然后在这个菜单中在选项"文件夹选项"栏目打开. 2.就在弹出的"文件夹选项"的窗口中,可以看到界面中有一个查看选项打开. 3.这个时候可以看到有一个可以勾选的选项,那么就需要取消勾选"使用简单文件共享"这个选项,确认了以后应用关闭窗口. 4.需要把设置好后的文件夹属性为下图的操作,大家如图设置就可以了.

  • 网站被K或者排名下降背后的因素有哪些

    很多站长都参加了讨论,有些人说是因为十八大要召开的原因,互联网管理的比较严格.貌似我们从事SEO的和十八大八竿子都到不了一起. 也有站长说,是因为算法变动了,所以他们所在的行业就处于变动,不可能行业算法变了你的网站被K了人家的网站缺好好的. 关于百度站长论坛中管理员说,这次的算法升级,存在一大部分因素是算法升级,如果网站被K掉也可能是因为误K,所以提交以下投诉. 真正的很多有经验的站长都知道,网站的快照投诉一下子就回来了,但是百度的排名和被K了之后投诉几乎是不可能回来的,回来的几率几乎为0.这一

  • Galaxy MEGA如何设置静止IP?(I9200,I9152) Galaxy MEGA如何设置静止IP?(I9200,I9152)

    静止IP是指:长期分配给一台计算机或网络设备使用的IP地址.一般来说,采用专线上网的计算机才拥有固定的Internet IP地址.如果在开启WLAN无线网络时,想要设置为静止IP,可以按照以下方式进行操作 1.在待机页面下,点击[应用程序]图标. 2.点击[设定]图标. 3.点击[连接],然后将[WLAN]开启. 4.点击[WLAN]. 5.点击一个无线热点(这里以"AndroidAP"为例). 6.将[显示高级选项]勾选. 7.向下滑动,将IP设定更改为[静止]. 8.根据路由器设置

热门推荐
  • 猫咪生产前要准备哪些东西? 猫咪生产前要准备哪些东西? 流浪猫在生产前,会自己做一些简单的准备工作,但是家养的宠物猫如果怀孕了,就需要主人做一些特殊的准备工作,迎接新生命的诞生. 在预产期前一周,要为猫找一个温暖.阴暗.肃静的地方产仔,或准备好产箱或产窝.产箱或产窝可以用木板钉制,也可以用硬纸箱代替.产箱的大小以猫的四肢能伸直并有一定空隙为宜.产箱的门要有7~8厘米高的门槛,以防小猫跑出. 产箱的内壁要光滑,不能有钉子或其他尖状突起,以免使猫妈妈或者小猫受伤.木箱不能有油漆,以防对猫有不良的刺激或猫舔咬后引起中毒.产箱的底部要铺垫棉絮.布片.废皮毛等
  • Photoshop给水景美女加上梦幻的中性青蓝色教程 Photoshop给水景美女加上梦幻的中性青蓝色教程 来源:PS联盟 作者:Sener 效果图调色分为三步:首先降低主色饱和度得到中性色:然后用调色工具给高光及暗部增加淡淡冷色:最后给图片增加烟雾,再柔化处理,整体看上去唯美即可. 原图 最终效果 1.打开素材图片,创建可选颜色调整图层,对黄.绿.白进行调整,参数设置如图1 - 3,效果如图4.这一步适当减少图片中的绿色. <图1> <图2> <图3> <图4> 2.创建色相/饱和度调整图层,对黄色,绿色进行调整,参数及效果如下图.这一步快速把主色转为中性黄褐色
  • 经典伤感爱情语录摘抄 经典伤感爱情语录摘抄 经典伤感爱情语录摘抄 有的人与人之间的相遇就像是流星,瞬间迸发出令人羡慕的火花,却注定只是匆匆而过. 有时,爱也是种伤害.残忍的人,选择伤害别人,善良的人,选择伤害自己. 有些的时候,正是为了爱才悄悄躲开.躲开的是身影,躲不开的却是那份默默的情怀. 在这个忧伤而明媚的三月,我从我单薄的青春里打马而过,穿过紫堇,穿过木棉,穿过时隐时现的悲喜和无常. 走,还是要走的的,留下来的不过是一副躯壳,留,还是要留的,我的心就在次生根了. 爱到分才显珍贵,很多人都不懂珍惜拥有.只到失去才看到,其实那最熟悉的才
  • 鸭梨山大是什么意思 鸭梨山大是什么意思 鸭梨原本意思为河北省古老地方水果品种.适应性强,丰产性好,果实大而美,肉质细脆多汁,香甜,较耐贮.符合认定标准,予以认定.适宜在黄淮海平原沙地栽培.当前被用在网络用语中,鸭梨是"压力"的谐音."鸭梨很大"是压力很大的谐音,"毫无鸭梨"是毫无压力的谐音,"鸭梨很大"."毫无鸭梨"等词来源于百度贴吧. 鸭梨山大是什么意思 网络用语鸭梨山大的来源 "鸭梨很大""毫无鸭梨"等
  • 洛奇英雄传特色系统之罗杉利安迷宫 洛奇英雄传特色系统之罗杉利安迷宫 罗杉利安迷宫 罗杉利安迷宫是<洛奇英雄传>中的一个神秘的地带,其难度及可挑战性完全不同于其他一般的战役.因为不用战币也能进行挑战,所以战币用完之后可以挑战一下罗杉利安迷宫哦. 1. 怎样进入罗杉利安迷宫 当人物角色达到23级后,玩家可以在支线任务中接到"罗杉利安迷宫"任务.按"M"键在支线任务列表中查询"罗杉利安迷宫"任务. 经过与NPC"马利"."凯雅拉"先后对话后,即可前往"罗杉利
  • 《剑网3》轻为春雨重为山 藏剑PVE属性基础解析 《剑网3》轻为春雨重为山 藏剑PVE属性基础解析 属性面板篇: 外功伤害:2534-2793 外功防御:8.35% 外功攻击 外功攻击力:17174,每秒伤害提高1717.4,基础外功攻击力为11250,最终外功攻击力为17174. 外功命中:108.58%,外功命中等级836(提高对同等级目标命中几率18.58%). 外功会心:36.96%,外功会心等级1663(提高外功会心几率36.96%). 外功会心效果:244.16%,外功会心效果1245(提高外功会心效果69.16%)外功会心效果的最大值为300%. 外功加速:0.13% 加速等级7
  • qq2013聊天记录怎么导出与删除 qq2013聊天记录怎么导出与删除 昨天有一朋友问除了VIP之外还有没有其它办法把QQ聊天记录导出与删除来呢,下面小编来给各位同学介绍qq2013聊天记录怎么导出吧,各位有需要了解的朋友可参考. QQ聊天记录导出 1.首先登陆qq,然后选择下方的消息记录器 2.选择工具就可以导出全部的消息记录 3.然后保存就可以了 QQ2013怎么删除QQ聊天记录 1.最方便最快速的删除聊天记录的方法是在登录的时候.点击下拉选项, 然后选择你要删除记录的QQ. 点击后面的那把× , 然后在选择删除此帐号所有记录文件. 然后点击确认. 但是要注意删