This document provides an introduction to using jQuery. It discusses downloading and including jQuery in a project, selecting elements using CSS selectors and the DOM tree, changing element content and attributes, adding new elements, handling events, and animations. Key points covered include using $ to select elements, common selection methods like id and class, changing text and HTML, and animating properties over time.
How to increase Performance of Web Application using JQuerykolkatageeks
Pallab Dutta presented a wonderful session on how to increase productivity of web application using JQuery. He showed us demos regarding basic syntax of JQuery.
Follow us
www.kolkatageeks.com
to get more.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
How to increase Performance of Web Application using JQuerykolkatageeks
Pallab Dutta presented a wonderful session on how to increase productivity of web application using JQuery. He showed us demos regarding basic syntax of JQuery.
Follow us
www.kolkatageeks.com
to get more.
jQuery is a JavaScript library which allows you to develop solutions with less code, in less time. You can build interactive prototypes for your prospective clients, or take an existing solution and add new dynamic behaviour with little effort.
We will see how jQuery can be used to quickly and concisely apply JavaScript behaviour to your web app. It will cover selectors, Ajax, DOM manipulation and more. The aim: to produce lean unobtrusive JavaScript with jQuery.
It covers:
- What is jQuery?
- Why jQuery?
- How include jQuery in your web page
- Creating and manipulating elements
- Events
- Animations and effects
- Talking to the server
- jQuery UI
- Writing plugins
- Breaking news around new releases
- Using the CDN
Mobile applications Development - Lecture 12
Javascript
jQuery (Zepto)
useful microframeworks
This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
http://www.di.univaq.it/malavolta
2. Add jQuery to your project
● Download JQuery from the jQuery website
and use this code : <script src=‘jquery.js’></script>
OR
● Link to a CDN hosted jQuery
and use a code like this :
<script src=‘http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js’>
</script>
Inbal Geffen
3. $("#div1") == jQuery("#div1")
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function hellojQuery() {
$("#div1").html("Hello jQuery");
}
</script>
● The $ sign tells us to choose an element from our code
● We can choose elements using all the known css selectors
● $("#div1") - will choose all the elements in the page with the id div1
● .html - is like using innerHTML on all the selected elements
Example
Inbal Geffen
4. Select Elements - CSS selectors
● $(“#div1”) - select all elements with "div1" id
● $(“div”) - select all div elements
● $(“.classic”) - select all elements with classic class
● $(“div.classic”) - select all div elements with classic class
● $(“div:last”) - select the last div
● $(“div:even”) - select all divs in even places
and all the rest..
Inbal Geffen
5. Select Elements - more selectors
● $(“:button”) - select all buttons
● $(“:contains(hello)”) - select all elements that contain the text "hello"
● $(“:hidden”) - select all hidden elements
● $(“:visible”) - select all visible elements
● $(“div:not(.classic)”) - select all elements that are not from classic class
Inbal Geffen
6. Select Elements - DOM tree
<p id="p1">
This is a first link: <a href="page1.html">Page1</a><br />
This is a second link: <a href="page2.html">Page2</a><br />
This is a third link: <a href="page3.html">Page3</a><br />
</p>
● $(“p”).parent() - select the parent p
● $(“p”).children("a") - select all the a elements in the p
● $(“div”).siblings() - select the parent div
● $(“div”).next('div') - select the next div in the DOM
● $(“div”).prev('p') - select the previous p in the DOM
Inbal Geffen
7. What can we do with it?
We used the $ to select elements from our page -
what can we do with these elements?
● $(“div”)[0] - will return the first div element in the page
● $(“div”).size() - will return how many divs are in the page
What else?
● Change the element attributes
● Change the element content
● Dynamically add elements to the page
Inbal Geffen
8. Change element content
● $(“div”).text("I am a div") - will change only the text in the div
● $(“div”).html(“I am a div”) - change the innerHTML of all the divs
//This is instead of going in a loop over all the divs
//We can iterate over each div using the each method
function showDivNumber()
{
$("div").each(function (index) {
this.innerHTML = "I am div number " + index;});
}
Inbal Geffen
9. Change element content(2)
callback functions
● each() gets a function that will work on any element in the array of divs
● The function gets the index of the element and it can use it
function showDivNumber()
{
$("div").each(function (index) {
this.innerHTML = "I am div number " + index;});
}
Inbal Geffen
10. Change element attribute
● $("div").addClass("specialDiv");
//add the class "specialDiv" to all the divs
● $("div").removeClass("specialDiv");
//remove the class "specialDiv" from all the divs that has this class
● $("#div1").attr("id", "hello");
//change the id of div with id="div1" to id="hello"
Inbal Geffen
11. Add elements
<div id="div1">
<p>I'm a paragraph</p>
</div>
● $("<p style='color:red'>I am dynamic text</p>").appendTo("#div1");
<div id="div1">
<p>I'm a paragraph</p>
<p style='color:red'>I am dynamic text</p>
</div>
● $("<p style='color:red'>I am dynamic text</p>").prependTo("#div1");
<div id="div1">
<p style='color:red'>I am dynamic text</p>
<p>I'm a paragraph</p>
</div>
Inbal Geffen
12. Add elements(2)
<div id="div1">
<p>I'm a paragraph</p>
</div>
● $("<p style='color:red'>I am dynamic text</p>").insertAfter("#div1");
<div id="div1">
<p>I'm a paragraph</p>
</div>
<p style='color:red'>I am dynamic text</p>
Inbal Geffen
13. Run the script
We want to wait until all the page loads... and only then start our function
<script type="text/javascript">
$(document).ready(function () {
$("<p style='color:red'>I am dynamic text</p>").appendTo("#div1");
});
</script>
It also works using this shortcut:
<script type="text/javascript">
$(function () {
$("<p style='color:red'>I am dynamic text</p>").appendTo("#div1");
});
</script>
Inbal Geffen
14. Events
<input type="button" value="Test" />
Bind(eventname, function to perform) can be removed from the element using unbind()
$("#btnTest").bind('click', function () {
alert('btnTest was clicked');
});
Many events have shortcuts:
$("#btnTest").click(function () {
alert('btnTest was clicked');
});
Get info from the event
$("#div1").mousemove(function(event) {
var str = "(X = " + event.pageX + ", Y=" + event.pageY + ")";
$("#div1").text(str);
});
Inbal Geffen
16. Animations(2)
Any css changes we want using the animate() method:
$("#div1").animate({
width: "100%",
fontSize: "50px",
}, 1500);
Stop the animation:
$("#div1").stop();
jQuery supports multiple calls in a row
$("#div1").fadeOut().slideDown().fadeOut().slideUp();
Inbal Geffen