JQuery - the basics
What?
Why?
the classic way
var tables = document.getElementsByTagName("table");
for (var t = 0; t<tables.length; t++) {
var rows = tables[t].getElementsByTagName("tr");
for (var i = 0; i<rows.length; i += 2) {
if (!/(^|\s)even(\s|$)/.test(rows[i].className)) {
rows[i].className += " even";
}
}
}
The simple way
jQuery("table tr:nth-child(even)").addClass("even");
The simple way
jQuery("table tr:nth-child(even)").addClass("even");
JQuery Function
The simple way
jQuery("table tr:nth-child(even)").addClass("even");
JQuery Function
JQuery Selector (CSS Expression)
The simple way
jQuery("table tr:nth-child(even)").addClass("even");
JQuery Function
JQuery Selector (CSS Expression)
JQuery Method
Find something. Do Something.
Create something. Do Something.
Find something. Do Something.
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
</body>
</html>
Find something. Do Something.
<html>
<body>
<ul>
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery("ul");
</script>
</body>
</html>
Find something. Do Something.
<html>
<body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery("ul").attr("id", "nav");
</script>
</body>
</html>
Find something. Do Something.
<html>
<body>
<ul id="nav">
<li><a>home</a>;</li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery("#nav a");
</script>
</body>
</html>
Find something. Do Something.
<html>
<body>
<ul id="nav">
<li><a href="/home">home</a></li>
<li><a href="/about">about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery("#nav a").each(function(){
jQuery(this).attr("href", "/" + jQuery(this).text());
});
</script>
</body>
</html>
CREATE SOMETHING. DO SOMETHING.
Create something. Do Something.
<html>
<body>
<ul id="nav">
</ul>
</body>
</html>
Create something. Do Something.
<html>
<body>
<ul id="nav">
</ul>
<script src="jquery.js"></script>
<script>
jQuery("<li>home</li>");
jQuery("<li>about</li>");
</script>
</body>
</html>
Create something. Do Something.
<html>
<body>
<ul id="nav">
</ul>
<script src="jquery.js"></script>
<script>
jQuery("<li>home</li>").wrapInner("a");
jQuery("<li>about</li>").wrapInner("a");
</script>
</body>
</html>
Create something. Do Something.
<html>
<body>
<ul id="nav">
<li><a>home</a></li>
<li><a>about</a></li>
</ul>
<script src="jquery.js"></script>
<script>
jQuery("<li>home</li>").wrapInner("a").appendTo("#nav");
jQuery("<li>about</li>").wrapInner("a").appendTo("#nav");
</script>
</body>
</html>
Are we there yet?
$(document).ready()
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$( "p" ).text( "The DOM is now loaded and can be manipulated." );
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>$(document).ready(function() {...} ) ==
$(function() {...})
Also known as $
$.noConflict()
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>$.noConflict()
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
jq2 = jQuery.noConflict();
jq2(function( $ ) {
// Code using $ as usual goes here;
// the actual jQuery object is jq2
});
// Code that uses other library's $ can follow here.
</script>Ajax calls
shorthand methods
var req = $.get( "http://example.com/api/users", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});Control over comfort
$.ajax({
url: 'http://example.com/api/users',
data: {
format: 'json'
},
error: function() {
//handle the error here
},
dataType: 'jsonp',
success: function(data) {
//data is the response. Handle it accordingly here
},
type: 'GET'
});Recap
find something. do something
create something. do something
fast. reliable. easy to understand
cross-browser / cross-platform
great documentation
you can start jquerying in 30 minutes
Useful Resources
J
By alexgrigi
J
- 594
