Javascript与jQuery方法的隐藏与显示_jquery

示例代码很简单,直接奉上,就不多废话了

复制代码 代码如下:

<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方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。

时间: 2024-11-08 18:41:08

Javascript与jQuery方法的隐藏与显示_jquery的相关文章

jQuery元素的隐藏与显示实例

 这篇文章主要介绍了jQuery元素的隐藏与显示的方法,实例分析了hide与show的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script t

jQuery元素的隐藏与显示实例_jquery

本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>      <script type="text/jscript" src="jquery/jqu

jQuery简单实现隐藏以及显示特效

 这篇文章主要介绍了jQuery简单实现隐藏以及显示特效,需要的朋友可以参考下     简单的 隐藏以及显示的代码如下:   代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

JQuery DIV 动态隐藏和显示的方法_jquery

1. 如果在载入是隐藏: <head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()"> </body> 2. 动态

jQuery简单实现隐藏以及显示特效_jquery

简单的 隐藏以及显示的代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){   $("#hide").click(function

怎样判断jQuery当前元素是隐藏还是显示_jquery

$(this).is(":hidden"); //如果元素是隐藏的话,则返回true is挺好用的,他能够用jQuery选择器作为参数,特别是跟jQuery里面的选择器里面那些以冒号开头的筛选符配合使用,实现各种各样的判断.如: ":checked,:hidden"等等.给个例子: <head> <script src="jquery-1.7.1.js" type="text/javascript">&

关于JavaScript和jQuery的类型判断详解_jquery

对于类型的判断,JavaScript用typeof来进行. 栗子: console.log(typeof null); //object console.log(typeof []); //object console.log(typeof {}); //object console.log(typeof new Date()); //object console.log(typeof new Object); //object console.log(typeof function(){});

jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)_jquery

实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

jQuery 方法大全方便学习参考_jquery

Dom: Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img&quo