Chapter intro jQuery

1. John Resig the father of jQuery.

2. Alert(); setTimeOut(); setInterval(); clearTimeOut(); clearInterval(); focus();
3. innerHeight(); innerWidth();
4. history.go(-3); will take the user back to three buttons.
5. location.assign('www.apress.com'); location.reload(true); location.replace("www.apress.com");
this deletes the history of the replaced URL.
6. var currentUrl = location.href; // Get the current url location.href = "http://www.apress.com";
//Set the current url to apress home page
7. navigator.appName gives you the browser name/language.platform->the machine OS/product/
8. screen.availHeight.
9. window.alert(window.innerHeight); gives the resized or whatever actual height/width.
10. alert(document.documentElement.clientHeight); for IE
11. getElementById/ClassName/TagName/Name
12. apressAuthors = "Mukund and Ankur";
13. for (var variableNames in window) {
if(variableNames === 'apressAuthors') {
alert(variableNames) // Would output on Chrome but not on IE8
}
}
14. Versions before IE8 doesn’t understand opacity, use filter.
15. $().hide();
16. $(document).ready(function(){
// jQuery code go here...
});
17. When you run too many document.ready() method, it hits the memory consumption.
18. $(function(){
// jQuery methods go here...
});
19. $('.error').animate({'color':'red'}, 500, function(){alert('Animation Completed!')});
20. $(".button").click(function(){
$(".error").slideToggle(400, "swing", function(){
alert("Animation Completed!");
});
});
21. $ is just an alias of jQuery.
22. ID based selection is the best as even IE6 recognizes those.
23. $("#apress div.mukund"); is not as good as $("#apress").find("div.mukund");
24. the implementation of the jQuery selections is known as the
25. Sizzle engine. It is the core component of the jQuery API and is responsible for parsing the DOM
to identify the target element.
26. Don’t use overly long selection process, use find(), avoid universal, don’t repeat selectors.
27. (function($){
...// useful code here
})(jQuery) This format makes the function self-executing.
28. $('li').each(function(index, element){
$(element).css('color', 'red');
if($(this).is('#stop')) {
console.log('Stopped at li number ' + index);
return false;
}
});
29. img[alt*="test"] anywhere/img[alt~="test"] starts or ends with/ img[alt="test"] exact match
30. The > symbol selects the immediate descendant(all).
31. The + symbol selects everything at his level but must be adjacent.
32. The ~ symbol selects everything at his level but need not be adjacent, sathe lagano.
33. $('form > *.test') universal selector.
34. Type selector: $(‘span’)
35. $('input[type="text"]') attribute selector;
36. Class and ID selector,
37. Pseudo class selector-> $('span:first-child')
38. $('div.apress:eq(0)') the childs are indexed from 0 and you can select the number of child you
want to select.
39. $('p:gt(0)').css('background', 'powderblue'); greater than this number of index->
40. $('p:lt(1)') lower than.
41. $('p:has(span)') the paragraph that as span inside.
42. Try not to use the jquery specific selectors as they are slower and does not have the native
support.
43. Tree traversal
44. $('p').parent('.apress') parent parameter is optional, immediate parent.
45. parents() selects all parents.
to stop and select some specific element, $('input').parents("form").css('border', '1px solid red');
46. parentsUntil(‘body’ )..will searc upto the body.
47. $('span').closest('div').css('border', '1px solid red');
48. $('div.apress').children().css('border', '1px solid red'); all children and their children
49. $('body').find('p').css('border', '1px solid red')
50. $('ul').prev().css('border', '1px solid red'); immediate previous sibling.
51. $('div').next().css('border', '1px solid red')
52. $('ul').siblings().css('border', '1px solid red') all above and below.
53. $('div').filter('.apress').css({'display': 'block', 'border':'1px solid #aaa'});
54. $('div').find('li').filter(function(index){
return index == 1;
}).css({'font-family': 'serif', 'color': 'powderblue'});
55. First()/last()/has()/
56. if($('span').parent().is('p')){}
57. not();
58. var isFirstChild = $('ul').is(function(){
if($('ul').children().length == 4)
return true;
else
return false;
});
if(isFirstChild){
alert("The UL is a large family with 4 children!");
} else {
alert("The UL can have more children!");
}
59. $('jQuery selector').css({"css property name":"css property value"});
60. $( "div" ).on( "mouseover", function() {
$( this ).css( "color", function(index){
return index == 0 ? 'red' : 'green';
} );
});
Parameter / Description
Property / Specifies a CSS property, such as color, font size, etc.
Value / Specifies the value of a CSS property, such as "red", "1.2 em", etc.
function(index,value) / Specifies the function that returns the new CSS property
61. .css({property1:value1,property2:value2,property3:value3,...});
62. .attr(attributeName)
63. Text();
64. Html();
65. .append(content[,content])
66. .append(function(index,content))
67. $('.apress').append("<div class="author"> It is a container</div>"); selector comes first.
68. $("<div class=""author> It is a new container</div>").appendTo('.apress'); content comes first.
69. Before/after.
70. You should avoid using .clone() whenever possible, because in some cases, it has the side effect
of producing a duplicate id attribute if the source element that you cloned contained some id
attribute. However, if the use is unavoidable, you should use a class attribute as an identifier
instead of the id attribute. A class can be duplicated, but an id attribute cannot.
71. Width()->without padding margin, innerWidth->with padding, outerWidth->width border,
outerWidth(true)->width margin;
72. uninitialized, loading, loaded, interactive, and complete. Readystate values.
73. removeEventListener()
74. keypress event should be taken from the body, as body will listen the keyboard press.
75. Window resize/load/
76. $('input').on('change', function(){
alert('Some change has occurred');
}); means you have to type and come out of the input to trigger.
77. event.which
78. • event.target
79. • event.relatedTarget
80. • event.currentTarget
81. • event.stopPropagation
82. • event.stopImmediatePropagation
83. • event.pageX
84. • event.pageY
85. As a quick explanation, event bubbling is a phenomenon by which an event takes place and then
bubbles or travels up the DOM tree to the parent element, if the event is not captured at the
originating level.
86. event.target.nodeName will give where the click was done.
87. currentTarget is where the event happened, what triggered while related target is where was
the mouse just before…event.type is what was the type…click/mouseover etc.
88. list.click()
89. list.off();
90. stopPropagation()
var apress = $('div.apress');
apress.on('click', function(){
alert('A div was clicked');
});
apress.find('ul > li:nth-child(2)').on('click', function(event){
alert('The second list element was clicked');
if(!event)
event = window.event;
event.stopPropagation();
});
91. Callback functions are just a methodology to call some function once some other action has
been taken place.
function clicking(functionObject){
var span = document.createElement('span');
span.innerHTML = 'The events are: document ready, window load and so on.';
list.append(span);
if(functionObject){
functionObject();
}
}
var list = $('ul > li:nth-child(4)');
 list.on('click', function(){
clicking(function(){
alert('This would be done at the end.')
})
});
First function is the main function and it has a parameter and it says if there is the parameter
present, execute it. The main function is then called and as a parameter a whole function is
called, which is the callback function and it gets executed once the father function is executed.
92. On dynamic event loaded function, use on(click);
93. $('.many-event').on( 'click mouseleave', function() {
alert( 'mouse hovered over or left a link');
});
94. CHAINING EVENTS:
$('.chaining-event').on({
mouseenter: function () {
alert('hovered over a link');
},
mouseleave: function () {
alert('mouse left a link');
},
click: function () {
alert('clicked on a link');
}
});
95. $('#anySelector').stop(clearQueue,jumpToEnd); to stop multiple events to be triggered by the
user.
96. $(document).ready(function(){
$("#apress").click(function () {
$("#container").stop().animate({
height: '+=50'
}, 1000);
});});
We are stopping the animation clicker and then executing the first click.
97. event.stopPropagation();event.cancelBubble =true; second oen for IE9-
98. One line solution: event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
$("#apress").click(function() {
alert("Apress!!");// mouse click on div element
});
$("#author").click(function(event) {
alert("Authors!!");
event.preventDefault();
event.stopPropagation();
});
If there is a div and an anchor inside, the preventdefault will stop the link to behave default, but the div will propagate,
so use both.
99. $(selectorElement).queue(queueName);
100. If you are using any custom queue, you must de-queue the function, as it will not start
automatically.
101.