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 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
用JavaScript页面不刷新时全选择,全删除(GridView)
Apr 14 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
详解Vue-Router源码分析路由实现原理
May 15 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
js href的用法
2010/05/13 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
三年级数学教学反思
2014/01/31 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python