Html scripts for working with the jquery library. Connecting the jQuery library to Blogger
(Last update: 10.09.2017)
Hi all! Our topic for today is connection. jQuery libraries to Blogger. At the beginning, what would you like to know a little: what jQuery is and what jQuery can do, a short introduction. jQuery - JavaScript library, focusing on JavaScript interaction and HTML. The jQuery library helps you easily access any DOM element, access and manipulate the attributes and contents of DOM elements. The jQuery library also provides a convenient API for working with Ajax.
A small digression from our topic for those who do not know what JavaScript is. JavaScript is a piece of software code that is embedded in the code of a template or page and allows you to implement various effects that are not available with using HTML and CSS. That is, program sections of code are inserted into the required places in the template or page, which perform the desired task. This is JavaScript. At Blogger, we use a handy HTML/JavaScript gadget for this purpose.
Let's continue our topic. The jQuery library contains functionality useful for a wide range of tasks. However, the developers of the library did not set the task of combining jQuery functions, which would fit everywhere, since it would lead to a lot of code, most of which is unnecessary. Therefore, the architecture of a compact universal core library and plugins was implemented. This allows you to collect for the resource exactly the JavaScript functionality that would be in demand on it.
jQuery library features:
The cross-browser CSS selector engine Sizzle, which has become a separate project;
Traversing the DOM tree, including support for XPath as a plugin;
Events;
Visual effects;
AJAX - add-ons;
JavaScript plugins.
Now let's include the jQuery library for Blogger. Having connected once, you will not have to install scripts, widgets on jQuery, etc. in the future. connect the library.
How to Add JQuery Library to Blogger/BlogspotGo to the blogger control panel - Template - Edit HTML, find and add just below (or above the tag):
Before we start exploring the jQuery library, we need to connect it to our document. To do this, let's create the most simple page, without any frills – index.html, and on it we will connect our jq (short for jQuery, start getting used to it).
How to include the jQuery library? And where can I get the code?There are 2 ways to connect the library to the site. Before I begin to describe both methods, do not immediately repeat after me. First, read about these methods, and then choose the method that suits you and connect everything. Don't worry - jQuery is enabled with one line of code, so if you don't have the memory of a fish, you'll be fine.
The first method is to download from jquery.comThere is such a wonderful website - this is the official website of the library. Like any library, jq was developed by simple programmers. They realized that they could make their tongue smaller JavaScript programming, began to work long and hard - and the result was the most widespread library, beloved by web programmers.
Important! All pictures are clickable.
Connecting the jQuery library from the official website
In the pictures below I showed small pieces of code from two versions.
In principle, these are 2 absolutely identical versions. The only difference between these files is that in the jQuery compressed version, all the code is written in one line. In jQuery, which is intended for developers, all code comes with tabs and spaces and, accordingly, it can be easily read.
Since the browser (namely, the browser processes this code) does not see the difference between these two files, it is better to use the compressed version on your “live” projects, because it is much lighter (due to the absence of spaces). And as you know, the less they weigh source files sites - the faster it loads, which has a positive effect on the behavioral factor.
Block “1” - file size of the compressed version is 96 KB.
Block “2” - the file size of the developer version is 280 KB.
The full version is almost three times heavier!
Not compressed jQuery version serves to delve into this library in more detail. If you are a very meticulous developer, you can remove unnecessary functions, add yours, etc.
Personally, I have never climbed there at all; for three years there was no such need. And I’m not really a fan of reading 10 thousand lines.
You can distinguish these 2 versions by their name. In the compressed version, .js always comes before .min (in the figure this is shown in the block numbered “3”). If you have been working in web development for long enough, you have probably noticed this “trick” in other libraries.
How to connect jQuery?Yes, the connection is the same as css, only using a different tag.
Attention! All the code that you will write using jq must be written below the connection of this library. Otherwise, you will get an error and nothing will work.
The second way is to use GoogleWhy did I ask you not to rush into downloading this library? It's simple - you can connect it directly with Google.
As you know, Google is not only search system, but in this giant corporation there are many different features that are created to make the life of a programmer easier.
Google also uses a compressed version. And in this code you can find one important addition - it contains ajax technology (we'll talk about this later). This is very useful thing, and sooner or later you will need it. And if you connect the library with Google, then you won’t have to waste your time searching and connecting all the functions for ajax.
Because google - very big company, their servers will never crash, and therefore you can be completely confident that jQuery will always work on your site.
But there is one drawback - if you connect the library from Google, then when developing a site you need to constantly have access to the Internet.
Well, now that I have described both methods, you can choose the one that is more suitable for you and connect it to your html document.
TestingOnce you have included the library, it is advisable to test it. Below I have given part of the jq code - don’t go into too much detail (this will be discussed in future lessons) about what is written there, just write the same thing and look at the result.
Some text
After launching the page, the words “There is some text” should appear. And after clicking on this text, it should disappear. If everything worked out exactly like this for you, then you did everything right.
P.S. Sometimes you come across questions: “how to connect jQuery to Joomla 3?”, “how to connect jQuery to Bitrix?”, “how to connect jQuery to WordPress?”. No matter what engine you use on the site, the connection method is always the same. We put the required line into the template - and everything will work for you.This will install jQuery in the node_modules directory. Within node_modules/jquery/dist/ you will find an uncompressed release, a compressed release, and a map file.
link Downloading jQuery using BowerThe second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:
link Cross-Browser Testing with jQueryBe sure to test web pages that use jQuery in all the browsers you want to support. The site makes available virtual machines for testing many different versions of Internet Explorer. Older versions of other browsers can be found at oldversion.com.
link jQuery Pre-Release BuildsThe jQuery team is constantly working to improve the code. Each commit to the Github repo generates a work-in-progress version of the code that we update on the jQuery CDN. These versions are sometimes unstable and never suitable for production sites. We recommend they be used to determine whether a bug has already been fixed when reporting bugs against released versions, or to see if new bugs have been introduced.
link Using jQuery with a CDN link Other CDNsThe following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host ; check the site's documentation.
Note that there may be delays between a jQuery release and its availability there. Please be patient, they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.
A little hintThis site has a description of almost all the functions of the jQuery library, so if you do not understand one of the functions in the examples, you can quickly look at its description. And in order not to waste time searching for it, use the search by keys: start entering the name of the function you are interested in in the “by keys” field.
Let's get startedAfter spending some time trying to bring dynamic functionality to the pages of your site, you will find that you constantly follow the same pattern: first find one or more page elements, and then perform some actions on them, such as hiding, resizing, repositioning, transparency, etc.
Using regular javascript, each of these tasks will require dozens of lines program code(and a lot of headaches about it proper operation V different browsers). The author of jQuery designed his library in such a way that the most general tasks become trivial. For example, like this, using the $() function from the library, you can find elements on the page using various parameters:
And this is only a small part of all the possibilities for searching for elements ( full list see the rules in the selectors section). After selecting elements, you can immediately begin manipulating them; jQuery provides a wide range of methods for this (see sections on manipulations and effects). Here are a few of the most popular:
| $("#bigIt").css("height") | will return the height value of the element with identifier bigIt. |
| $("div").css("width", "20px") | will set the new width to all div elements on the page. |
| $("#bigIt").attr("class") | will return the class value of the element with id = bigIt. |
| $("#bigIt").attr("class", "box") | will set a new value for the class attribute of the element with id = bigIt. |
| $("#bigIt").html( Novie! ) | will change all html content of the element with id = bigIt to the one specified in the html method. |
| $("#bigIt").text() | will return the text inside the element with id = bigIt. |
| $(".someBox").empty() | clear the contents of elements with the someBox class. |
Thus, with just one line of code, we can find out or change the css values, attributes, html and text content of any elements on the page. Just having these features alone would make jQuery indispensable. However, this library allows you to do much more, much more.
$() functionThe function with the laconic name $() is perhaps the most important in the entire library. With its help, you can find elements on the page (as you have already seen) and add them “on the fly” new html:
// create a div element and add it to the end of the element with identifier content $("
Bang!
").appendTo("#content"); Getting the script startedBefore running the js script, you need to be sure that the part of the page from which this script will work has already been loaded. Most programmers use the onload event for this, which occurs when the entire page has finished loading:
window.onload = function () ( )
However, onload occurs after the page is fully formed, including loading all images, flash banners and videos. While the structure of the DOM tree (page elements), with which the script usually works, is ready much earlier. As a result, the script runs much later than it could. For this case, jQuery has a ready method, which is called when the DOM tree is ready:
$(document).ready ( function () ( // call required functions script ) ) ;
Method chainsAn important feature of most jQuery methods is the ability to chain them. Methods that manipulate document elements typically return these objects for further use, which allows you to write something like this:
$("#bigIt" ) .empty () .attr ( "class" , "noContent" ) ;
// as a result, the element with identifier bigIt will have all its content removed, // after which the class noContent will be set to it. these chains can consist of many more
methods. For readability, chains are often written “in a column”: $("div" ) // find all div elements .parent () // find them parent elements
.css ("heigth" , "10px" ) // set the last height to 10 pixels .fadeTo (0 , 0.5 ) // set their (div's parents) transparency to 50% .addClass ("divOwner" ) ; // let's add the divOwner class to it
This way, you can easily describe all the actions that occur with selected elements, avoiding the use of a large number of temporary variables.Working with a set of elements
| In addition to manipulating the selected elements, jQuery allows you to work with the set itself: change it, as well as work with elements individually. Let's demonstrate some of the possibilities: | $("div").parent() |
| will return the parent elements of all divs. | $("div").children() will return child elements |
| all divs. | $("#someId").next() |
| will return the element immediately after someId. | $("div").prev() |
| will return the elements in front of the divs. | $("div").eq(i) |
| will return the div element with index i in the set. | $("div").get(i) |
| will return the DOM object div, with index i. | $("div").get() |
| will return an array of DOM objects of all divs. | $("div").size() |
will return the size of the set (number of divs).
In fact, there are many more methods for working with a set; their full list can be found in the corresponding section. Note the differences between the get(i) and eq(i) methods. The first returns directly the DOM object of the element numbered i in the set (by the way, numbering starts from 0). You won't be able to apply jQuery methods to such an element, but you can apply standard ones javascript methods . The eq(i) method, on the contrary, returns i-th element
The key method on which all the others are based is the animate() method, which can be used to set various CSS properties to change smoothly:
Animate(properties, , , ) properties — list of CSS properties involved in animation and their final values. They are specified by an object, in the format (key:value), for example: (opacity: 50, width: 100, height: 200).
duration — duration of the animation. Can be specified in milliseconds or string value"fast" or "slow" (200 and 600 milliseconds).
easing — change the animation speed (whether it will slow down towards the end of execution or, on the contrary, speed up). Set by string value: "linear" and "swing" (for uniform animation and animation with acceleration). Other options can be found in plugins. callback is a function that will be called after the animation is completed. Example. Let us have
div element
with some text. We want to smoothly hide this element, replace the text, and smoothly make the element visible:
$("#mydiv" ) .animate (( height: "hide" ) , 300 ) .text ( "New text" ) .animate (( height: "show" ) , 300 ) ;
the values "hide", "show" mean the disappearance and appearance of the element due to the parameter to which they are applied.
There are separate methods that allow you to hide and show elements, as well as change their transparency. All these methods can be found in the effects section. It should also be noted that when several effects are called simultaneously, in relation to one element, their execution will not occur simultaneously, but alternately. For example, when running the following commands: $("#my-div" ) .animate (( height: "hide" ) , 1000 ) ;$("#my-div" ) .animate (( height: "show" ) , 1000 ) ;
element with id
my-div, will initially disappear smoothly from the screen, and then begin to smoothly reappear. However, animations set on different elements will be executed simultaneously: $("#my-div-1") .animate (( height: "hide" ) , 1000 ) ;. $("#my-div-2") .animate (( height: "show" ) , 1000 ) ; Ajax
$.post(url, , , ) $.get(url, , , ) url - url to which the request will be sent. data - data that will be sent to the server. They must be represented in an object, in the format: (fName1:value1, fName2:value2, ...). callback() -
custom function , which will be called after the server responds. dataType - the expected type of data that the server will send in response to the request (details).
Let's look at examples with
get method
, the use of the second method is similar. Let's make a simple ajax request: send an empty request to the server and not process the response. This can be used, for example, to count the number of times the cursor has hovered over a banner (a signal will be sent to the server for each hover).
$.get("/plusOne.php" ) ; Now, let's send the data to the server and process it. The Javascript would look like this:// A request for the page http://hostname/ajaxtest.php will be sent to the server and two parameters will be specified.
// After receiving a response from the server, the onAjaxSuccess function will be called, which will // display a message with the data sent by the server.
$.get ( "/ajaxtest.php" , ( param1: "param1" , param2: 2 ) , onAjaxSuccess ) ; function onAjaxSuccess(data) ( // Here we receive the data sent by the server and display it on the screen. alert (data) ; ) On the server, processing an Ajax request is no different from processing a regular request (as when calling
home page
site):
As a result of this request, a sign with the text “I get param1 = param1 and param2 = 2” will appear on the page
Using these methods, you can request XML, which can then be processed without problems using the usual jQuery methods. Let's say that on the server we haveNext page generating XML: Item 1 Item 2
By requesting this page using the get or post method, the received data can be easily processed:
You can learn the intricacies of connecting jQuery to a site.
CaptionsSome of the text in this article is taken from the article "Query - Next Generation Javascript" in RSDN magazine. This is one of the first articles on jQuery, thanks to which people probably learned about the library. greatest number Russian-speaking programmers. However, on this moment, some of the information in it is no longer relevant.
jQuery is a JavaScript library that focuses on the interaction of JavaScript, HTML, and CSS.
What jQuery can do
- Access any DOM element ( object model document) and not only handle, but also manipulate them.
- Work with events.
- It is easy to implement various visual effects.
- Work with AJAX (very useful technology, which allows you to communicate with the server without reloading the page, but for now we will not touch it).
- It has great amount plugins designed to create user interface elements.
How it works
First, you need to download the library itself from the developers’ website or, if necessary, unzip it and move it (the library) to the same folder where our html pages are located (this is optional, but the addresses for all subsequent examples will be written based on this structure).
Now we need to connect jQuery to the html page. For this, as you remember, there is a tag in html , which is responsible for connecting external script files (). Let's add this tag to the html page (we also connected the script.js page with js functions): * Pay attention to the file name. The jquery-1.2.6 library is used here, but you can download a more recent version, so your numbers may differ.*
So, in our folder we have an html page, a page with styles (style.css), a page with js functions (script.js) and (jquery-1.2.6.js). Let's do this example (click on the buttons):
jQuery Effects Show() Effect SlideDown() Effect Animate() Effect Let's see how this is done. On the html page we should have three rectangles (divs) and three buttons: jQuery effects Show() effect SlideDown() effect Animate() effectWe will issue appearance and make the rectangles invisible using . style.css code:
#kv1, #kv2, #kv3( width:80px; height:100px; float:left; background:red; margin:5px; color:white; display:none; )
Now the most interesting thing is that on the script.js page we write the code of the functions that will be triggered when the buttons are clicked:
function addEffect1())( $("#kv1:hidden").show(); ) function addEffect2())( $("#kv2:hidden").slideDown("slow"); ) function addEffect3())( $( "#kv3:hidden").show().animate(( fontSize:"36px" ) , 3000);
What do these functions do?
Function addEffect1() sees $ ("#kv1:hidden") and understands that she needs to find an element with id="kv1" that has the hidden property. Next she sees .show() and understands that the found element must be made visible.
Function addEffect2() sees $ (dollar sign) and realizes it's jQuery, then she sees ("#kv2:hidden") and understands that she needs to find an element with id="kv2" that has the hidden property. Next she sees .slideDown("slow") and understands that the found element must be displayed slowly ("slow") from top to bottom (slideDown).
Function addEffect3() sees $ (dollar sign) and realizes it's jQuery, then she sees ("#kv3:hidden") and understands that she needs to find an element with id="kv3" that has the hidden property. Next she sees .show() and understands that the found element must be made visible. Then she sees .animate((fontSize:"36px") , 3000) and understands that the font size needs to be increased to 36 pixels in 3 seconds (3000) (fontSize:"36px")
This is how jQuery actually works. Look at how short our functions are and imagine what they would be like if we decided to write them in pure javascript. Isn't jQuery amazing? About how to do graphic effects, animation, dragging and sorting objects and generally working with this library will be discussed in subsequent lessons.
At the end of this lesson I would like to talk about the basic concepts of jQuery. The jQuery operator syntax can be roughly represented as follows:
Where selector- an element or elements with which we will do something.
action- what exactly we will do with the selected elements. We can add any effect, css style, change the html code, etc. Any events may be listed here.
action properties- if they are provided for by the action.
That's all for today, in the next lesson we will study selectors.
