位置:首页 » 技术 » 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.值:获得第一个匹配元素的当前值 //取的某

最新文章
  • 使用 V2EX DNS 时,Gae launcher 没法成功部署程序

    提示出错: Server: appengine.google.com. Scanning files on local disk. Initiating update. 2010-11-12 23:01:20,416 ERROR appcfg.py:1818 An unexpected error occurred. Aborting. Traceback (most recent call last): File "/Applications/GoogleAppEngineLauncher.a

  • 创业用sae好还是自购vps?

    其实很想尝试下云,貌似sae在多少pv之下价格非常便宜,但是域名是个问题,想问问各位选哪种比较好? --cut-- zuroc在2013-07-16 08:35:4回答到: sae 经常不稳定 ... zuroc在2013-07-16 08:36:0回答到: bae更加不稳定 gae比较靠谱 zuroc在2013-07-16 08:36:1回答到: bae更加不稳定, gae比较靠谱 lichao在2013-07-16 08:38:0回答到: 面向国内客户的话,阿里云.盛大云都可以考虑,@zur

  • 幼儿园托班教案:好吃的糖

    幼儿园托班科学教案:好吃的糖 一.活动目标: 1.幼儿能大胆的想象与表达,敢于说出自己的想法. 2.幼儿可以在教师引导下尝试寻找替代物. 二.活动准备: 各种外形可爱.色彩鲜艳的弹性糖,一次性纸盘等. 三.活动过程: (一).以问题导入 1.出示一盘各种形状.颜色的糖,请孩子们说说自己想吃的糖像什么.什么颜色的. (教师鼓励幼儿进行回答,并及时的给予表扬和鼓励) 2.让孩子们挑选喜欢的糖尝一尝,并说说味道. (二).点点数数依次出示五盘糖,分别放有:1颗大熊糖,2颗大圈圈糖,3颗蛋糕糖,4颗小圈

  • 美女最常犯下的十大化妆禁忌 美女最常犯下的十大化妆禁忌

    女生爱漂亮天经地义,但是有很多化妆禁忌妳犯下了都不知道,今天我们条列的一般女生最常犯下的10大禁忌,要你好看! check point 1 粉底别再妆白 很多彩妆师对女性朋友提出呐喊:不要再妆白了! 尽管一白遮三丑,不过,脸部与脖子两层明显的色差,往往还是泄了底呢!这可是彩妆师的大忌,还有发际与嘴角处的底妆要涂抹均匀,不然就会流于厚粉印象喔! 有人说,测试粉底要在手肘内侧,有人说要涂抹在脖子与脸颊交接处,其实,最不出错的方式,是直接把粉底涂抹在脸部与脖子交界处,出去百货公司拿着镜子在自然光下照一

  • 气场新娘炼成术 气场新娘炼成术

    女王的气场炼成术,外有"战袍",内修气质.新娘的气场如何炼成?将自个的身段塞进合适的婚纱里,将气质由里到外张扬,一身完美嫁衣上阵,美翻了!

  • 东山岛旅游景点

    东山岛位于中国厦门和汕头两个经济特区之间,东去台湾高雄110海里,南下香港210海里,环岛有32 个岛屿,总面积有194平方公里,是福建省重点旅游区. 东山岛是福建对外和对台经济贸易的重要口岸,是福建省人民政府批准规划的二十一世纪港口旅游城市,是福建省建设海峡西岸繁荣带的重点投资口岸.东山岛,冬暖夏凉,终年无霜,年平均气温20.8摄氏度,东山风光极具南国海滨特色.主岛七个月牙形的海湾首尾相连.绵延30多公里,是天然海滨浴场.风景名胜铜山古城,明朝大将戚继光,郑成功屯兵遗址,大学士黄道周故居深井村

  • 重磅:深度解析《中国网络媒体的未来2014》 重磅:深度解析《中国网络媒体的未来2014》

    2014年11月12日,主题为"引爆新注意力"的"2014年腾讯网媒体高峰论坛"在北京拉开帷幕.国内外多名资深媒体行业和产业从业者出席今年的峰会,并且发表了精彩的观点和讲话.嘉宾包括腾讯公司副总裁.腾讯网络媒体总编辑,赫芬顿邮报CEO Jimmy Maymann,中国人民大学新媒体研究所所长彭兰,上海报业集团社长裘新, 今日头条创始人张一鸣,华兴资本CEO包凡等. 中国人民大学新媒体研究所所长彭兰在大会上做了主题为<中国网络媒体的未来2014>的报告分享

  • 王自健进军手机行业 自称兼具设计和情怀 王自健进军手机行业 自称兼具设计和情怀

    今天凌晨,相声演员王自健在微博上宣布正式进军手机行业,引发了轩然大波. 王自健在微博上表示"各位朋友,手机创业的事情已经有了实质进展!各种优秀的创意多得一塌糊涂!全新的使用体验!请等待明年暑期!" 在这条微博发出之后,王自健备受吐槽,有不少网友都恳请他放过可怜的"手机圈".对此,王自健回应称他做的手机绝对不会是贴牌玩票性质,也绝对不会给国产手机抹黑,否则他"干一斤翔". 而且在微博中,王自健表示自己的手机将兼具"设计和情怀",

  • 北京网速测评报告:百兆宽带多为假货

    日前,北京市科技记者编辑协会对外发布<2014年北京地区网速测评报告>(以下简称<报告>).<报告>显示,10M带宽下载速度仅北京联通和北京电信两家合格,而最近市面上的百兆宽带多为假货.据介绍,<报告>是通过线上的微信公众号.网站,线下等多种方式,征集了北京地区千名网友进行的测速活动.在两周的时间内,主办方整理了每名网友不同时段提交的16项数据,并进行了筛选统计,最终形成了<报告>. <报告>对10M用户的下载速率进行统计对比发现,以

  • Galaxy MEGA如何切换手写输入法?(I9200,I9208,P729) Galaxy MEGA如何切换手写输入法?(I9200,I9208,P729)

    三星Galaxy MEGA系列支持手写输入法.拼音输入法.笔画输入法.当您进行文字编辑时,想要切换成手写输入法,可以按照以下步骤进行操作 1.在待机页面下,点击[信息]图标(这里以"信息"为例). 2.点击右上角的[新建信息]图标. 3.点击[小齿轮]图标. 4.点击[中文]. 5. 点击[全屏手写]即可. 提示: 如果在输入英文时,想要切换手写输入法:请点击[英文],然后选择[全屏手写]即可. 6.手机切换成手写输入法的界面.

