zoukankan      html  css  js  c++  java
  • jQuery:1.[12],jQuery基础学习(一)

    ylbtech-jQuery:jQuery学习

    jQuery语法实例

    $(this).hide()
    jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
    $("p").hide()
    jQuery 的 hide() 函数,隐藏所有 <p> 元素。
    $(".test").hide()
    jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
    $("#test").hide()
    jQuery 的 hide() 函数,隐藏 id="test" 的元素。
     

    Hiding - Sliding- Fading

    jQuery fadeOut()
    简单的 jQuery fadeout() 函数。
    jQuery hide()
    简单的 jQuery hide() 函数。
    Hide explanations
    如何隐藏部分文本。
    Slide panel
    简单的 Slide Panel 效果。
    jQuery animate()
    简单的 jQuery animate() 函数。
     
    jQuery:1.1.1,$(this).hide()返回顶部
    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $(this).hide();
    });
    });
    </script>
    </head>
    
    <body>
    <button type="button">Click me</button>
    <hr>
    test
    <button type="button">Click me2</button>
    <button type="button">Click me3</button>
    <button type="button">Click me4</button>
    </body>
    
    </html>
    jQuery:1.1.2,$("p").hide()返回顶部
    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
    $("p").hide();
    });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
    </body>
    </html> 
    jQuery:1.1.3,$(".test").hide() 返回顶部
    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
      $("button").click(function()
      {
      $(".test").hide();
      });
    });
    </script>
    </head>
    <body>
    
    <h2 class="test">This is a heading</h2>
    <p class="test">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
    
    </body>
    </html>
    jQuery:1.1.4,$("#test").hide() 返回顶部
    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p id="test">This is another paragraph.</p>
    <button type="button">Click me</button>
    </body>
    
    </html>
    jQuery:1.2.1,fadeOut()返回顶部
    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("#test").click(function(){
      $(this).fadeOut();
      });
    });
    </script>
    </head>
    
    <body>
    <div id="test" style="background:yellow;200px">CLICK ME AWAY!</div>
    <p>如果您点击上面的框,它会淡出。</p>
    </body>
    
    </html>
    jQuery:1.2.2.hide()返回顶部
    <html>
    
    <head>
    <script type="text/javascript" src="Jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("p").click(function(){
      $(this).hide();
      });
    });
    </script>
    </head>
    
    <body>
    <p>If you click on me, I will disappear.</p>
    </body>
    
    </html> 
    jQuery:1.2.3,explanations返回顶部
    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
    });
    });
    </script>
    <style type="text/css"> 
    div.ex
    {
    background-color:#e5eecc;
    padding:7px;
    border:solid 1px #c3c3c3;
    }
    </style>
    </head>
     
    <body>
    
    <h3>Island Trading</h3>
    <div class="ex">
    <button class="hide" type="button">Hide me</button>
    <p>Contact: Helen Bennett<br /> 
    Garden House Crowther Way<br />
    London</p>
    </div>
    
    <h3>Paris Trading</h3>
    <div class="ex">
    <button class="hide" type="button">Hide me</button>
    <p>Contact: Marie Bertrand<br /> 
    265, Boulevard Charonne<br />
    Paris</p>
    </div>
    
    </body>
    </html>
    jQuery:1.2.4,panel返回顶部
    <html>
    <head>
    
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideToggle("slow");
      });
    });
    </script>
     
    <style type="text/css"> 
    div.panel,p.flip
    {
    margin:0px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    div.panel
    {
    height:120px;
    display:none;
    }
    </style>
    </head>
     
    <body>
     
    <div class="panel">
    <p>W3School - 领先的 Web 技术教程站点</p>
    <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
    </div>
     
    <p class="flip">请点击这里</p>
     
    </body>
    </html>
    jQuery:1.2.5,animation返回顶部
    <html>
    <head>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function(){
      $("#start").click(function(){
      $("#box").animate({height:300},"slow");
      $("#box").animate({300},"slow");
      $("#box").animate({height:100},"slow");
      $("#box").animate({100},"slow");
      });
    });
    </script> 
    </head>
     
    <body>
    
    <p><a href="#" id="start">Start Animation</a></p>
    
    <div id="box"
    style="background:#98bf21;height:100px;100px;position:relative">
    </div>
     
    </body>
    </html>
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    internet连接共享被启用时 出现了一个错误 (null)
    mybatis01-1测试
    配置没有问题,虚拟机Ubuntu系统ifconfig没有网卡信息
    Ubuntu启动Apache
    VM虚拟机Linux系统eth0下面没有inet和inet6
    jQuery通过id和name获取值的区别
    1.4.3 ID遍历爬虫(每天一更)
    mysql中的SQL语句执行的顺序
    Mecanim动画系统丶
    html中常见的行内元素和块级元素,还有常见的行内块元素
  • 原文地址:https://www.cnblogs.com/ylbtech/p/2859006.html
Copyright © 2011-2022 走看看