jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...Edureka!
( ** Full Stack Masters Training: https://www.edureka.co/masters-program/full-stack-developer-training ** )
This PPT on jQuery will help you understand the basics of jQuery and you will also be able to create your own program using jQuery by the end of this PPT.
Follow us to never miss an update in the future.
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
jQuery Tutorial For Beginners | Developing User Interface (UI) Using jQuery |...Edureka!
( ** Full Stack Masters Training: https://www.edureka.co/masters-program/full-stack-developer-training ** )
This PPT on jQuery will help you understand the basics of jQuery and you will also be able to create your own program using jQuery by the end of this PPT.
Follow us to never miss an update in the future.
Instagram: https://www.instagram.com/edureka_learning/
Facebook: https://www.facebook.com/edurekaIN/
Twitter: https://twitter.com/edurekain
LinkedIn: https://www.linkedin.com/company/edureka
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.
Introduction, Technologies included in ajax,
Ajax Evolution,
Pro’s and Con’s,
Beginners Problem?,
Types and choices of request,
Ajax on hands (Example),
Global Ajax Event Handlers,
Helper Functions,
Low Level interface,
Shorthand Methods for Ajax request.
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.
Introduction, Technologies included in ajax,
Ajax Evolution,
Pro’s and Con’s,
Beginners Problem?,
Types and choices of request,
Ajax on hands (Example),
Global Ajax Event Handlers,
Helper Functions,
Low Level interface,
Shorthand Methods for Ajax request.
2. What is jQuery?
• Is a free , open Javascript library
• Simplifies the task of creating highly
responsive web pages
• Works across modern browsers
• Abstracts away browser-specific features,
allowing you to concentrate on design
3. Introduction to Javascript
HTML CSS JavaScript
markup language presentation language scripting language
content presentation behaviour
Java JavaScript
4. What is a scripting language?
• Can't communicate with OS
• Can't access local files
• Can't directly access database
• Can't access hardware
• Client-side language
• Works on DOM
User's Computer
Web Browser Web Server
Web Page
JavaScript
Python, PHP, ASP.NET,
Ruby on Rails
7. JavaScript vs jQuery
• Example 1 - Hide an element with id "textbox“
//javascript
document.getElementById('textbox').style.display = "none";
//jQuery
$('#textbox').hide();
• Example 2 - Create a <h1> tag with "my text“
//javascript
var h1 = document.CreateElement("h1");
h1.innerHTML = "my text";
document.getElementsByTagName('body')[0].appendChild(h1);
//jQuery
$('body').append( $("<h1/>").html("my text") ;
8. Enable jQuery in your page
• jQuery can be enabled in your page by including
reference to jQuery library file
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
• Introduce a jQuery function by using the below below
given function.
$(document).ready(function(){
//Script goes here
});
OR
$(function(){
//Script goes here
});
9. Basic selectors
• TagName
document.getElementsByTagName("tagName");
$("tagName") - $("div"), $("p"), $("div"),.....
• Tag ID
document.getElementById("id");
$("#id") - $("#name"), $("#address")
• Tag Class
document.getElementsByClassName("className");
$(".className") - $(".comment"), $(".code")
• To select all elements - $("*")