JQuery Notes

最新推荐文章于 2024-09-12 14:28:05 发布

weixin_34101229

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量113

点赞数

文章标签： javascript ui ViewUI

<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});
});

weixin_34101229

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery Notes

&lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;$(document).ready(something); says: "when the HTML document is ready, do something!"$(document).ready(function() { va...
复制链接

扫一扫