Document Object Model.

Slides:



Advertisements
Similar presentations
JQuery CS 380: Web Programming. What is jQuery? jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling,
Advertisements

JQUERY/AJAX ALIREZA KHATAMIAN DELARAM YAZDANSEPAS.
Computer Information System Information System California State University Los Angeles Jongwook Woo CIS 461 Web Development I JQuery Part I Jongwook Woo,
CS428 Web Engineering Lecture 15 Introduction to Jquery.
JQuery. What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversing and manipulation event handling.
Philly.NET Hands-On jQuery + Plug-ins Bill Wolff, Rob Keiser.
1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)
Anatomy of an App HTML, CSS, jQuery, jQuery Mobile CIS 136 Building Mobile Apps 1.
JQuery CS 268. What is jQuery? From their web site:
Windows.Net Programming Series Preview. Course Schedule CourseDate Microsoft.Net Fundamentals 01/13/2014 Microsoft Windows/Web Fundamentals 01/20/2014.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
INTRODUCTION TO DHTML. TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference.
M. Taimoor Khan Courtesy: Norman White.
Nguyen Ich Cuong.  Course duration: 45’  Purpose: Present Introduction to JQuery  Targeted attendees: NICorp Trainee  Tests/quiz: Yes - 10’
What is jQuery?  JavaScript Library  Functionality  DOM scripting & event handling  Ajax  User interface effects  Form validation 2.
A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / Chris Greenhalgh.
JQUERY | INTRODUCTION. jQuery  Open source JavaScript library  Simplifies the interactions between  HTML document, or the Document Object Model (DOM),
Interacting with a Web Page using JavaScript Mat Kelly GTAI Presentation January 10, 2014.
13. jQuery See the official documentation at  See the terse API documentation at
Jquery Nasrullah. Jquery jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn.
INTRODUCTION TO HTML5 Using jQuery with HTML5. Introducing jQuery  Although it is not a part of any W3C or WHATWG specification, jQuery performs an important.
Animation & Effects Using JQuery. What is jQuery? jQuery is a lightweight, JavaScript library. The purpose of jQuery is to make it much easier to use.
JQuery Youn-Hee Han
CHAPTER 5 jQuery อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
Unleash the Power of jQuery Doncho Minkov Telerik Software Academy academy.telerik.com Senior Technical Trainer
JQuery Javascript Library. JQuery Powerful JavaScript library –Simplify common JavaScript tasks –Access parts of a page using CSS or XPath-like expressions.
JQuery Introduction © Copyright 2014, Fred McClurg All Rights Reserved.
Browser scripting jQuery Edited by: Trần Thị Mỹ Dung Ref:w3schools.com.
JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website.
Unleash the Power of jQuery Learning & Development Team Telerik Software Academy.
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
Creating Dynamic Webpages
JQuery Overview Unleash the Power of jQuery SoftUni Team Technical Trainers Software University
Intro to jQuery. What is jQuery? A JavaScript library Lightweight (about 31KB for the minified version) Simplifies HTML document traversing (DOM), event.
1 What is JQuery. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax* interactions.
Unit 13 –JQuery Basics Instructor: Brent Presley.
Web Technologies Lecture 8 JQuery. “A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax.
Introduction to JQuery COGS 187A – Fall JQuery jQuery is a JavaScript library, and allows us to manipulate HTML and CSS after the page has been.
05 | Integrating JavaScript and MVC 4 Jon Galloway | Tech Evangelist Christopher Harrison | Head Geek.
JQuery “write less, do more”. jQuery - Introduction Simply a JavaScript library to simplify JavaScript programming itself Wraps long standard JavaScript.
KAPITA SELEKTA INFORMATIKA Lasmedi Afuan, ST.M.Cs.
JQuery Tutorial. What is jQuery jQuery is a JavaScript Library The purpose of jQuery is to make it much easier to use JavaScript on your website JavaScript.
1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)
.. WHAT IS JQUERY JQuery is a fast, small, and feature-rich JavaScript library. Simplifies the interaction between HTML and JavaScript. The jQuery library.
JQuery is a fast, small, and feature-rich javascript library. It makes things like HTML document traversal and manipulation, event handling, animation,
JQuery Fundamentals Introduction Tutorial Videos
What is jQuery?.
DHTML.
-By Yogita Nirmal.
12/04/12 JQuery I took these slides from the site because they were pretty good looking. Instructions for editing school and department titles: Select.
Tek Raj Chhetri Code for Humans not for machine.
Lecture 11. Web Standards Continued
JavaScript Event Handling.
Introduction to Web programming
JQuery Basics 소속 / 작성자 이 문서는 나눔글꼴로 작성되었습니다. 설치하기.
JQUERY Online TRAINING AT GOLOGICA
The Cliff Notes Version
DHTML Javascript Internet Technology.
Understanding JavaScript and Coding Essentials
jQuery The Easy JavaScript Nikolay Chochev Technical Trainer
JQuery with ASP.NET.
DHTML Javascript Internet Technology.
Web Programming Language
..
Javascript and JQuery SRM DSC.
E-commerce Applications Development
Chengyu Sun California State University, Los Angeles
SEEM4540 Tutorial 3 jQuery Wong Wai Chung.
JQuery.
Presentation transcript:

Document Object Model

