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 相关文章推荐
深入理解JSON数据源格式
Jan 10 Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
Vue.js仿Select下拉框效果
Feb 18 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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版(1)
2006/10/09 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php实用代码片段整理
2016/11/12 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
详解JS模块导入导出
2017/12/20 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
Python中遍历列表的方法总结
2019/06/27 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
大学生就业意向书范文
2014/04/01 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
学校运动会感想
2015/08/10 职场文书
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL