首页 > 代码库 > JQuery Notes
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});});