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 相关文章推荐
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
webpack file-loader和url-loader的区别
Jan 15 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
原生JavaScript实现购物车
Jan 10 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
php下使用以下代码连接并测试
2008/04/09 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
php实现文章置顶功能的方法
2016/10/20 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
详解python持久化文件读写
2019/04/06 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
opencv+python实现均值滤波
2020/02/19 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
2015年项目工作总结
2015/04/29 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android