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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (13)

Similar a jQuery Fundamentals

Similar a jQuery Fundamentals (20)

Más de Doncho Minkov

Más de Doncho Minkov (20)

Último

Último (20)

jQuery Fundamentals

Notas del editor