19.05.2017
Friday.
First we download and extrect the jquery zip file.
⟹JQuery means:
➡jQuery is a lightweight, "write less, do more", JavaScript library.➡The purpose of jQuery is to make it much easier to use JavaScript on your website.
➡jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
➡jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
➡The jQuery library contains the following features:
⇒HTML/DOM manipulation
⇒CSS manipulation
⇒HTML event methods
⇒Effects and methods
⇒AJAX
⇒Utilities
⟹Why we use jQuery?
➡There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.➡Many of the biggest companies on the Web use jQuery, such as:
⇒Microsoft
⇒IBM
⇒Metflix
⟹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)
$(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".
⟹The Document Ready Event
$(document).ready(function(){
// jQuery methods go here...
});
➡This is to prevent any jQuery code from running before the document is finished loading (is ready).
➡It is good practice to wait for the document to be fully loaded and ready before working with it.
➡This also allows you to have your JavaScript code before the body of your document, in the head section.
$(function(){
// jQuery methods go here...
});
⟹jQuery Selectors
➡jQuery selectors allow you to select and manipulate HTML element(s).➡jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.
➡It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
➡All selectors in jQuery start with the dollar sign and parentheses: $().
⟹The element Selector
➡The jQuery element selector selects elements based on the element name.You can select all <p> elements on a page like this:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
⟹The #id Selector
➡The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.➡An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
➡To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
⟹The .class Selector
➡The jQuery class selector finds elements with a specific class.➡To find elements with a specific class, write a period character, followed by the name of the class:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
⟹What are Events?
➡All the different visitor's 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
⟹jQuery Syntax For Event Methods
➡In jQuery, most DOM events have an equivalent jQuery method.➡To assign a click event to all paragraphs on a page, you can do this:
$("p").click(function(){
// action goes here!! });
Commonly Used jQuery Event Methods
⟹$(document).ready()The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.
⟹click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:
$("p").click(function(){
$(this).hide();
});
⟹dblclick()
$("p").dblclick(function(){
$(this).hide();
});
⟹mouseenter()
$("#p1").mouseenter(function(){alert("You entered p1!");
});
⟹mouseleave()
$("#p1").mouseleave(function(){alert("Bye! You now leave p1!");
});
⟹mousedown()
$("#p1").mousedown(function(){alert("Mouse down over p1!");
});
⟹mouseup()
$("#p1").mouseup(function(){alert("Mouse up over p1!");
});
⟹hover()
$("#p1").hover(function(){alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
⟹focus()
$("input").focus(function(){$(this).css("background-color", "#cccccc");
});
⟹blur()
$("input").blur(function(){$(this).css("background-color", "#ffffff");
});
⟹The on() Method
$("p").on("click", function(){$(this).hide();
});
..........................................................................
No comments:
Post a Comment