jQuery for beginners

jQuery for Beginners

Arulmurugan - Developer

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

Introduction to Javascript

HTML CSS JavaScript

markup language presentation language scripting language
content presentation behaviour

Java JavaScript

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

Document Object Model

Document - Object

Document Object Model
Model

html

head body

title h1 p ul

li li li

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") ;

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
});

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 - $("*")

Selectors - Combined

• Syntax

$("tagName.className")

$("tagName.className#tagId")

• Examples

$("h1.mainTitle")

$("h1.mainTitle#firstHeading")

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)")

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")
)")

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)")

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]")

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) )

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")

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');
});

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

• $("selector").unbind(event, handler)

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

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

Additional Features
• jQuery UI
• AJAX functionality

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

jQuery for beginners

More Related Content

What's hot

jQuery for beginners