Scribd
Upload
21 views15 pages

L7 Jquery

The document discusses jQuery, a JavaScript library that simplifies HTML document manipulation and event handling. It allows selecting elements, changing HTML content, and making server requests. jQuery handles cross-browser compatibility and reduces the amount of code needed for common tasks.

Uploaded by

Aniket
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
21 views15 pages

L7 Jquery

The document discusses jQuery, a JavaScript library that simplifies HTML document manipulation and event handling. It allows selecting elements, changing HTML content, and making server requests. jQuery handles cross-browser compatibility and reduces the amount of code needed for common tasks.

Uploaded by

Aniket
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/ 15

jQuery

JavaScript
• JavaScript is a scripting language developed by Netscape to allow
basic dynamic operations to be performed in browsers.
• Originally created to be easily learned by web developers to add basic
interactivity to an HTML page
• JavaScript has since evolved into a tool most developers can't live
without.
• However, because of various cross browser and legacy issues,
• many operations programmers would consider simple in environments such
as app development are comparatively complex.
jQuery
• jQuery offers the JavaScript developer more power and flexibility
while simplifying and reducing the amount of code required.

• Started as a way to simplify object selection by John Resig back in


1995,
• jQuery has become necessary tool for any JavaScript developer.
jQuery
• jQuery is designed to offer cross browser support,
• allowing you to write your code once and have it run properly on every
browser.

• jQuery makes it much easier to perform operations


• such as selecting individual or groups of items for manipulation,
• changing elements or the entire DOM in an HTML page,
• or making calls to the server to access remote resources.
Adding jQuery to a Web Page
• Add a referenced to a minified JavaScript file
• Lacks whitespace, good variable names, and other things that computers
don’t need but human like

• Better yet, use a Content Delivery Network (CDN)


Content Delivery Network
• Geographically distributed set of servers
• Hosts common scripts and files
• jQuery
• Bootstrap
• Knockout
• Faster for the user to download
• Less data for your servers to send
• Many organizations host CDNs
• Microsoft
• Google
• MaxCDN
jQuery
• Jquery.min.js is a compressed version of jquery.js
• whitespaces and comments stripped out, shorter variable names, ... in order
to preserve bandwidth.
• In terms of functionality they are absolutely the same.
• It is recommended to use this compressed version in production
environment.
Adding jQuery to Webpage
• <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.3.1.min.js" type="text/javascript"></script>
The Magic of $
• jQuery uses $ as a shortcut to its factory
• Returns an instance of the root jQuery object

• Two main uses of $


• $(content)
• Find an item or a group of items
• Register a ready event handler
• $.method()
• Access global utilities
• Does not act on an object
Registering a Ready Event Handler
• $(document).ready(function(){
• //code here
});

OR

$(function() {
//code here
});
Common CSS selectors using jQuery
• //select all h1 elements
• $(‘h1’)

• //select all elements with a class of class-name


• $(‘.class-name’)

• //select an element with an id ‘demo’


• $(‘#demo’)
Attribute based selectors
• // selects **all** elements with an attribute matching the specified
value
• $('[demo-attribute="demo-value"]')

• // selects all **h1** elements with an attribute matching the


specified value
• $('h1[demo-attribute="demo-value"]')
Locating items by partial attribute values
• find all elements where the value starts with a string, use the ^=
operator.

• $('[class^="col"]')

• find all elements where the value contains a string, use the *=
operator.

• $('[class*="md"]')
Selecting elements based on position
• Parent/Child

• // Selects all a elements that are direct descendants nav element


• $('nav > a')

• <nav>
• <a href="#">(First) This will be selected</a>
• <div>
• <a href="#">(Second) This will **not** be selected</a>
• </div>
• </nav>
Selecting elements based on position
• Descendants
• // Selects all a elements that are descendants nav element
• // The elements can appear anywhere inside of the element listed first
• $('nav a')

• <nav>
• <a href="#">(First) This will be selected</a>
• <div>
• <a href="#">(Second) This will be selected</a>
• </div>
• </nav>

You might also like