Descrição: this is a wonderful piece of shit, enjoy! ti les more! javascript jquery, scipting! anevase vathmo gamoto!
Ejercicios de JQuery resueltos, establecidos por nivel de dificultad de menor a mayor
Full description
this is a wonderful piece of shit, enjoy! ti les more! javascript jquery, scipting! anevase vathmo gamoto!
Descripción: Chuleta para imprimir y tener mano con un buen resumen de los selectores de CSS y JQuery. Están distinguidos con un puntito de color los que funcionan en cada uno o en ambos. ¡Esperamos que te sea...
Ejercicios de JQuery resueltos, establecidos por nivel de dificultad de menor a mayorDescripción completa
Deskripsi lengkap
jQue jQ uery ry - I nt ntro rodu duct ctio ion n Welcome Welcome to to the odys s ey with jQuery! jQuery is a popular JS library developed by John Resig. In this journey we will explore
the basics of jQuery that includes,
Selectors and Filters
Event Handling
DOM Manipulation AJAX Utilities
Animations Plugins
jQueryUI and jQuery mobile
What is jQuery?
jQuery is a JavaScript library. It is a free, highly featured, open source software jQuery is designed to make client-side programming of HTML simple with easy-to-use API .
The gene g eneric ric princi principl ple e of jQuery jQuery i s Find something and do something to it using pre-writtern Javascript
How to find something? What can we do to it? All this will be discussed in upcoming cards.
Adv A dvan antt a ge ges s of j Qu Quer ery y
compatibility including IE6. Cross B ro rowse wser r compatibility Open Ope n source sourc e and offers a lot of free plugins. (<100KB) and can be easily included in any application. Lig ht we weig ig ht (<100KB)
S implified client s ide scr ipting that updates UI instantly in response to user action (e.g: fadeIn ,fadeOut, ...).
AJAX Support enabling exchange of data with server and update a part of the
webpage without refresh. Animations and a lot of effects to play with.
Using jQuery - Method 1 There are two methods to include jQuery in your page. Method 1: The whole jQuery library is present in a single .js file. Download the jQuery .js file from the official website and include it in your page inside the script tag. Example: <script src="C:\Users\JQuery\jquery-3.2.1.min.js">
//Include the path of the js file in src attribute.
Using jQuery - Method 2 Instead of downloading the .js file, you can also include the .js file from CDN(Content Delivery Network). There are a lot of famous CDN available. Example : Google CDN: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> Microsoft CDN: <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
Advantage of using CDN is that, the user might already have the js file in the cache. Hence the brows er will load the js file from cache instead of downloading. This makes the page load fast. Now you might have a question... Where should I code? You can include jQuery code inside the script tag of html file or create a .js file with the code and include that file in the html page using script tag.
jQuery Basic Syntax The syntax for writing a jQuery code is: $(selector).action()
$ - used to access jQuery. selector - identifies the HTML element on which action needs to be performed. action() - jQuery event call that will perform a specific task.
All the jQuery code must be executed only after the page loads completely . Else, the selector will not be able to find the required HTML element from the page. All the jQuery code will be written inside following function, as it executes only after the page loads completely. $(document).ready(function(){//some code});
Quick Fact
The ready function can also be writtern by simply using $(function(){ //some code });
By now you must be familiar with jQuery syntax but wondering how to use Selector ? There are three ways to use selector:
Element selector Id selector Class selector
All selector should have a $ and a parentheses. However, each method has its own advantage and usage. Let's discuss each of these in detail in next few cards.
Element Selector and ID Selector
Element selector Consider you want to select all paragraph elements in a page and do something, in this case element selector can be used. A ny valid HTML tag, can be us ed ins ide the
parenthes es . Example: $("p")
ID selector If you want to select only a particular element in a page, you can go for Id selector. ID
must be unique throug hout the pag e. Example: $(#matrix) //to select div tag with id matrix
Class Selector If you want to select a group of elements with a particular class name , use class selector.
Examples:
To select all tags with class fresco - $(".fresco")
To select all the elements, you can use * as a selector, - $("*")
To use combination of more than one selector - $("p, #matrix, .fresco")
In addition to these basic selectors there are also selectors with special functionality. You can find them at api.jQuery.com
Now think of a s ituation where you want to s elect only the firs t anchor tag in a page or the last
tag of the pag e that has no id or clas s . jQuery has a collection of filter functions for this scenario. After selecting something from the page, you can filter them based on a condition. Let us see the usage of some filters.
first() eq() filter() not()
eq() Every tag in the HTML page has a index that starts from zero. Take a look at the following code to get a better understanding of indexing in tags
//index 0 - div tag
Fresco Play
//index 0 - p tag
Fresco Talk
//index 1 - p tag
index
//index 1 - div tag
Fresco games
//index 2 - p tag
Usage: If you want to select a the third
tag then, use $("p").eq(2)
slice() and first() slice() This is similar to eq() but selects a range of elements using their index Usage To select all the
tags between the index 2 and 5 : $("p").slice(2,5)
first() This is used when there is a need to select only the first element from a selected group of elements. Usage: $("div").first() Similarly last() is used to filter only the last element
filter() filter() This will take a parameter as the filter condition and apply filter to it based on the parameter . The selection would result in elements that matches the condition Usage
Take a look at the following code. If you need to select only the
tags with class new, then the select statement will be $("p").filter(".new")
Fresco Play
Fresco Talk
index
Fresco games
If you need to select only the
tags without class new, then the select statement will be $("p").not(".new")
Event Handling in jQuery
Events are actions that are performed by the user or the browser in a web
page. For example a mouse click, keypress are the events performed by a user and page load is an event that is performed by the browser.
Events do the real magic in making the web page dynamic. Event handlers are the functions that are executed when an event occurs.
Are you excited to know how does jQuery handles events? Keep going.
You can associate any element in a HTML document with an event. Just choose the target element with the help of selector and then use the required event using dot operator Some frequently used events are: click(), focus(), blur(), hover(), etc
jQuery Events - Usage To add a click event to an element with id "fresco": $("#fresco").click()
Now you should specify what should happen when the event occurs. This should be done by passing a function to the event
$("#fresco").click( function(){ console.log("This is an event"); });
Let us explore some important methods related to events in upcoming cards.
on() Method Consider a scenario where you want to perform multiple actions on single element. This is where on() method comes into play. It helps in adding one or more event handlers to an element.
Here the parameters are not mandatory. This will attach the on() method to the corresponding parent element and the selector parameter will be a child element.
on() Method - Examples S ing le event handler $("div").on("click", function(){ console.log("using on() with single event handler"); });
Multiple event handler $("p").on({ click: function(){ console.log("This is click event"); }, mouseover: function(){ console.log("This is hover event"); }
});
In on() method, if the selector is not passed then it is called Direct event else it is called Delegate event . Event Delegation is the process of adding an event to a parent element which will be fired only when the selector parameter in on() function matches with the child elements(decendence). Advantage of using this is that the event handler will not only be appended to the existing decendence but also to all the decendence that will be added in future
Event Delegation - Example This example will demonstrate how event delegation in resourceful. Codepen-
Event Delegation Here there are only two elements in the list initially and the on method will add
event handlers to them. A new item is added only after the on() method executes but still the jQuery appends the event handler to the newly added elements.
This explains the advantag e of us ing the event delegation in webpag es.
off() Method Now you know how to add a event handler to an element, what if you want to remove a event handler from an element ? Here comes off() method which will do that job. Usage This method accepts three parameters, the event name, selector and the event handler . These parameters are not mandatory. $("body").off( "click", "#fresco", myfunction );
You can also use $("body").off() to remove all the event handlers associated with the selector. Similarly $("body").off("click"); will remove all the click events.
preventDefault()
Some elements in HTML have default behavior attached to them, such as a anchor tag opening an url in the browser.
In case you want to override that behavior in your page then jQuery helps you with preventDefault() method. This method has no parameters. Just call the method wherever required and the default action of that element will be terminated.
For the complete set of events and methods available in jQuery refer jQuery-Events Now you must be familiar with event handling concepts of jQuery. Le t us move to another important aspect of jQuery, the DOM manipulation. jQuery allows you to add, update, read and delete DOM elements . Well, the good aspect is all these functions can be performed with less amount of coding in jQuery. You will explore the usage of some important DOM manipulating methods in next few cards.
html() This method is used to read the content of any element in the HTML document and return the text including the markup tags . Usage: On clicking a button, and alert message "
Welcome to jQuery course
" will be displayed. Even the markup tages are displayed as it is. //script $("button").click(function(){ alert($("p").html()); }); //HTML
Welcome to jQuery course!
In case you want only the text, not the markup then use text() method.
Thes e methods can be us ed not only to read but also to set values to elements.
val() This method can be used to read from or write to a form element in the webpage. val()method used without any parameter will read values and the same can be used to write when used with a parameter. Usage
To read : On button click, val() will return the value present inside the input tag and display in console $("button").click(function(){ var s = $("input").val(); console.log(s); });
To write: On button click, val() will set the parameter value to input element $("button").click(function(){ $("input").val("Winter is comming"); });
append()/prepend() Just like the name states, these are used to add content to the HTML elements. append() will add the content to the end and prepend() will add content to
the beg inning . Usage: This will add new content at the beginning and end of the
element. //script $("p").append("new content at end. "); $("p").prepend("new content at beginning. "); //HTML
Existing text
remove() This is used to delete the selected element and all its child element If you need to delete only the child element then use empty() method. Usage: $("#button_1").remove(); jQuery is equiped with a lot of animations that can make your page divine. There are a lot of ready made methods that helps in handling effects. Let us take a look at some of them here
Fade animation Fading is one of the most commonly used animation in webpages. jQuery offers four types of fading animations, they are: fadeIn(): The element is initially hidden and then made visible to user. fadeOut(): The element is initially visible and then hidden from the view. fadeToggle(): This is used to switch between fadeIn and fadeOut. fadeTo(): This is used to specify how much the element should fade (opacity). Check out the usage of Fade animation at [Codepen.io](Usage: https://codepen.io/anon/pen/EmRYRo) . Fork the pen and play wi th the animation
effects.
Slide Animation Slide is again another commonly used animation. There are three built in slide animation:
slideIn()
slideOut()
slideToggle()
Check out the Usage of slide annimation at codepen.io
stop() Method In case you want an animation to stop in the middle of execution this method can be used.
delay() Method You can also use multiple effects to a single element. They will be executed in a queue fashion. To add time interval between two effects in a queue, this method can used. Usage: $( "div ).slideUp( 500 ).delay( 600 ).fadeIn( 300 );
Animate() On top of ready to use animations, jQuery allows creating your own animation using animate() method
parameter is mandatory and mentions the css property that has to be animated. animationSpeed method is optional and takes values like s low, fast, or milliseconds . callbackMethod is optional and specifies the function that has to be executed after the animation ends.
Y ou can also manipulate multiple cs s properties at a time. Just call multiple animate() methods and jQuery will execute them in queue fashion.
R elative values for c s s properties can als o be us ed. e.g: to increase the height by 10px relative to existing height, then use height+=10px . Consider you want have a piece of text that is to be displayed to the users. But it has a lot of blank space at the beginning and end.
Instead of writing separate code for that, you can make use of jQuery's utility function $.trim().
In order to help the developers with coding jQuery offers a number of utility
methods. They are methods without any s electors. Syntax: $.nameSpace They help in reducing regular programming labor .
Utililty Functions Let us see some of the commonly used utility functions $.isArray() will return wheather the given variable is a arrray or not. $.isPlainObject checks is the object is created using new keyword or not. $.merge() combines two array elements into one. $.each() used to iterate over arrays and objects.
Method $.noConflict()
This is one of the important utility method used widely. Nowadays developers user more than one stack to create a page. Some other stack might make use of the $ symbol of jQuery which might result in conflict. To avoid such conflict, use the $.noConflict() utility method. This allows you to replace the $ with keyword jQuery in the script
$.noConflict(); jQuery( document ).ready(function( $ ) { // JQuery code. Here note that $ is replace by jQuery in ready function });
AJAX Stands for Asynchronous JAvaScript and XML This helps in interchanging data with the server without pag e reload . Popular websites like Gmail and facebook uses AJAX. With the help of jQuery and AJAX, you can load text, HTML, J S ON and XML files fr om the s erver dir ectly into the page. There are three important AJAX methods used in jQuery: - load(), get(), and post().
load() This is used to load a text or html file from remote server and directly append them to the page. Usage:
$(selector).load(URL,data,callback);
URL is the mandatory field, which is file location address.
data and callback are optional parameters. They specify what function to be executed after the file load.
The callback fuction can have three parameters responseTxt - contains resulting data from server o
o
statusTxt - call status: success/fail
o
xhr - XMLHttpRequest object: Eg: 404 error
get() This method also retrieves data from server just like the load method. While load will directly inject the retrieved data into DOM, get() just retrieves the data and allows user to manipulate it.
get() is more generic method while load is restricted to a selector.
load can handle only text or html files where as get() does not have that
restriction. Usage: $.get(URL,callback);
URL is the mandatory field, which is file location address. callback is an optional function which will execute after file load. The callback method has 2 optional parameters. They are: data which has the content of the file loaded from the server. o
o
status which states whether the load is a success or fail.
post() This method is also used to send request to server, along with some data . Syntax: $.post(URL,data,callback);
URL is the mandatory field, which is file location address.
data is the information sent along with the request.
callback is an optional function which will execute after file load. This too has data and status as parameters.
You can take a look at all the available ajax jQuery methods here: jQuery-AJAX methods
jQueryUI Introduction jQueryUI is also a javascript library built on top of jQuery. It has a rich set of plugins for the developers to make a highly interactive website with less effort.
To include jQueryUI library in your page download the .js file and .css file from the jQueryUI website or use CDN links. The same procedure you followed for jQuery which you must be familiar by now.
Once you include the jQueryUI in your page, you have acces s to the big pool
of plug ins the jQueryUI offers .
You will be introduced to some basic plugins and their demos in next few cards. Interaction is something that makes an activity fun, let it be a presentation or a website. jQueryUI offers some built in plugins for interactions such as s electable, s ortable, droppable, res izable and draggable . Let us see the usage of some of these plugins in next few cards. Interaction is something that makes an activity fun, let it be a presentation or a website. jQueryUI offers some built in plugins for interactions such as s electable, s ortable, droppable, res izable and draggable . Let us see the usage of some of these plugins in next few cards.
draggable() and resizable() draggable() If you want to make a element dragable in the page then use this plugin. Syntax: $.(selector).draggable(parameters)
Parameters are key value pairs that may or may not be added to a draggable element Eg: appendTo: "body", scroll: "false" etc. Check out the usage at: Codepen.io
resizable() Similarly to make an element resizable, this plugin is used. Syntax: $.(selector).resizable()(parameters)`
Parameters are key value paires such as: maxWidth:20px, maxHeight:50px, etc.
Animation Effects - jQueryUI jQueryUI offers few special animation plugins. Using these plugins, you can add visual effects to your page with less coding effort. Some jQueryUI effects are
addClass(),
s witchC las s (), removeC las s (), eas ing (), etc., addClass() This effect adds a class to an element and animates all the changes that the element undergoes. Syntax: $(selector).addClass( "className",parameter );
The parameters include, duration , callbackfunction, etc. Similarly, you can use removeClassto remove any class and animate the changes.
Widgets - tabs()
This widget allows you to add tabs to your pages. All the tab heading should be included within an or
