JQuery Notes

浏览数：21 / 时间：2015年06月09日 
<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});
});

JQuery Notes,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： des class style java html src Go com des class style java html src Go com

相关文章

随机文章

您可能还喜欢

您可能还喜欢