Scribd
Upload
21 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

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
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