Download Lecture14_JqueryforBeginners

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

page
1
page
2
page
3
page
4
page
5
page
6
page
7
page
8
page
9
page
10
page
11
page
12
page
13
page
14
page
15
page
16
page
17
page
18
page
19
page
20
page
21
page
22
page
23
Document related concepts
no text concepts found
Transcript 
jQuery for Beginners
CDES222: Basic WebDesign
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
How jQuery Works
jQuery: The Basics
This is a basic tutorial, designed to help you get started using jQuery. If you don't have a test
page setup yet, start by creating the following HTML page:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
// Your code goes here.
</script>
</body>
</html>
The src attribute in the <script> element must point to a copy of jQuery. Download a copy of jQuery from
the Downloading jQuery page and store t jquery.js file in the same directory as your HTML file.
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
p
li
document.getElementsByName(”ul");
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 given function
$(document).ready(function(){
//Script goes here
});
OR
$(function(){
//Script goes here
});
Basic selectors
• 
• 
• 
Tag Name
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())
Examples:
$("img").attr("src")
• 
• 
• 
• 
$("selector").attr(propertie
s)
• 
• 
$("selector").removeAttr(a
• 
ttr)
$("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()
• 
•
var h1_list = $("h1").get()
•
$("select").find("
option[value='india']")
$("selector").each(function(){
$(this).addClass('title');
});
$("selector").get()
$("selector").get(index)
$("selector").find("selector")
$("selector").each(function(){
$(this).xxxx();
});
•
var h1 = $("h1").get(2)
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()
For more info.
jQuery Essential Training
http://www.lynda.com/jQuery-tutorials/jQuery-Essential-Training/183382-2.html
Resources: jquery.com
Related documents