jQuery Fundamentals

jQuery Fundamentals, DOM, Events, AJAX, UI Doncho Minkov Telerik Mobile Development Course mobiledevcourse.telerik.com Technical Trainer http://www.minkov.it

Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What is jQuery? The world’s most popular JavaScript library

What is jQuery? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What is jQuery? (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Why jQuery is So Popular? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

How to Add jQuery to a Web Site? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Fundamentals of jQuery Selecting, Adding, Removing DOM Elements

Selecting and Doing Something ,[object Object],[object Object],[object Object],// Finding the item $("#something").hide(); // Doing something with the found item <div id="something"></div>

jQuery Fundamentals ,[object Object],[object Object],<div class="myClass foo bar"></div> <div class="baz myClass"></div> <div class="bar"></div> //... $('.myClass').hide(); // will hide both elements //...

DOM Manipulation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Removing Elements ,[object Object],[object Object],// After <div> </div>

Selecting Multiple Elements Live Demo

jQuery Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Events ,[object Object],[object Object],[object Object],[object Object],$('a.tab').click(function() { // event handling code $(this).css('color', 'red'); });

jQuery Method Chaining ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Stack Architecture ,[object Object],[object Object],[object Object]

jQuery Stack Architecture (2) ,[object Object],[object Object],[object Object],$('body') // [body] .find('p') // [p, p, p] > [body] .find('a') // [a, a] > [p, p, p] > [body] .addClass('foo') .end() // [p, p, p] > [body] .end() // [body]

jQuery & Chaining and Architecture ,[object Object],$('tr') .filter(':odd') .addClass('myOddClass') .end() .filter(':even') .addClass('myEvenClass');

jQuery & Chaining and Architecture (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Stack Architecture Live Demo

Dynamically Assigning a Class Live Demo

AJAX Fundamentals ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Ajax ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Ajax (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Ajax – $(…).load() ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],$('#myContainer').load('home/myHtmlSnippet.html');

jQuery Ajax – Example <button>Perform AJAX Request</button> <script type="text/javascript"> $("button").click(function() { $.ajax({ url: "data.html", success: function(data){ $('#resultDiv').text(data); } }); }); </script> <div id="resultDiv">Result will be shown here</div> ,[object Object],[object Object]

jQuery AJAX: JSON-Style AJAX and Partial Rendering Live Demo

jQuery UI ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Widgets ,[object Object],[object Object],[object Object],$("input:text.date").datepicker(); $("#someDiv").accordion(); var langs = ["C#", "Java", "PHP", "Python", "SQL"]; $("#langBox").autocomplete({ source: langs }); <div id="dialog" title="a title"><p>Some text</p></div> $("#dialog").dialog(); $("#slider").slider();

jQuery UI Drag-and-Drop Live Demo

jQuery Fundamentals ,[object Object],http://schoolacademy.telerik.com

Exercises ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exercises (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Exercises (3) ,[object Object],[object Object],[object Object],[object Object],[object Object]

Exercises (4) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Fundamentals

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to jQuery Fundamentals

Similar to jQuery Fundamentals (20)

More from Doncho Minkov

More from Doncho Minkov (20)

Recently uploaded

Recently uploaded (20)

jQuery Fundamentals

Editor's Notes