Scribd
Upload
43 views11 pages

Advanced JavaScript and Jquery-1

This document provides an overview of advanced JavaScript and jQuery topics including: 1) JavaScript pseudo-classes, prototypes, and object-oriented design which allow defining classes through non-intuitive syntax but provide benefits like code reuse and easier maintenance. 2) JavaScript frameworks like jQuery which is a lightweight library for HTML element selection, manipulation, events, effects and AJAX. 3) How jQuery uses a basic $(selector).action() syntax to query and perform actions on HTML elements using different selector types.

Uploaded by

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

Advanced JavaScript and Jquery-1

This document provides an overview of advanced JavaScript and jQuery topics including: 1) JavaScript pseudo-classes, prototypes, and object-oriented design which allow defining classes through non-intuitive syntax but provide benefits like code reuse and easier maintenance. 2) JavaScript frameworks like jQuery which is a lightweight library for HTML element selection, manipulation, events, effects and AJAX. 3) How jQuery uses a basic $(selector).action() syntax to query and perform actions on HTML elements using different selector types.

Uploaded by

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

Advanced JavaScript and

jQuery
Topics
• JavaScript pseudo-classes, prototypes, and object-oriented design

• JavaScript frameworks such as jQuery

• How to post files asynchronously with JavaScript

• How jQuery can be used to animate page element


JavaScript Pseudo-Classes

• Although JavaScript has no formal class mechanism, it does support objects


(such as the DOM).

• You define pseudo-classes through a variety of interesting and nonintuitive


syntax constructs.

• Many common features of object-oriented programming, such as inheritance


and even simple methods, must be arrived at through these nonintuitive
methods.
Benefits of using object-oriented design in your JavaScript include
• Increased code reuse,
• Better memory management
• Easier maintenance.
• From a practical perspective, almost all modern frameworks (such as jQuery
and the Google Maps API) use prototypes to simulate classes
How to mimic class features?
Creation of a simple prototype to represent a single die object.
• Using Object Literals:
var oneDie = { color : "FF0000", faces : [1,2,3,4,5,6] };
oneDie.color="0000FF";

• Emulate Class through Functions:


function Die(col)
{
this.color=col;
this.faces=[1,2,3,4,5,6];
}
var oneDie = new Die("0000FF");
Adding Methods to the Object:
• To define a method in an object’s function one can either define it internally, or use a
reference to a function defined outside the class.
• External definitions can quickly cause namespace conflict issues, since all method names
must remain conflict free with all other methods for other classes.
• For this reason, one technique for adding a method inside of a class definition is by assigning
an anonymous function to a variable.
jQuery

• Developed in 2005 by John Resig at Rochester Institute of Technology.

• jQuery is a lightweight JavaScript library that emphasizes interaction


between JavaScript and HTML.

• Helps web developers to create simple pieces of interaction without


being forced to write long, complex, book-length pieces of code.
The jQuery library contains the following features:

• HTML element selections

• HTML element manipulation

• CSS manipulation

• HTML event functions

• JavaScript Effects and animations

• HTML DOM traversal and modification

• AJAX
Basic syntax is:
$(selector).action()
 A dollar sign to define jQuery
 A (selector) to "query" HTML elements
 A jQuery action() to be performed on the element(s)

Examples:
 $(this).hide() - hides current element.
 $("p").hide() - hides all paragraphs
 $("p.test").hide() hides all paragraphs with - class="test“
 $("#test").hide() hides the element with id="test“
Selectors
jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.

• $("*") Universal selector matches all elements (and is slow).

• $("tag") Element selector matches all elements with the given element name.

• $(".class") Class selector matches all elements with the given CSS class.

• $("#id") Id selector matches all elements with a given HTML id attribute.

For example, to select the single element with id="grab" you would write:

var singleElement = $("#grab")


Thank You

You might also like