Jquery free download - jQuery Joyride, Learn jQuery, Tutorial for jQuery, and many more programs. Jquery slider free download - Jquery Slider Shock, WOW Slider, Amazing Slider, and many more programs.
last modified July 15, 2020
In this tutorial, we are going to learn the basics of jQuery. We will present the jQuerylibrary, show how to download and include jQuery, explain various jQuery selectors, showhow to bind events, show various jQuery effects, an work with asynchronous events.
When we want to create a website, we need to use specific technologies. HTML creates the structureof a web page. CSS is responsible for the look of the web page. JavaScript brings dynamicityto the web page.
HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript form a triad of cornerstone technologies for the World Wide Web. jQuery is an abstraction of JavaScript;it makes the work with JavaScript much more easier.
HTML Document
A website consists of multiple web pages. Each web page is an HTML document.An HTML document is a textual document whose structure is defined by theHyperText Markup Language. To create a document structure, we use HTML tags such as
<div> , <h2> , or <body> . HTML documents have a .html or.htm extension.
Web browsers allow us to see the HTML source of each of the HTML documents.A HTML document consists of two parts: head and body. HTML elements are organized in a hierarchical structure — HTML tags have their parents, children,and siblings.
Document Object Model (DOM)
The Document Object Model (DOM) is a programming interface for HTML documents.It defines functions for manipulating the document structure, style, and content. The DOM represents an HTML document as a tree structure of nodes, wherein eachnode is an object representing a part of the document. The nodes are objectsthat have properties and methods. These entities can be accessed via JavaScriptand its libraries such as jQuery.
jQuery
jQuery is a JavaScript library which is used to manipulate DOM.With jQuery, we can find, select, traverse, and manipulate parts of a HTML document. These parts are also called DOM elements.jQuery is the most popular JavaScript library in use today. It is estimated thatit is used on two-thirds of the top 10 million websites. jQuery was originallycreated by John Resig. jQuery is free, open-source software licensed under the MIT License.
The principles of developing with jQuery are:
How To Get JqueryChoosing jQuery Library
jQuery library is essentially a small file. In order to use jQuery in our projects, we either dowload the file from the project's website or use a Content Delivery Network (CDN).
There are several options to choose from. Firstly, there are multiple versionsof jQuery available. The version of the library is mentioned in the name ofthe file. There are currently three version branches: 1.x, 2.x, and 3.x. For educational purposes, it is best to choose the most recent version ofjQuery library. Then we need to choose between the production and developmentversion of the library. The production version is compressed and has a
min word in the name of the library. The compressed or minifiedversions have their size reduced but otherwise provide the same functionality.The development versions are human-readable with comments.
The first file is a development version of jQuery library version 3.1.1. The second file is a production version of jQuery library version 3.1.1.
In addition, there are so called slim versions of the library. The slim versionshave a
slim word in the name of the library. They excludeAJAX functionality, effects, and currently deprecated code.
The first file is a slim, development version of jQuery library version 3.1.1.The second file is a slim, production version of jQuery library version 3.1.1.
In this tutorial, are are going to use a minified version of jQuery 3.1.1.
Including jQuery in HTML Document
jQuery library can be included in a document by linking to a local copy or to one of the versions available from public servers. To include the jQuery library, we usethe
<script> tag. The file is included in the head of the document,or at the bottom, usually before the </body> tag.
In this case, we include a local copy of the jQuery library.
Here, we include the library from a publicly available repository on
code.jquery.com .
There are several well-known public repositories for jQuery; these repositories are alsoknown as Content Delivery Networks (CDNs). Using CDNs can bring some performance benefits.
Here we have jQuery, Google, and Microsoft CDNs.
Choosing a Text Editor
A good text editor will help us write code efficiently. Text editorsprovide syntax highlighting, code completion, automatic indentation andmuch more. Text editors that support jQuery include Brackets, Sublime Text, Kwrite, Gedit, Notepad++, PSPad, or TextMate.
The above figure shows a small HTML document utilizing jQueryin a Brackets text editor. Brackets is a modern text editor forweb development. It is written in JavaScript. It was specifically created for web designers and front-end developers.
When the Document is Ready
When the document is ready, that is, its DOM has been built andit is safe to manipulate it, jQuery triggers a
$(document).ready() event. We put our jQuery code in the handler of this event.
These are document ready event handlers; both are equivalent. The second oneis the recommended way to create a jQuery document ready event handler.
simple.html
Jquery File Download
The example appends a
<div> tag at the end of the <body> tag.
The
$('body') selects the <body> tag in the document.The append() method appends a <div> tag at the end ofthe <body> tag.
Testing and debugging
Browsers contain tools for developers to do testing and debugging. The developer console is started with Ctrl + Shift + Iin Opera, Firefox, and Chrome.
In the console window, we can see error messages, output from the
console.log() method;it can be used for evaluating JavaScript statements, inspecting and logging objects and properties.In the above figure, we can see the output of the jQuery html() method, which gets the HTML codeof the <body> element. The output is shown in the console window.
The
console.log() method can be used for debugging output.
In the above picture we can see a jQuery syntax error being caught and shown on the developer console window.
jQuery selectors
jQuery selectors are used to select elements in an HTML document that meet certain criteria. The criteria can be their name, id, class name, attributes or a combination of them.
The following is a partial list of available selectors:
In the following example, we are going to work with the
:root selector, which selects the <html> tag.
In the example, the background of the document is changed to gray colour.
With the
:root selector, we select the root element of the document and add a class to it with the addClass() method.
selecting_elements.html
In this example, we have a list of operating systems. The list has a bluedotted border and its every odd element has a gray background.
The
$('#mylist') selector selects a tag with id equal to 'mylist'. With the css() method, we modify the look of the tag.
With the
$('li:odd') selector, we select all odd <li> tagsand later modify them with the css() method.
In the figure, we can see a dashed border around the list and a blue text colour of every second list element.
Chaining methods
jQuery allows to chain method calls. A chain of methods is a consecutivesequence of jQuery method calls on a jQuery object.
In the example, we have a panel which is shown and hidden twice.A panel is shown with the
show() method and hiddenwith the hide() method.
Here we see a chain of four method calls. Each of the calls returnsa jQuery object on which we can call another method.
Getting and setting content
The
text() method gets the combined text contents of each element in the set of matched elements, including their descendants, or sets the text contents of the matched elements.
getting_setting_content.html
In the example, we get the content of the
<h2> tag andset it to the <h3> tag; in other words, we copy the contentfrom the first element to the second.
With the
text() method, we get the content of the <h2> tag.
In this line, we set the previously retrieved content to the
<h3> tag.
Binding events
The
on() method plugs an event handler function for one or more events to the currently selected set of elements. An eventhandler is triggered when an even, such as button click, is launched.
In the example, we bind an event handler to a click event on a button element.
This is the button that will trigger click events.
We register a
click event for the button element. The eventtriggers a function which calls slideToggle() method ona <div> element. The slideToggle() methoddisplays or hides the matched elements with a sliding motion.
Mousemove events
A mouse move event is triggered when a mouse pointer moves over a document area.The event handler function receives an event object, which contains data relatedto the event type. In our case, it will contain x and y coordinates of the mousepointer.
mouse_move_event.html
The example shows the x and y coordinates of a mouse pointer if weposition it over the area of a
<div> element.
We will listen for mouse move events over the area of this element.
The coordinates will be displayed in this logging
<div> element.
We bind an event handler to the mouse move event. Inside the event handler, we determine the x and y coordinates with the
pageX and pageY properties and update the logging element with the text() method.The mousemove() method is a shortcut for the on('mousemove', handler) method.
Event source
An event source is the element that triggered an event. Inside the event handler, we can refer to the event source with the
$(this) syntax.
In the example, we have three buttons. Each of the buttons is has the same event handler. When we click on a button, a messageis shown; it tells which button was clicked.
These three buttons have the same event handler.
A class selector
$('.mybtn') chooses all the three buttons.We attach a click event handler to the buttons. We refer to the eventsource with the $(this) construct and determine its labelwith the text() method. The name of the button is used to build a message, which is displayed in the <div> elementbelow.
In the figure, we can see which button was clicked in the messageshown below the buttons.
Removing elements
The
remove() method removes the set of matched elements from the DOM.
remove_element.html
In the example, we have two buttons and six panels. The first button removes the firstpanel and the second button the last panel.
The
div:first selector selects the first <div> element and the remove() method removes it from the DOM.
jQuery is() method
The
is() method checks the current matched set of elements against a selector, element, or jQuery object and returns true if at least one of these elements matches the given arguments.
In the example, we have four panels. Clicking on the panel the panelstarts to vanish. The third panel does not vanish.
The
$(this) syntax refers to the event source, that is, the panelon which we have clicked. With the is() method we check if the element is Panel 3;in case it is Panel 3, we print a message to the console and do not hide it. Other panels are hidden with the hide() method.
Effects
In this section, we are going to show some basic jQuery effects.
jQuery sliding effectHow To Use Jquery
The
slideUp() method displays the matched elements with a slidingmotion upward and the slideDown() method with a sliding downmotion. The first parameter of the methods is duration; it is a string or a number determining how long the animation will run. The string canbe either 'slow' or 'fast' ; the default value is 400 ms.
sliding.html
In the example we have two button. One button will slide upa panel and the other one will slide down the panel.
The
slideUp() method animates the chosen elementin a sliding up motion; the element disappears from the window..
The
slideDown() method animates the elementin a sliding down motion, the element appears on the window.
The animate() method
The
animate() method performs a custom animation on a set of CSS properties. The first parameter of the method is called properties;it is an object of CSS properties and values that the animation will move toward. The second parameter is duration.
In the example we have two buttons. The first button moves the panel to the leftand the second moves it to the right.
This moves the panel slowly to the left by 250 px.
This moves the panel slowly to the right by 250 px.
jQuery fading effects
The
fadeIn() method displays the matched elements by fading them to opaque. The fadeOut() method hides the matched elements by fading them to transparent.
How To Download Jquery On Mac
fading.html
In the example we have two buttons. One button fades in a panel; the secondbutton fades out the panel.
This function fades out the matched element with the
fadeOut() method.
This function fades in the matched element with the
fadeIn() method.
jQuery $.get() method
The
$.get() method requests data from a server with an HTTP GET request. The request is an asynchronous GET request.
In this section, we create a Java web application. Clicking on a button an AJAX GET request is sent to a Java servlet,which responds with a message.
We have a button which sends an asynchronous GET request upon being clicked.
The first parameter of the
$.get() method is a URL string to which the request is sent. The second parameter is a callback function which is executed if the request succeeds. Inside the callback function, we set the returned data to the logging element.
MyServlet.java
This is a Java servlet that responds with a message. The message contains the current date.
Clicking on a button a message is shown in the logging element next to the button.
jQuery when() method
The jQuery
when() method executes callback functions having asynchronous events.
In the example, we have a button to hide/show all four panels. The process of hiding/showing elements takes up some time. When the task is over, the label of the button changes accordingly:from Hide all to Show all and vice versa.
A new task is created; it will take 3 s to complete.The
toggle() method displays or hides the matched elements.
The function is called when the tasked has finished.
How To Download Jquery On A Mac Os
Now, using a regular expression, we change the label of the button.
How To Download Jquery On A Mac File
In this tutorial, we have worked with the jQuery library.
You might also be interested in the following related tutorials: jQuery Autocomplete tutorial,Cheerio tutorial,Using jQuery DatePicker, andPyquery tutorial.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2020
Categories |