jQuery: A Comprehensive Guide to Selectors, DOM Manipulation, and Event Handling, Exercises of Compilers

Download jQuery: A Comprehensive Guide to Selectors, DOM Manipulation, and Event Handling and more Exercises Compilers in PDF only on Docsity!

jQuery

jQuery

 A rich client side Library to work Java script easily

 Implemented as a single .js file

 Selectors

 retrieve, manipulate, add and remove DOM elements

 Functions for event handling

 Easy to use AJAX functions

jQuery() Function

 While loading jQuery library, it adds a global function jQuery() in the scope of

window,

 window.jQuery() or jQuery() or $() or window.$() where $ is alias name of

jQuery

 To access the Document Object using jQuery Selector

 To find whether document is loaded $(document).ready();

 Ready takes a callback function as a parameter that is invoked once

document is ready.

 $(document).ready(function() { //write code here });

jQuery() Function

 Jquery Selectors

 Element Selector  $(‘elementname’)  ID selector  $(‘#id’)  Class selector  $(.class)  Attribute selector  Attribute name - $(‘attributename+’)  Attribute value - $(‘attributename+=“value”’)

jQuery() Selectors : By id

6 Source : https://www.tutorialsteacher.com/jquery/jquery-selectors

jQuery() Selectors : By attribute name

7 Source : https://www.tutorialsteacher.com/jquery/jquery-selectors

Methods- DOM manipulation

append() appends content at the end of element(s) that is mentioned by a selector. before() adds content (new or existing DOM elements) before an element(s) that is mentioned by a selector. after() Inserts content (new or existing DOM elements) after an element(s) that is mentioned by a selector. prepend() Insert content at the beginning of an element(s) that is mentioned a selector. remove() removes element(s) from DOM that is mentioned by selector. text() Get or set text content of the selected element(s)

Methods- HTML attr manipulation

attr()

read or change value of mentioned attribute of the element.

prop()

read or change value of mentioned property of the element..

html()

read or change content of the mentioned element..

text()

read or change text for the mentioned element

val()

read or change value of form field.

Methods- Event Handling

Click Event