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 数组的方法集合
Jun 05 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 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
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
2020/11/09 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
python函数的万能参数传参详解
2019/07/26 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
5款实用的python 工具推荐
2020/10/13 Python
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
社会实践先进工作者事迹材料
2014/05/06 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
承诺书怎么写 ?
2019/04/16 职场文书