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 子窗体父窗体相互传值方法
May 31 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
ES6 十大特性简介
2020/12/09 Javascript
python中import reload __import__的区别详解
2017/10/16 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Django中间件基础用法详解
2019/07/18 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
入党自我评价优缺点
2014/01/25 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
Redis实现分布式锁的五种方法详解
2022/06/14 Redis