jQuery is a JavaScript library that makes it easier to manipulate HTML and handle browser events. It provides tools to select DOM elements, handle events, create animations, and communicate with servers without page reloads. The $ alias is commonly used to access jQuery methods and properties. Code inside $(document).ready() will run when the DOM is ready to be manipulated. Common jQuery selectors include ID, class name, element name, and attributes to select elements on a page.

1. jQuery
write less do more
Jacob Nelson
Software Architect

2. jQuery is just a JavaScript library

3. About jQuery
All the power of jQuery is accessed via JavaScript,
so having a strong grasp of JavaScript is essential
for understanding, structuring, and debugging your
code. While working with jQuery regularly can, over
time, improve your proficiency with JavaScript, it
can be hard to get started writing jQuery without a
working knowledge of JavaScript's built-in
constructs and syntax.

4. About jQuery
Therefore, if you're new to JavaScript, we
recommend checking out the JavaScript basics
tutorial on the Mozilla Developer Network (MDN).
https://learn.jquery.com/about-jquery/

5. History
The jQuery project started as an inkling back in
2005 and has grown into the collection of projects
that we know today.
https://jquery.org/history/

6. jQuery: What’s the use?
The jQuery library makes it easy to manipulate a
page of HTML after it's displayed by the browser. It
also provides tools that help you listen for a user to
interact with your page (events), tools that help
you create animations in your page, and tools that
let you communicate with a server without
reloading the page.

7. $
The jQuery library exposes its methods and
properties via two properties of the window object
called jQuery and $. $ is simply an alias for jQuery
and it's often employed because it's shorter and
faster to write.

8. $( document ).ready()
Before you can safely use jQuery to do anything to
your page, you need to ensure that the page is in a
state where it's ready to be manipulated.

9. $( document ).ready()
jQuery detects this state of readiness for you. Code
included inside $( document ).ready() will only run
once the page Document Object Model (DOM) is
ready for JavaScript code to execute.

10. $( document ).ready() -
Example
$(document).ready(function(){
// Some code to be executed...
alert("Hello World!");
});

11. $( document ).ready() -
shorthand
$(function(){
// Some code to be executed...
alert("Hello World!");
});

12. jQuery Selectors

13. The ability of making the DOM elements selection
simple and easy is one of the most powerful
feature of the jQuery.

14. The jQuery supports almost all the selectors
defined in the latest CSS3 specifications, as well as
it has its own custom selectors. These custom
selectors greatly enhance the capabilities selecting
the HTML elements on a page.

15. Selecting Elements by ID
You can use the ID selector to select a single
element with the unique ID on the page.

16. Selecting Elements by ID
$(document).ready(function(){
// Highlight element with id mark
$("#mark").css("background", "yellow");
});

17. Selecting Elements by Class
Name
The class selector can be used to select the
elements with a specific class.

18. Selecting Elements by Class
Name
$(document).ready(function(){
// Highlight element with class mark
$(“.mark").css("background", "yellow");
});

19. Selecting Elements by Name
The element selector can be used to select
elements based on the element name.

20. Selecting Elements by Class
Name
$(document).ready(function(){
// Highlight paragraph elements
$(“p").css("background", "yellow");
});

21. Selecting Elements by
Attribute
You can use the attribute selector to select an
element by one of its HTML attributes, such as a
link's target attribute or an input's type attribute,
etc.

22. Selecting Elements by
Attribute
$(document).ready(function(){
// Highlight text element
$('input[type="text"]').css("background",
"yellow");
});

23. Selecting Elements by
Compound CSS Selector
You can also combine the CSS selectors to make
your selection even more precise.

24. Selecting Elements by
Compound CSS Selector
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
});

25. jQuery Methods

26. DOM Manipulation Methods
Method Description
append() Inserts content to the end of element(s) which is specified by a selector.
before() Inserts content (new or existing DOM elements) before an element(s) which is specified by a selector.
after() Inserts content (new or existing DOM elements) after an element(s) which is specified by a selector.
prepend() Insert content at the beginning of an element(s) specified by a selector.
remove() Removes element(s) from DOM which is specified by selector.
replaceAll() Replace target element(s) with specified element.
wrap() Wrap an HTML structure around each element which is specified by selector.

27. after()
jQuery after() method inserts content after target
element(s) which is specified by a selector.

28. after() - Syntax
$('selector expression').after('content');

29. after() - Example
$('#desc').after('<span style="background-
color:yellow"> Short Note </span>');

30. after() - Example
The jQuery after() also supports passing in multiple
arguments as input.
var newHeading = "<h2>Important Note:</h2>";
var newParagraph = $("p");
newParagraph.html(“<em>Lorem Ipsum is
dummy text…</em>");
$("p").after(newHeading, newParagraph);

31. before()
jQuery before() method inserts content before
target element(s) which is specified by a selector.

32. before() - Syntax
$('selector expression').before('content');

33. before() - Example
$('#desc').before('<h3> Title </h3>');

34. before() - Example
The jQuery before() also supports passing in
multiple arguments as input.
var newHeading = "<h2>Important Note:</h2>";
var newParagraph = $("p");
newParagraph.html(“<em>Lorem Ipsum is
dummy text…</em>");
$("p").before(newHeading, newParagraph);

35. Method chaining
• http://www.jquery-
tutorial.net/introduction/method-chaining/

36. References
• https://www.tutorialrepublic.com/jquery-
reference/jquery-selectors.php
• http://www.tutorialsteacher.com/jquery/
• http://jqfundamentals.com/chapter/jquery-basics