Slides for presentation C002 | jQuery for beginners in Sumofyou Technologies

1. jQuery for Beginners
Arulmurugan - Developer

2. What is jQuery?
• Is a free , open Javascript library
• Simplifies the task of creating highly
responsive web pages
• Works across modern browsers
• Abstracts away browser-specific features,
allowing you to concentrate on design

3. Introduction to Javascript
HTML CSS JavaScript
markup language presentation language scripting language
content presentation behaviour
Java JavaScript

4. What is a scripting language?
• Can't communicate with OS
• Can't access local files
• Can't directly access database
• Can't access hardware
• Client-side language
• Works on DOM
User's Computer
Web Browser Web Server
Web Page
JavaScript
Python, PHP, ASP.NET,
Ruby on Rails

5. Document Object Model
Document - Object

6. Document Object Model
Model
html
head body
title h1 p ul
li li li

7. JavaScript vs jQuery
• Example 1 - Hide an element with id "textbox“
//javascript
document.getElementById('textbox').style.display = "none";
//jQuery
$('#textbox').hide();
• Example 2 - Create a <h1> tag with "my text“
//javascript
var h1 = document.CreateElement("h1");
h1.innerHTML = "my text";
document.getElementsByTagName('body')[0].appendChild(h1);
//jQuery
$('body').append( $("<h1/>").html("my text") ;

8. Enable jQuery in your page
• jQuery can be enabled in your page by including
reference to jQuery library file
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
• Introduce a jQuery function by using the below below
given function.
$(document).ready(function(){
//Script goes here
});
OR
$(function(){
//Script goes here
});

9. Basic selectors
• TagName
document.getElementsByTagName("tagName");
$("tagName") - $("div"), $("p"), $("div"),.....
• Tag ID
document.getElementById("id");
$("#id") - $("#name"), $("#address")
• Tag Class
document.getElementsByClassName("className");
$(".className") - $(".comment"), $(".code")
• To select all elements - $("*")

10. Selectors - Combined
• Syntax
$("tagName.className")
$("tagName.className#tagId")
• Examples
$("h1.mainTitle")
$("h1.mainTitle#firstHeading")

11. Index filters
Syntax: Examples:
• $("selector:first") • $("p:first")
• $("selector:last") • $("p:last")
• $("selector:odd") • $("p:odd")
• $("selector:even") • $("p:even")
• $("selector:eq(i)") • $("p:eq(1)")
• $("selector:gt(i)") • $("p:gt(1)")
• $("selector:lt(i)") • $("p:lt(1)")

12. Condition filters - Form filters
• $("selector:visible") • $("selector:input")
• $("selector:hidden") • $("selector:text")
• $("selector:password")
• $("selector:disabled")
• $("selector:enabled") • $("selector:radio")
• $("selector:checkbox")
• $("selector:checked")
• $("selector:selected") • $("selector:submit")
• $("selector:reset")
• $("selector:header") • $("selector:image")
• $("selector:animated") • $("selector:file")
• $("selector:not(selector:not • $("selector:button")
)")

13. Relationship filters - Content filters
• $("selector:parent") • $("selector:content('text')
")
• $("selector:first-child")
• $("selector:last-child") • $("selector:empty")
• $("selector:only-child") • $("selector:has(selector)")
• $("selector:nth-child(i)")
• $("selector:nth-child(odd)")
• $("selector:nth-
child(even)")
• $("selector:nth-
child(Xn+M)")

14. Attribute filters
Syntax: Examples:
• $("selector[attribute]") • $("p:[name]")
• $("selector[attribute=value
]")
• $("p:[name=para]")
• $("selector[attribute!=value
]")
• $("p:[name!=para]")
• $("selector[attribute^=valu
e]")
• $("p:[name^=para]")
• $("selector[attribute$=valu
e]")
• $("p:[name$=para]")
• $("selector[attribute*=valu
e]")
• $("p:[name*=para]")

15. Retrieve, Set and Remove attributes
Syntax: Examples:
• $("selector").attr("name") • $("img").attr("src")
• $("selector").attr("key", • $("p").attr("class",
"val") "source")
• $("selector").attr("key", • $("img").attr("height",
fn()) calHt())
• $("selector").attr(propertie • $("img").attr({
s) "src" : "/path/",
"title" : "My Img"
});
• $("selector").removeAttr(a • $("div").removeAttr("class“
ttr) )

16. Class, HTML, Text, Value - Functions
• $("selector").hasClass("className")
• $("selector").addClass("className")
• $("selector").removeClass("className")
• $("selector").toggleClass("className")
• $("selector").html()
• $("selector").html("html code")
• $("selector").text()
• $("selector").text("text content")
• $("selector").val()
• $("selector").val("value")

17. Traversing
Syntax: Examples:
• $("selector").length • $("h1").length
• $("selector").size() • $("h1").size()
• $("selector").get() • var h1_list = $("h1").get()
• $("selector").get(index) • var h1 = $("h1").get(2)
• $("selector").find("selector") • $("select").find("
• $("selector").each(function(){ option[value='india']")
$(this).xxxx(); • $("selector").each(function(){
}); $(this).addClass('title');
});

18. Events
• bind()
• unbind()
• ready()
• toggle()
• hover()
• trigger()
• $("selector").bind(event, data, handler)
• $("selector").unbind(event, handler)

19. Bind - Example
$(function(){
$("#myButton").bind("onclick", validate);
$("#myButton").click( validate);
});
function validate(){
if( $("#myText").val().length == 0 ) {
alert("Error")
} else {
$("#myForm").submit();
}
}

20. Animations
• show()
• hide()
• fadeIn()
• fadeOut()
• slideUp()
• slideDown()

21. Additional Features
• jQuery UI
• AJAX functionality

22. Thank you
slideshare.net/arulmr
arul@arulmr.com