jQuery Intro and Overview jQuery is an open source JavaScript library that simplifies the interactions between an HTML document, or more precisely the Document Object Model (DOM) and JavaScript. Query is free, open source software. Java Script A scripting language  developed by Netscape  to enable Web  authors to design interactive sites. It can interact with HTML source code, enabling Web authors to spice up their sites with dynamic content. DOM(Document Object Model) It is the specification for how objects in a Web page are represented. The DOM defines what attributes are associated with each object, and how the objects and attributes can be manipulated.

jQuery Features HTML element selections HTML element manipulation   CSS manipulation   HTML event functions   JavaScript Effects and animations   HTML DOM traversal and modification   AJAX   Utilities

What jQuery does Access elements in a document. Modify the appearance of a web page Alter the content of a document Respond to a user's interaction Animate changes being made to a document Retrieve information from a server without refreshing a page Simplify common JavaScript tasks

Basic of jQuery Selecting part of document is fundamental operation A JQuery object is a wrapper for a selected group of DOM nodes $() function is a factory method that creates JQuery objects $(“dt”) is a JQuery object containing all the “dt” elements in the document .addClass() method changes the DOM nodes by adding a ‘class’ attribute The ‘class’ attribute is a special CSS construct that provides a visual architecture independent of the element structures $(“dt”).addClass(“emphasize”) will change all occurrences of <dt> to< dt class=“emphasize”>

Adding the jQuery Library to Your Pages <head> <script type="text/javascript" src="jquery.js"></script> </head jQuery-----“Write less, do more.” Finding some elements (via CSS selectors) and doing something with them (via jQuery methods) Chaining multiple jQuery methods on a set of elements Using the jQuery wrapper and implicit iteration

jQuery API's jQuery Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities

jQuery Fundamentals jQuery Wrapper It is a method that uses of selectors, which concisely represent elements based upon their attributes or positions within the HTML document. Example: a a - refers to group of all links (<a> element). To collect the <a> element in your page, we can use the syntax:

jQuery - selector To collect the <a> element in your page, we can use the syntax: Applying the jQuery to collect the elements, this would be: $(“a”).hide() $(selector) or jQuery(selector)

jQuery - Document ready handler This handler is executed when the DOM has been created,  but before the page is presented to the user.  This guarantees that you can set up the page prior to the user being able to interact with it. First, we wrap the document instance with the jQuery() function, Then we apply the ready() method, passing a function to be executed when the document is ready to be manipulated. $(document).ready(function() {               });

jQuery - Making DOM elements We can create DOM elements on the fly by passing the $() function a string that contains the HTML markup for those elements.  For example, we can create a new paragraph element as follows: $("<p>Hi there!</p>")

jQuery - Syntax $(this).hide() Demonstrates the jQuery hide() function, hiding the current HTML element. $("#test").hide() Demonstrates the jQuery hide() function, hiding the element with id="test“. $("p").hide() Demonstrates the jQuery hide() function, hiding all< p> elements. $(".test").hide() Demonstrates the jQuery hide() function, hiding all elements with class="test".

jQuery - Syntax The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s). Basic syntax is: $(selector).action() A dollar sign to define jQuery alias. A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s)

jQuery - example - html <!DOCTYPE html > <html> <head> <script type="text/JavaScript" src="jquery.js"></script> <script type="text/JavaScript" src="myscript.js"></script> </head> <body><b> <div>old content</div> <div>old content</div> <div>old content</div> <div>old content</div> <div>old content</div></b> <script>

jQuery - example – myscript.js //update the text contained inside of all divs $(document).ready( function() { alert('Document Handler is Ready'); }); $(function() { $('div').text('new content');});

jQuery - example – demo

jQuery - example – demo

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <a href='#'>link 1</a><br> <a href='#'>link 2</a><br> <a href='#'>link 3</a><br> <a href='#'>link 4</a><br> <a href='#'>link 5</a><br> <a href='#'>link 6</a><br> <script type="text/JavaScript" src="jquery.js"></script> <script type="text/JavaScript"> //alerts there are 6 elements alert('Page contains ' + $('a').length + ' <a> elements!'); </script> </body> </html> jQuery - example2 - html

jQuery - example2 <!– onderaan het HTML document  <script type="text/JavaScript" src="jquery.js"></script> <script type="text/JavaScript"> //alerts there are 6 elements alert('Page contains ' + $('a').length + ' <a> elements!'); </script>

jQuery - example2 - demo

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <form> <input name="" type="checkbox" /> <input name="" type="radio" /> <input name="" type="text" /> <input name="" type="button" /> </form> jQuery - example 3 - html

jQuery - example 3 <!– onderaan het HTML document  <script type="text/JavaScript" src="jquery.js"></script> <script type="text/JavaScript"> //searches within all form elements, using a wrapper for context, alerts "8 inputs" alert('selected ' + jQuery('input',$('form')).length + ' inputs'); //search with the first form element, using DOM reference as the context, alerts //"4 inputs" alert('selected' + jQuery('input',document.forms[0]).length + ' inputs'); //search within the body element for all input elements using an expression, //alerts "12 inputs" alert('selected' + jQuery('input','body').length + ' inputs'); </script>

jQuery - example 3 - demo

jQuery - example 3 - demo

jQuery - example 3 - demo