jQuery Leaning Notes
2013-10-10
All learning content reference to w3schools jQuary Tutorial.
jQuery is a JavaScript Library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery "reduce" JavaScript coding works, 1 line of jQuery code = many lines of JavaScript code (wraps them into methods that you can call with a single line of code.)
Basic jQuery syntax: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
Ready Event:
$(document).ready(function(){
// jQuery methods go here...
});
Same as:
$(function(){
// jQuery methods go here...
});
Mouse hover(): The following code combination of mouseenter() and mouseleave() events
$("#p1").hover(function(){ //mouse enter
alert("You entered p1!");
},
function(){ //mouse leave
alert("Bye! You now leave p1!");
});
About conflict using $ with other JavaScript framework:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});