zoukankan      html  css  js  c++  java
  • JQuery Notes

    <script type="text/javascript" src="script.js"></script>

    $(document).ready(something); says: "when the HTML document is ready, do something!"

    $(document).ready(function() {
        var $target = $('li:nth-child(4)');
        $target.fadeOut('fast');
    });

    As you probably guessed, jQuery includes a .toggleClass() function that does exactly this. If the element it's called on has the class it receives as an input, .toggleClass() removes that class; if the target element doesn't have that class, .toggleClass() adds it.

    $(document).ready(function(){
        $('#text').click(function(){
            $('#text').toggleClass('highlighted'); 
        }); 
    });

    .html() can be used to set the contents of the first element match it finds. For instance,

    $('div').html();

    will get the HTML contents of the first div it finds, and

    $('div').html("I love jQuery!");

    will set the contents of the first div it finds to "I love jQuery!"

    .val() is used to get the value of form elements. For example,

    $('input:checkbox:checked').val();

    would get the value of the first checked checkbox that jQuery finds.

    The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

    GChat List
    index.html

    <!DOCTYPE html>
    <html>
        <head>
         <title>To Do</title>
            <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
            <script type="text/javascript" src="script.js"></script>
     </head>
     <body>
      <h2>To Do</h2>
      <form name="checkListForm">
       <input type="text" name="checkListItem"/>
      </form>
      <div id="button">Add!</div>
      <br/>
      <div class="list"></div>
     </body>
    </html>

    stylesheet.css

    h2 {
        font-family:arial;
    }
    form {
        display: inline-block;
    }
    #button{
        display: inline-block;
        height:20px;
        width:70px;
        background-color:#cc0000;
        font-family:arial;
        font-weight:bold;
        color:#ffffff;
        border-radius: 5px;
        text-align:center;
        margin-top:2px;
    }
    .list {
     font-family:garamond;
     color:#cc0000;
    }

    script.js

    $(document).ready(function(){
        $('#button').click(function(){
            var toAdd = $('input[name=checkListItem]').val(); 
            $('.list').append('<div class="item">' + toAdd + '</div>');
        });
        $(document).on('click', '.item', function(){
            $(this).remove();   
        });
    });

    Move the sprite

    index.html

    <!DOCTYPE html>
    <html>
        <head>
         <title>Super Mario!</title>
            <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
      <script type='text/javascript' src='script.js'></script>
     </head>
     <body>
            <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
     </body>
    </html>

    stylesheet.css

    img {
        position: relative;
        left: 0;
        top: 0;
    }

    script.js

    $(document).ready(function() {
        $(document).keydown(function(key) {
            switch(parseInt(key.which,10)) {
       // Left arrow key pressed
       case 37:
        $('img').animate({left: "-=10px"}, 'fast');
        break;
       // Up Arrow Pressed
       case 38:
        $('img').animate({top: "-=10px"}, 'fast');
        break;
       // Right Arrow Pressed
       case 39:
        $('img').animate({left: "+=10px"}, 'fast');
        break;
       // Down Array Pressed
       case 40:
        $('img').animate({top: "+=10px"}, 'fast');
        break;
      }
     });
    });

    .effect() ->argument 'explode' 'bounce' 'slide'
    http://jqueryui.com/

    Special Effects
    index.html

    <!DOCTYPE html>
    <html>
        <head>
         <title>Behold!</title>
            <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
            <script type='text/javascript' src='script.js'></script>
            <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
     </head>
     <body>
            <div id="menu">
                <h3>jQuery</h3>
                <div>
                    <p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
                </div>
                <h3>jQuery UI</h3>
                <div>
                    <p>jQuery UI includes even more jQuery goodness!</p>
                </div>
                <h3>JavaScript</h3>
                <div>
                    <p>JavaScript is a programming language used in web browsers, and it's what powers jQuery and jQuery UI. You can learn about JavaScript in the <a href="http://www.codecademy.com/tracks/javascript" target="blank" style="text-decoration:none; color:#F39814">JavaScript track</a> here on Codecademy.</p>
                </div>
            </div>
     </body>
    </html>

    script.js

    $(document).ready(function() {
        $("#menu").accordion({collapsible: true, active: false});
    });
  • 相关阅读:
    C#异步编程
    ASP.NET MVC5中View-Controller间数据的传递
    Dapper简明教程
    .NET中使用NLog记录日志
    微信开发被动回复消息:该公众号暂时无法提供服务,请稍后再试
    使用AutoMapper进行对象间映射
    Cookie中的几个概念
    使用CodeFirst创建并更新数据库
    restful接口设计规范总结
    JAVA中通过Hibernate-Validation进行参数验证
  • 原文地址:https://www.cnblogs.com/null00/p/3923726.html
Copyright © 2011-2022 走看看