Introduction to jQuery

Amar Daxini
Today’s Agenda
• Introduction to basic CSS selectors

• Introduction to DOM

• Introduction to jQuery

• General guidelines to use jQuery

Basics of css

We can apply css to different element in html in

following way

Applying common style to particular element

e.g div{font-size:12px},p{font-weight:bold},
body{background-color:#eee} etc...

Using this we can apply common style to its

respective element
Basics of CSS
 Applying style using id attribute of element.
e.g #id_1 { some property }

 In this all element which contain id=”id_1” has

above styling property

 We can also distinguish styling using same id for

different element

 e.g p#id_1{font-size:12px;},
a#id_1{font-size:15px;}
Basics of css
• Applying Style using class attribute of element
e.g.
class_1 {some property}

• In this all element which contain class=”class_1”

has above styling property

• We can also distinguish styling using same class

for different element e.g.
p.class_1 {font-family:Arial}
a.class_1 {font-size:15px}
DOM HTML source
DOM
Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

Jquery Introduction

•What is the need for jQuery?

•Jquery is javascript frame work which is helpful to

overcome of disadvantage of core javascript

•In core java script to build a small functionality

we have to write bigger code,but in jquery it is
Opposite- ”write less do more”
Jquery Basics

There are mainly 5 parts of jquery

•Dom

•Events

•Effects

•Ajax

•Plugins
Dom Selector

•We have seen how CSS is applied to DOM

•jQuery uses almost same format as CSS selectors

•Following slides shows selectors with Core

javascript and their jQuery equivalent
 DOM
DOM-selector

document.getElementById(”id”) $(”#id”)

document.getElementById(”div_1”) $(”#div_1”)
Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom selector
document.getElementByTagName(”element”) $(”element”)

document.getElementByTagName(”p”) $(”p”)

Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom-selector

$(”div#child_1,p.p_child_1,div.div_2”)

Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom Selector
Selecting element using class $(”.div_2”)

Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 $(”div:first”) $(”div:last”)

Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom-traversal
$(”#div_1”).find(”p”) or $(”#div_1 p”)

Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom-Traversal
$(”#div_1”).children();

Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom -Traversal

$(”#child_1”).siblings()

Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom traversal
$(“#div_3”).parent()
Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

 Dom-traversal

$(”.span_child_2”).parent().parent()
Body

Div id=”div_1” Div class=”div_2”

Div id=”div_3”
Div id=”child_1” P class=”p_child_1” Span id=”span_child_1”

Span class=”span_child_2” P id=”p_child_2”

Attributes

•$(“div”).attr(“id”) // returns id

•$(“div”).attr(“id”, “hello”) // sets id to hello

•$(“div”).attr({id: “foo”, name: “bar”})

•$(“div”).removeAttr(“id”);
Classes and manipulation
•$(“div”).addClass(“foo”)

•$(“div”).removeClass(“foo”)

•$(“div”).hasClass(“foo”)

•$(“div”).append(“<p>Hello</p>”)

•$(“div”).prepend(“<p>Hello</p>”)
Dom-css
We can add Css to any dom element

•$('div').css(properties)

$
('div').css({'backgroundcolor':'red','color':'white'})

•$('div').css(name,value)

$('div').css('backgroundcolor','red')
Dom-other

•$(“div”).html()
•$(“div”).html(“<p>Hello</p>”)
•$(“div”).text()
•$(“div”).text(“Hello”)
•$(“div”).val()
•$(“div”).val(“Hello”)
Events
•$(document).ready(function() { ... })
•This events occurs when dom is loaded .
i.e. when page is loaded or reloaded.
Bind events

•$(“div”).bind(“click”, function() { ... })

• Alias: $(“div”).click(function() { ... })
•This event is similar to click event
•In jquery click,and other event write on above 2
ways
•This is bind event means when click event
happens we have to do certain task.
•We bind some task
Trigger

•$(“div”).trigger(“click”)
Alias: $(“div”).click()

•It is similar to click events but in this no task

•Is binded it just trigger an events

Chaining of events/methods

$(”div”).css(”background-color”,”red”).slideUp()

$(“div”).siblings().css(”color”,”yellow”)

$(“div#id”).parent().parent().parent();

$(“div”).css(”..”,”..”).css(”..”).css(”...”);
List of events
• blur(),blur(fn)
• change(),change(fn)
• click(),click(fn)
• dblclick,dblclick(fn)
• submit(),submit(fn)
• focus(),focus(fn)
• mouseover(),mouseover(fn)
• mouseout(),mouseout(fn)
Other Events
hover(over,out)

Simulates hovering (moving the mouse on, and off, an

object). This is a custom method which provides an
'in' to a frequent task.

toggle(fn1,fn2,...)

toggle among two or more function calls every other

click.