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 12 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
js选择器全面解析
Jun 27 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
PHP Array交叉表实现代码
2010/08/05 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
php计算一个文件大小的方法
2015/03/30 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
nodeJS微信分享
2017/12/20 NodeJs
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Python使用filetype精确判断文件类型
2017/07/02 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python打造爬虫代理池过程解析
2019/08/15 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
会计电算化专业应届大学生求职信
2013/10/22 职场文书
光盘行动倡议书
2014/02/02 职场文书
青春奉献演讲稿
2014/05/08 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
大学生暑期实践报告
2015/07/13 职场文书
安全温馨提示语大全
2015/07/14 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
vue 自定义组件添加原生事件
2022/04/21 Vue.js