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 相关文章推荐
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
AngularJS 入门教程之事件处理器详解
Aug 19 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
PHP4之真OO
2006/10/09 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
Seajs的学习笔记
2014/03/04 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python 操作MySQL详解及实例
2017/04/30 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
django-csrf使用和禁用方式
2020/03/13 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
python 用struct模块解决黏包问题
2020/11/07 Python
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
公司离职证明标准格式
2014/11/18 职场文书
灵山大佛导游词
2015/02/04 职场文书
团组织推荐意见
2015/06/05 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL