Scribd
Upload
0 views

Module 4.2

Uploaded by

116Tanzeel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

Module 4.2

Uploaded by

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

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

• jQuery is a lightweight, "write less, do more“ JavaScript library


jQuery

•Adding jQuery to Your Web Pages


•There are several ways to start using jQuery
on your web site.
1.You can Download the jQuery library from
jQuery.com
2.Include jQuery from a CDN, like Google
• Downloading jQuery
• There are two versions of jQuery available for
downloading:
1.Production version - this is for your live website
because it has been minified and compressed
2.Development version - this is for testing and
development (uncompressed and readable code)
• Both versions can be downloaded from jQuery.com.
• The jQuery library is a single JavaScript file, and you
reference it with the HTML <script> tag.
• <head>
<script src="jquery-3.4.1.min.js"></script>
</head>
• jQuery CDN
• If you don't want to download and host
jQuery yourself, you can include it from a CDN
(Content Delivery Network).
• <head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/3.4.1/jquery.min.js"></script>
</head>
jQuery Syntax
• The jQuery syntax is tailor-made
for selecting HTML elements and performing
some action on the element(s).

• Basic syntax is: $(selector).action()


• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the
element(s)
• Examples:
• $(this).hide() - hides the current element.
• $("p").hide() - hides all <p> elements.
• $(".test").hide() - hides all elements with
class="test".
• $("#test").hide() - hides the element with
id="test".
• To select all elements - $("*")
jQuery / DOM comparison
DOM method jQuery equivalent
getElementById("id") $("#id")
getElementsByTagName("tag") $("tag")
getElementsByName("somename" $("[name='somename']")
)
querySelector("selector") $("selector")
querySelectorAll("selector") $("selector")
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
• Introduce a jQuery function by using the below below
given function.
$(document).ready(function(){
//Script goes here
});

This is to prevent any jQuery code from running before the document
is finished loading (is ready).Here are some examples of actions that
can fail if methods are run before the document is fully loaded:

1.Trying to hide an element that is not created yet

2.Trying to get the size of an image that is not loaded yet

1.html
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)")

• 2.html
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:button")
• 3.html
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)")
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]")
• $("selector[attribute*=valu e]")• $("p:[name$=graph]")

• $("p:[name*=para]")
Set and Remove attributes
Syntax: Examples:
• $("selector").attr(properties) • $("img").attr({
"src" : "/path/",
"title" : "My Img"
• $("selector").removeAttr(attr) });
• $("div").removeAttr("class“)

• Jquery Selectors List:

• https://www.w3schools.com/jquery/jquery_ref_selectors.asp
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")
Examples

var height = $('div#intro').height();


var src = $('img.photo').attr('src');
var lastP = $('p:last').html()
var hasFoo = $('p').hasClass('foo');
var email = $('input#email').val();
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');
});

4.html
jQuery Event Methods

• What are Events?


• All the different visitors' actions that a web page
can respond to are called events.
• An event represents the precise moment when
something happens.
• Examples:
• moving a mouse over an element
• selecting a radio button
• clicking on an element
1. Mouse Events: click, dblclick, mouseenter,
mouseleave.
2. Keyboard Events:keypress, keydown, keyup
3. Form Events: submit, change, focus, blur.
4. Document/Window Events:load, resize,
scroll, unload.
jQuery Syntax For Event Methods
• To assign a click event to all paragraphs on a
page, you can do this:
• $("p").click();
• The next step is to define what should happen
when the event fires. You must pass a function
to the event:
• $("p").click(function(){
// action goes here!!
});
5.html
Events
• bind()
• unbind()
• toggle()

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

• 6.html
jQuery Effects - Animation
• The jQuery animate() method is used to create
custom animations.
• Syntax:
• $(selector).animate({params},speed,callback);
• The required params parameter defines the
CSS properties to be animated.
• The optional speed parameter specifies the
duration of the effect. It can take the following
values: "slow", "fast", or milliseconds.
• The optional callback parameter is a function
to be executed after the animation completes.
$("#block").animate({
width: "+=60px",
opacity: 0.4,
fontSize:"3px",

borderWidth: "10px"
}, 1500);
Chaining
• Most jQuery methods return another jQuery
object - usually one representing the same
collection.This means you can chain methods
together:
$('div.section').hide().addClass('gone');
$('h1').fadeOut(1000).slideDown()

7.html

You might also like