热门推荐
  • 我国2020年建成载人空间站:独霸太空真好! 我国2020年建成载人空间站:独霸太空真好! 在中国空间技术研究院在京主办的第四届中国空间技术论坛上,全国人大代表.中国载人飞船系统总设计师张柏楠6日表示,中国计划在2020年前后建成自己的空间站. 即使在经济增长放缓的情况下,中国仍然计划按照国家主席习近平提出的"航天强国"目标进行积极开发. 首先,中国将于今年发射可运载空间站和月球探测器的长征五号火箭以及中国首枚数字化火箭长征七号.另外,今年还将相继发射天宫二号空间实验室.搭载两名航天员的神州十一号飞船,并进行交会对接. 报道称,2017年,中国将发射可运载在太空中所需补给品的
  • 旅游摄影如何拍出人文感动 旅游摄影如何拍出人文感动 人文摄影最迷人而且最有可能成为伟大作品之处便在于,同样的画面它几乎没有再出现一次的可能. 从事旅游业12年,最大的遗憾,就是没有早一点拿起相机多拍些照片,原因其实很喷饭-就是怕被团员怀疑是带团菜鸟,现在回想仍抱憾不已,因为有太多国家,不是那么容易有机会再去第二次.累积多次遗憾经验和一段既要带团又要拍照的摸索期之后,现在不管甚么旅游团体,一旦拿起相机,便不容易轻易放回背包,而且即使是利用带团的空档,也能拍出令自己满意的人文摄影作品. 其实,在国外旅游,真正值得按下快门的机会到处都是,差别只是在用么
  • 《QQ飞车》飞车喊你领红包 88888点券等你抢! 《QQ飞车》飞车喊你领红包 88888点券等你抢! QQ飞车微信公众号最新推出了飞车喊你领红包活动,在活动中给玩家们准备了最高88888点券以及豪华赛车的奖励.QQ飞车飞车喊你领红包怎么参加?下面就让小编来为大家介绍一下QQ飞车飞车喊你领红包活动的具体内容. 活动时间:4月15日-5月2日 活动内容: 飞车喊你领红包,凡是绑定QQ飞车官方公众号的玩家,都可以通过公众号入口进入活动页面获取红包一个,打开最高可获得88888点券,还有机会获得霸气非凡的T2紫焰战神!玩家还可以通过分享活动信息获取额外的红包,每个账号活动期间能够领取3个红包! 想获取<