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 setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP单链表的实现代码
2016/07/05 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python实现获取操作系统版本信息方法
2015/04/08 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
浅析使用Python搭建http服务器
2019/10/27 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
财务信息服务专业自荐书范文
2014/02/08 职场文书
青年文明号创建承诺
2014/03/31 职场文书
论文评审意见
2015/06/05 职场文书