JQuery: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 6: | Line 6: | ||
== Example == | == Example == | ||
==== HTML | ==== HTML ==== | ||
<pre> | <pre> | ||
<html><head><title>Button Magic</title> | <html><head><title>Button Magic</title> | ||
| Line 17: | Line 17: | ||
</pre> | </pre> | ||
==== | ==== stylesheet.css ==== | ||
<pre> | <pre> | ||
div { | div { | ||
| Line 31: | Line 31: | ||
</pre> | </pre> | ||
==== | ==== script.js ==== | ||
<pre> | <pre> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
| Line 39: | Line 39: | ||
$('div').mouseleave(function(){ | $('div').mouseleave(function(){ | ||
$('div').fadeTo('fast', 0.5); | $('div').fadeTo('fast', 0.5); | ||
}); | |||
}); | |||
</pre> | |||
== To Do List Example == | |||
==== HTML ==== | |||
<pre> | |||
<!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> | |||
</pre> | |||
==== script.js ==== | |||
<pre> | |||
$(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() | |||
}); | }); | ||
}); | }); | ||
</pre> | </pre> | ||
Revision as of 21:21, 25 June 2014
Example
HTML
<html><head><title>Button Magic</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head><body>
<div><br/><strong>Click Me!</strong></div>
</body>
</html>
stylesheet.css
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
script.js
$(document).ready(function(){
$('div').mouseenter(function(){
$('div').fadeTo('fast', 1.0);
});
$('div').mouseleave(function(){
$('div').fadeTo('fast', 0.5);
});
});
To Do List Example
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>
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()
});
});