Javascript与jQuery方法的隐藏与显示


Posted in Javascript onJanuary 19, 2015

示例代码很简单,直接奉上,就不多废话了

<html> 

<head> 

<title>denotoggle</title> 

<style> 

#box { 

    width: 100px; 

    height: 100PX; 

    background-color: #ddd 

} 

.show { 

    visibility: hidden; 

} 

</style> 

<script src="jquery/1.8.2/jquery.min.js"></script> 

<!-- //java script方法 --> 

<script type="text/javascript"> 

    window.onload = function() { 

        function toglemain() { 

            var obj = document.getElementById("box"); 

            if (obj.className == "") { 

                obj.className = "show"; 

            } else { 

                obj.className = ""; 

            } 

        } 

        var clickbutton = document.getElementById("toggle"); 

        clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。 

    } 

</script> 

<!-- //jQuery Toggle方法 --> 

<script type="text/javascript"> 

    $(document).ready(function() { 

        $(".btn1").click(function() { 

            /* $("p#box").toggle(); */ 

            $("#box").toggleClass("show"); 

        }); 

    }); 

</script> 

</head> 

<body> 

    <div id="box"></div> 

    <button id="toggle">javascript toggle</button> 

    <button class="btn1">jQuery Toggle</button> 

</body> 

</html>

小伙伴们是否了解清楚了Javascript与jQuery方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。

Javascript 相关文章推荐
xtree.js 代码
Mar 13 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
jQuery中trigger()方法用法实例
Jan 19 #Javascript
jQuery的one()方法用法实例
Jan 19 #Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 #Javascript
jQuery中bind()方法用法实例
Jan 19 #Javascript
jQuery中on()方法用法实例
Jan 19 #Javascript
jQuery学习笔记之创建DOM元素
Jan 19 #Javascript
jQuery学习笔记之2个小技巧
Jan 19 #Javascript
You might like
php 高效率写法 推荐
2010/02/21 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
前端性能优化建议
2020/09/17 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
Linux下Python获取IP地址的代码
2014/11/30 Python
python运行其他程序的实现方法
2017/07/14 Python
django将数组传递给前台模板的方法
2019/08/06 Python
Python龙贝格法求积分实例
2020/02/29 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
大客户销售经理职责
2013/12/04 职场文书
一帮一活动总结
2014/05/08 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
2016年清明节寄语
2015/12/04 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技