Jquery fundamentals
-
Upload
salvatore-fazio -
Category
Documents
-
view
327 -
download
3
Transcript of Jquery fundamentals
![Page 1: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/1.jpg)
jQuery fundamentals
![Page 2: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/2.jpg)
Agenda
• Introduction
• Selector
• Interacting with the DOM
• Handling Events
• Working with Ajax Features
• Tools and documentation
What we will learn!
![Page 3: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/3.jpg)
How can I become an ‘English guy’• Learn the language
• Use the dictionary
• Speak a lot
• Drink a lot of (Yorkshire) tea with milk and beer off course
![Page 4: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/4.jpg)
Introduction…
… Stay relax
, Nino Crudele
![Page 5: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/5.jpg)
Why use jQuery• First of all what you need to know:
Javascript Html Css
• Why jQuery is so famous? JavaScript Library (single file) Cross-browser support Selector Handle events Animate Post and Get (Ajax calls) A lot of plugins available
![Page 6: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/6.jpg)
What is DOM?• http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
• The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.
• With the Document Object Model, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the Document Object Model, with a few exceptions - in particular, the DOM interfaces for the XML internal and external subsets have not yet been specified.
![Page 7: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/7.jpg)
What DOM looks like
![Page 8: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/8.jpg)
Learn the language• From Shawn Wildermuth - JavaScript for the C# Guy:
http://wildermuth.com/2012/5/6/JavaScript_for_the_C_Guy_The_Global_Object http://wildermuth.com/2012/3/16/JavaScript_for_the_C_Guy_Scopes http://
wildermuth.com/2012/3/10/JavaScript_for_the_C_Guy_Function_Overloads http://
wildermuth.com/2012/5/28/JavaScript_for_the_C_Guy_The_confusion_about_this
![Page 9: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/9.jpg)
Using jQuery Ready Function• $(document).ready()
Each HTML document loaded into a browser window becomes a document object
<script type="text/javascript" language="javascript">$(document).read(function() {
// do it});
</script>
• What means $? The $ is a identifier. jQuery use it as the primary base object (or function). Ex:
<script type="text/javascript" language="javascript">var ᾩ = function (object) {
object.Company = "Content and Code";return object;
};
alert(ᾩ(document).Company);
</script>
![Page 10: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/10.jpg)
Use the dictionary• http://api.jquery.com -> it will be your best friend
• If you want intellisense works with jquery, look that: http://appendto.com/community/jquery-vsdoc
• SP /// <reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js" />
![Page 11: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/11.jpg)
Demo - Referencing a jQuery Script
![Page 12: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/12.jpg)
Speak a lot
Selector
![Page 13: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/13.jpg)
Selecting Nodes by: id, class name, attribute name• Different ways to select a node:
By id: $(“#myDiv”) $(“div[id]”)
By class: $(“.myClass”)
By attribute: $(‘div[id]’) $(‘input[name~=“man”]’)
![Page 14: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/14.jpg)
Demo Selector $(“#myDiv”) $(“div[id]”) $(“.myClass”)
![Page 15: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/15.jpg)
The Other Selectors ~= contains a word |= contains a prefix *= contains a string in the word = equals != not equal ^= start with :button is a button :checkbox is a checkbox :checked is a checked checkbox
![Page 16: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/16.jpg)
Demo The Other Selector
![Page 17: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/17.jpg)
Speak a lotInteracting with the DOM
![Page 18: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/18.jpg)
Iterating Through Nodes.each(function (index, Element)) is used to iterate through jQuery objects:
$('div').each(function(index) {
alert(index + ‘ ‘ + $(this).text());});
-----------------
• $('.row').last().remove();
-----------------
var newBox = $('<div class="tile" id="bb"></div>').addClass(colorOfMyNewBox);var lastrow = $('.row').last();newBox.appendTo(lastrow);
![Page 19: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/19.jpg)
Demo Modify Properties and Attributes• Object attributes can be accessed using attr():
var val = $('#logo').attr('title');
$('#logo').attr('title‘, ‘new logo title’);
$('#addBox').attr({title: '',css: {
'border': '2px solid black;‘}
});
![Page 20: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/20.jpg)
Demo Adding and Removing nodes
$('#addRow').click(function () {$('<div class="row"></div>').appendTo('.list');
});
$('#removeLastBox').click(function () {$('.tile').last().remove();
});
![Page 21: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/21.jpg)
Speak a lot Handling Events
![Page 22: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/22.jpg)
Demo Handling Events$(function() {
$(".tile").mousedown(function() {$(this).addClass("selectedTile");
});$(".tile").mouseup(function() {
$(this).removeClass("selectedTile");});
});
$('#removeLastBox').bind('click', function() {});
$('#removeLastBox').unbind('click');
![Page 23: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/23.jpg)
Speak a lot Ajax Features
![Page 24: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/24.jpg)
Load function$(document).ready(function () {
$('#mockData').click(function () {$('#displayMockData').load('mockData.hmtl');
});});
$('#displayMockData').load('mockData.hmtl #faq3');
$('#displayMockData').load(‘GetCustomers.aspx', {PageSize:25});
![Page 25: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/25.jpg)
.get() and .post() functions$.get('/Examples/GetBoxes',
function (data) {var list = $('<div class="list"></div>');var newRow = $('<div class="row"></div>').appendTo(list);var newBoxes = '';$.each(data, function (index, item) {
newBoxes += '<div class="' + item.CssClass + '" id="' + item.Id + '" title="' + item.Tlt + '"></div>';
});$(newRow).append(newBoxes);$(list).appendTo('#displayMockDataFromServer');
});
$.post('/Product/UpdateProduct', { Id: dto.id, Name: dto.name, Color: dto.color, ListPrice: dto.price, ProductModel: dto.model, Quantity: dto.qty },
function () {dto.edit(false);
});
![Page 26: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/26.jpg)
Tools• Vsdoc
• /// <reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js" />
• http://jsfiddle.net/
• Fiddler
• Chrome developer tools
![Page 27: Jquery fundamentals](https://reader036.fdocuments.us/reader036/viewer/2022070315/554f4afeb4c905524c8b4959/html5/thumbnails/27.jpg)
Drink a lot of (Yorkshire) tea with milk and beer off course What’s next to make my UI more ‘atractive’ (I mean Rich)
• http://knockoutjs.com/
• http://backbonejs.org/ (https://touch.www.linkedin.com/)
• http://linqjs.codeplex.com/
• http://www.typescriptlang.org
• http://signalr.net/