Scribd
Upload
274 views

Jquery For Beginners

This document provides an introduction and overview of jQuery: - jQuery is a free, open-source JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling and animation. It works across modern browsers. - jQuery abstracts away browser-specific behavior to allow developers to focus on design rather than browser compatibility issues. - The document then covers basic jQuery concepts like selectors, traversing DOM elements, manipulating attributes and content, and binding events. It also provides examples of how jQuery simplifies common tasks like hiding/showing elements and handling clicks.

Uploaded by

gfaprhc19
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
274 views

Jquery For Beginners

This document provides an introduction and overview of jQuery: - jQuery is a free, open-source JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling and animation. It works across modern browsers. - jQuery abstracts away browser-specific behavior to allow developers to focus on design rather than browser compatibility issues. - The document then covers basic jQuery concepts like selectors, traversing DOM elements, manipulating attributes and content, and binding events. It also provides examples of how jQuery simplifies common tasks like hiding/showing elements and handling clicks.

Uploaded by

gfaprhc19
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

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

li

li

ul

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:

$("selector:first")
$("selector:last")
$("selector:odd")
$("selector:even")
$("selector:eq(i)")
$("selector:gt(i)")
$("selector:lt(i)")

Examples:

$("p:first")
$("p:last")
$("p:odd")
$("p:even")
$("p:eq(1)")
$("p:gt(1)")
$("p:lt(1)")

Condition filters - Form filters

$("selector:visible")
$("selector:hidden")

$("selector:disabled")
$("selector:enabled")

$("selector:checked")
$("selector:selected")

$("selector:header")
$("selector:animated")
$("selector:not(selector:not
)")

$("selector:input")
$("selector:text")
$("selector:password")

$("selector:radio")
$("selector:checkbox")

$("selector:submit")
$("selector:reset")
$("selector:image")
$("selector:file")
$("selector:button")

Relationship filters - Content filters

$("selector:parent")
$("selector:first-child")
$("selector:last-child")
$("selector:only-child")

$("selector:nth-child(i)")
$("selector:nth-child(odd)")
$("selector:nthchild(even)")
$("selector:nthchild(Xn+M)")

$("selector:content('text')
")
$("selector:empty")
$("selector:has(selector)")

Attribute filters
Syntax:
$("selector[attribute]")
$("selector[attribute=value
]")
$("selector[attribute!=value
]")
$("selector[attribute^=valu
e]")
$("selector[attribute$=valu
e]")
$("selector[attribute*=valu
e]")

Examples:

$("p:[name]")
$("p:[name=para]")
$("p:[name!=para]")
$("p:[name^=para]")
$("p:[name$=para]")
$("p:[name*=para]")

Retrieve, Set and Remove attributes


Syntax:
$("selector").attr("name")
$("selector").attr("key",
"val")
$("selector").attr("key",
fn())
$("selector").attr(propertie
s)

$("selector").removeAttr(a
ttr)

Examples:
$("img").attr("src")
$("p").attr("class",
"source")
$("img").attr("height",
calHt())
$("img").attr({
"src" : "/path/",
"title" : "My Img"
});
$("div").removeAttr("class
)

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:
$("selector").length
$("selector").size()

Examples:
$("h1").length
$("h1").size()

$("selector").get()
$("selector").get(index)

var h1_list = $("h1").get()


var h1 = $("h1").get(2)

$("selector").find("selector")
$("selector").each(function(){
$(this).xxxx();
});

$("select").find("
option[value='india']")
$("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

You might also like