Scribd
Upload
8 views22 pages

ch.2.pptx

Unit 2 covers the fundamentals of jQuery, a lightweight JavaScript library designed to simplify web development by reducing the amount of code needed for common tasks. It includes features such as DOM manipulation, event handling, and AJAX support, and is widely used by major companies like Google and Microsoft. The document also discusses jQuery's structure, methods for traversing the DOM, and utilities that enhance programming tasks.

Uploaded by

pandyaj036
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views22 pages

ch.2.pptx

Unit 2 covers the fundamentals of jQuery, a lightweight JavaScript library designed to simplify web development by reducing the amount of code needed for common tasks. It includes features such as DOM manipulation, event handling, and AJAX support, and is widely used by major companies like Google and Microsoft. The document also discusses jQuery's structure, methods for traversing the DOM, and utilities that enhance programming tasks.

Uploaded by

pandyaj036
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Unit 2: Fundamentals of

JQuery
Teaching by Prof. Shivani Kania
2.1 Introduction to JQuery, features
• The purpose of jQuery is to make it much easier to use JavaScript on your
website.

• What You Should Already Know


• Before you start studying jQuery, you should have a basic knowledge of:

• HTML
• CSS
• JavaScript
• jQuery is a lightweight, "write less, do more", JavaScript library.

• The purpose of jQuery is to make it much easier to use JavaScript on your website.

• jQuery takes a lot of common tasks that require many lines of JavaScript code to
accomplish, and wraps them into methods that you can call with a single line of code.

• jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and
DOM manipulation.

• The jQuery library contains the following features:

• HTML/DOM manipulation
• CSS manipulation
• HTML event methods
• Effects and animations
• AJAX
• Utilities
• Why jQuery?

There are lots of other JavaScript libraries out there, but jQuery is
probably the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:

• Google
• Microsoft
• IBM
• Netflix
• Features
Features provided by jQuery include:

• A light footprint around 30 kB.


• Supports Chrome, Firefox, Safari, Internet Explorer and Edge.
• Event handling
• Ajax support
• Plug-in support
• DOM element manipulation based on CSS selectors.
• JSON parsing
• Feature detection
• Animation effects
2.2 JQuery Structure
jQuery attribute
• Set the width attribute of an image:

• $("button").click(function(){$("img").attr("width","500");});
• Code in VScode
• Illustration explained:

• The <div> element is the parent of <ul>, and an ancestor of everything


inside of it
• The <ul> element is the parent of both <li> elements, and a child of <div>
• The left <li> element is the parent of <span>, child of <ul> and a
descendant of <div>
• The <span> element is a child of the left <li> and a descendant of <ul> and
<div>
• The two <li> elements are siblings (they share the same parent)
• The right <li> element is the parent of <b>, child of <ul> and a descendant
of <div>
• The <b> element is a child of the right <li> and a descendant of <ul> and
<div>
• Traversing the DOM
• jQuery provides a variety of methods that allow us to traverse the
DOM.

• The largest category of traversal methods are tree-traversal.

• The next chapters will show us how to travel up, down and sideways
in the DOM tree.
DOM Methods
• Document Object Model (DOM) - is a W3C (World Wide Web
Consortium) standard that allows us to create, change, or remove
elements from the HTML or XML documents.
Events
• All the different visitors' actions that a web page can respond to are called
events.

• An event represents the precise moment when something happens.

• Examples:

• moving a mouse over an element


• selecting a radio button
• clicking on an element
• The term "fires/fired" is often used with events. Example: "The keypress
event is fired, the moment you press a key".
• Commonly Used jQuery Event Methods
• $(document).ready()

• The $(document).ready() method allows us to execute a function when the


document is fully loaded. This event is already explained in the jQuery Syntax
chapter.

• click()

• The click() method attaches an event handler function to an HTML element.

• The function is executed when the user clicks on the HTML element.

• The following example says: When a click event fires on a <p> element; hide the
current <p> element
• code in VS code
• jQuery – Utilities

• Jquery provides serveral utilities in the formate of $(name space).


These methods are helpful to complete the programming tasks.a few
of the utility methods are as show below.
You have to do assignment in practical
• $.data()
• $.fn.extend()
• $.isWindow()
• $.now()
• $.isXMLDoc()
• $.globalEval()
• $.dequeue()
jQuery - css() Method
• The css() method sets or returns one or more style properties for the
selected elements.
• Return a CSS Property
• To return the value of a specified CSS property, use the following
syntax:

• css("propertyname");
• Code in VS code
• jQuerywidgets
• jQuery widgets are specialized, platform-independent, cross-browser
compatible, stateful plugins with a full life cycle and certain methods
and events, built on an extensible foundation known as the jQuery UI
Widget Factory.

• The jQuery UI Widget Factory facilitates state management. It


provides conventions for tasks such as exposing plugin methods, and
changing options after instantiation, thus, allowing us to make some
here-and-there changes in the existing functionality of the jQuery
Widgets.

• And when combined with animated visual effects, CSS, HTML, and
jQuery themes build a comprehensive jQuery UI, bringing JavaScript
and HTML UI creation to a whole new level and propelling it to the
top of the JavaScript UI framework charts.

You might also like