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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie jQuery Fundamentals

Ähnlich wie jQuery Fundamentals (20)

Mehr von Doncho Minkov

Mehr von Doncho Minkov (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

jQuery Fundamentals

Hinweis der Redaktion