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 相关文章推荐
jQuery get和post 方法传值注意事项
Nov 03 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
原生js实现点击按钮复制内容到剪切板
Nov 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
第九节--绑定
2006/11/16 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php的sso单点登录实现方法
2015/01/08 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
jQuery弹出div层过2秒自动消失
2016/11/29 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python中函数传参详解
2016/07/03 Python
python编程线性回归代码示例
2017/12/07 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
使用python turtle画高达
2020/01/19 Python
python实现简单井字棋小游戏
2020/03/05 Python
python实现猜单词游戏
2020/05/22 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
干部行政关系介绍信
2014/01/17 职场文书
学生安全责任书
2014/04/15 职场文书
求职自我评价范文100字
2014/09/23 职场文书
云冈石窟导游词
2015/02/04 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
Python学习之时间包使用教程详解
2022/03/21 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python