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 Sort 表格排序
Oct 31 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
js选项卡的实现方法
Feb 09 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
JS打印组合功能
Aug 04 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue引入Excel表格插件的方法
Apr 28 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
使用图灵api创建微信聊天机器人
2015/07/23 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
详解JavaScript函数callee、call、apply的区别
2019/03/08 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
教师开学感言
2014/02/14 职场文书
教师党员承诺书2015
2015/01/21 职场文书
消防安全月活动总结
2015/05/08 职场文书
销售人员管理制度
2015/08/06 职场文书
总结Python使用过程中的bug
2021/06/18 Python
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android