Category Archives: jQuery

jQuery is a library written in Javascript that provides a series of functionalities that would otherwise require much more code. Achieving great results in less time and space. This software is free and open source, it has a dual license under the MIT License and the GNU General Public License v2, allowing its use in free projects, and private

jQuery, Html, Programming language, Javascript, Web Page, Programming

jQuery

Monday October 7th, 2024 secarcam

jQuery

jQuery is a library of free software written in Javascript, with MIT License and GNU General Public v2, allows its use in open source projects and private

In line with the principle type less, do more

To achieve this, it allows you to write Javascript code in a simpler way, doing in a single call tasks that requeririan several lines of code

Simplifies many of the tereas common, such as the handling of the DOM, CSS properties and an AJAX call, in addition to allowing the creation of effects or animations

Installation

Download the library in its most stable version from their official website jQuery.com

We load the library in the head of our HTML code:

<head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
    <script src='jquery-version.min.js'></script>
</head>

In the example, version is the current number of version, may vary at the time of your download

It is advisable that in production you use the version min, since it is optimized for faster loading in the browser

There are also repositories CDN third-party that can be viewed on the official website of downloads, us librarian of having to update the current version of the library

However, we run the risk of having security flaws if someone outside of the introduction of malicious code in those repositories, or remain inacesibles for any reason

To include them simply modificariamos the src with the url of the repository CDN to indicate to us

Load the code

We can typically include the code of jQuery inside a script block like we do with Javascript, or use an external file .js where we include our own code

To be able to execute our instructions will be useful that the DOM of our HTML has been completely loaded, but we can execute them before that happens

$(document).ready(function(){
    //jQuery code
});

In the example we have opted to load the DOM tree when it has loaded the HTML completely, including our code inside of the curly braces

$(function(){
    //jQuery code
});

In this other example we have an equivalent version that allows us to write less code, choose the one you like the most, although the first is more clear

Basic syntax

The jQuery syntax is very similar to CSS because all of the calls are composed of a selector followed by a call

$(selector).action();

In the example we can see the $ symbol that allows us to access the elements of jQuery

The selector will allow to select specific elements within the DOM tree

The action will be a function that allows us to interact with the item selected by the selector

$(this).hide();  //hide the current selected item
$('p').hide();  //hide all the elements p
$('.test').hide();  //hide all the elements of the test class
$('#test').hide();  //hide all the elements of the id test

In the examples we have the operator this, which represents the current item selected

‘p’ a tag is HTML valid, which represents an element, here we will be able to use any of them to perform searches

When we see with more detail the selectors, we will deepen in how they should be those searches

‘.test’ uses the symbol . to refer to what follows after that is a class, in this case, the test class

‘#test’ use the # symbol to refer to that what follows is an id, in this case, the id test

Html, jQuery, Programming language, Javascript, Programming, Web Page

Selector

Monday October 7th, 2024 secarcam

Selector

A selector allows us to specify what elements we want to apply the action

There are the following types of selector:

Item
Class
Id

Item

It is possible to select an element directly according to their type of HTML tag

$('p');

In this example we have selected all of the elements of type paragraph

$(function(){
    $('buttom').click(function(){
        $('p').hide();
    });
});

In this example will be hidden all the elements of type paragraph when you press on the item type button

Class

It is used with the symbol . and allows us to select elements with a specific class

$('.test');

In this example we have selected the element of the test class

$(function(){
    $('buttom').click(function(){
        $('.test').hide();
    });
});

In this example will be hidden all the elements of the test class when you press on the item type button

Id

Used with the # symbol and allows us to select elements with an id specific

$('#test');

In this example we have selected the element with the id test

$(function(){
    $('buttom').click(function(){
        $('#test').hide();
    });
});

In this example will be hidden all the elements with the id test when you press the element type button

Practical example

<!DOCTYPE html>
<html>
<head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
    <script src='jquery-3.4.1.min.js'></script>
    <script
        $(function(){
            $('btn01').click(function(){
                $('#important').hide();
            });
            $('btn02').click(function(){
                $('.color').hide();
            });
            $('btn03').click(function(){
                $('h4').hide();
            });
        });
    </script>
    <style>
    .important {
       font-weight: bold;
       font-size: xx-large;
    }

    .color {
        color: #D5322D;
    }
    </style>
</head>

<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
   <h1>Section</h1>
   <p class='color'>Paragraph color</p> 
   <p class='color'>Another paragraph color</p>
   <p class='important'>Important paragraph</p>

   <h2>Other section</h2>
   <button id='btn01'>Remove item 'important'</button>
   <button id='btn02'>Remove items in class 'color'</button>
   <button id='btn03'>Remove all section headers</button>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

More examples of selector

$('*'); //select all items

$(this); //select the current HTML element

$('p.intro'); //select all paragraph type elements that belong to the intro class

$('p.first'); //select the first paragraph

$('ul li:first'); //select the first li of the first ul element

$('ul li:first-child'); //select the first li of each ul element

$('[href]'); //select all the elements that contain the href attribute

$("a[target='_blank']"); //select all the elements that contain the target attribute whose value is '_blank'

$("a[target!='_blank']"); //select all the elements that contain the target attribute whose value is NOT '_blank'

$(':button'); //select all button elements and all button type inputs

$('tr:even'); //select all tr elements that are even

$('tr:odd'); //select all tr elements that are odd

Html, jQuery, Programming language, Javascript, Web Page, Programming

Events

Monday October 7th, 2024 secarcam

Events

The actions that the user performs or the changes you make in the page are known under the name of events

An event is the sign that 'something' has happened

Syntax of events

You need to specify a selector, to know which element the event will interact with, followed by the event in parentheses

$(selector).event(function() {
    //Code to execute
});

We will use the following sample HTML, that contains a simple form, to get to know the use of the events, accompanied by a file that we will call event.js

To process the form, we have also added a file form.php however, we are not going to use the examples on events

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'>
        <script src='jquery-3.4.1.min.js'></script>
        <script type='text/javascript' src='event.js'></script>
   </head>

   <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
      <form id='form' action='form.php' method='POST'>
          <label for='login'>Login:</label>
          <input type='text' id='login'/>

          <label for='pass'>Password:</label>
          <input type='text' id='pass'/>

          <input type='submit' id='button'/>
      </form>
   <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Item events

This type of event is that normally used by the user to interact with the elements of the HTML, when you hover the mouse over the element or is pressed, among others

Among the most important of which we highlight:

focus
is triggered when the focus goes to the element
blur
is triggered when the focus goes to another element or lose it
click
is activated when you click on the element
dblclick
is activated when you double click on the element

var warning = function() {
    alert('Click');
};

$(function() {
    $('#button').click(warning);
});

In the example we have selected the element with the id button, and responds to the click event that has as a parameter the variable warning

It could have included the code inside the click event, but wanted to emphasize that the parameters can be a variable that contains a function, so we can have different variables with different behavior, without having to modify our code

Mouse events

Occur when the user uses the mouse within the HTML document or any of the elements that compose it

Among the most important of which we highlight:

mousedown
turns on when you press a mouse button
mouseup
is activated when you stop pressing a mouse button
mousemove
is triggered when the mouse moves
mouseover
is triggered when the mouse moves over an item (when we enter in the item)
mouseout
is triggered when the mouse leaves the element (when we leave the element)

var warning = function() {
    alert('Click');
};

var over = function() {
    this.style['font-weight']='bold';
};

var out = function() {
    this.style['font-weight']='initial';
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
});

In the example, we have added a couple of events that change the type of letter when you pass the mouse over the element with id button

It is possible to assign to these event parameters that contain information about a mouse event

Among the most important of which we highlight:

screenX and screenY
represent the coordinates of the mouse pointer with respect to the global coordinates of the screen
clientX and clientY
represent the coordinates of the mouse pointer with respect to the browser window
button
is the number of the button that has been pressed (left = 0, center = 1, right = 2)

If you do not want to pass it as a parameter, we can use the property buttonsthat includes more buttons, as the mouse wheel or the forward and back buttons of the browser

var warning = function(info) {
    alert('The button pressed has been: ' + (info.button == 0 ? 'left' : (info.button == 1 ? 'central' : (info.button == 2 ? 'right' : 'other') ) ) + '\nIn the screen position: ' + info.screenX + ', ' + info.screenY);
};

In the example we have modified the variable warning to detect which button has been clicked and what position you had the mouse on the screen, when it has been clicked

Keyboard events

Occur when the user uses the keyboard

Among the most important of which we highlight:

keydown
turns on when you press a key
keyup
is activated when you stop pressing a key
keypress
is activated when you press and stops the press of a key

It is possible to assign to these event parameters that contain information about the event from the keyboard

Among the most important of which we highlight:

char or charCode
is a string with the character that has been pressed (provided that the same is representable)
key or keyCode
it is an identifier that represents the key that has been pressed

You can see the complete list on the page for developers Mozilla
ctrlKey,, shitKey and altKey
these are fields that indicate whether the key Control, Shift or Alt key had been pressed when the event occurred keyboard

var key = function(info) {
    //The letter a has the code 97 and the value of the rest is consecutive
    var dictionary = 'abcdefghijklmnopqrstuvyz';

   console.log('You have pressed the key: ' + dictionary.charAt(info.keyCode - 97) );
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
});

In the example has been added to the variable key with parameters to capture the keystrokes when you type in the element with the id login, and has modified the set of calls to use, using the keypress event

Touch events

These events are produced by touching a touch screen

Are similar to those produced by a mouse, but its delay is much lower

Because of this, conflicts can occur with mouse events, this is why it is advisable to disable them, not to run similar events twice

Among the most important of which we highlight:

touchstart
is activated when the finger touches the surface of the screen
touchend
is activated when the finger stops pressing the surface of the screen
touchmove events
is activated when the finger slides on the surface of the screen
touchenter
is activated when the finger is moved over an item (when we enter in the item)
touchleave
is triggered when the finger leaves the element (when we leave the element)
touchcancel
is activated when the finger goes outside the bounds of the browser window

Form events

The forms have their own events, among the most important of which we highlight:

click
it is activated when we click the mouse on an item
It is usually used with buttons (button, submit)
change
is triggered when the user modifies the value of a text element

This is normally used with input of type text, textarea or drop-down lists to select an option
focus
is activated when the user selects a form element
blur
is triggered when the user moves to another form element
submit
is activated when the user performs the action of submitting the form (not just when pressed the button submit, which can be simulated at the push of a button which makes the time of submit or when you force a call to the event from another event)

In addition, the submit event generates the events mousedown, click, mouseup and submitin that same order, which allows us to perform validations on the form elements before final submission
reset
is activated when the user performs the action of resetting the form (not only when you press the reset button, which can be simulated at the push of a button that makes the times of reset, or when force a call to the event from another event)

var send = function(event) {
    var login = $('#login').val();
    var pass = $('#pass').val();

    if( (login.length == 0) || (pass.length == 0) ) {
        alert('One of the data was unfilled');
        event.preventDefault();
    }
};

var write = function() {
    var value = $('#pass').val();

    if(value.indexOf('@') 1= *1) {
       alert('The password cannot contain the @ symbol');
    }
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
    $('#form').submit(send);
    $('#pass').change(write);
});

In the example, we have added the variables to send (to validate the fields login and pass) and write (to validate that it does not enter the @ symbol into the field, pass); has modified the set of calls to use, using the events submit and change

Html, jQuery, Programming language, CSS, Javascript, Programming, Web Page

Modification of styles

Monday October 7th, 2024 secarcam

Modification of styles

JQuery allows to modify easily the styles and the CSS properties of our web page

Add or remove CSS properties

By using the methods addClass() and removeClass() we can assign or remove a CSS class from any element

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn01').click(function() {
            $('#div01').addClass('important color');
        });
        $('#btn02').click(function() {
            $('#div01').removeClass('color');
        });
        </script>
        <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .color {
            color: #D5322D;
        }
        </style>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <div id='div01'>Sample text</div><br/>
        <button id='btn01'>Add classes important and color</button>
        <button id='btn02'>Remove color class</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

In the example, add the styles are important and color the element with id div01 when you press the button btn01, and eliminates the color style

Manipulation of CSS properties

The method css() allows us to view or modify any property of the stylesheet of an HTML element

It has the following syntax:

css('property_name', 'value');

In case you only want to see the property, we will omit the parameter value and if we want to modify it, we'll use that parameter

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $('#btn03').click(function() {
            $('.pcolor').css('background-color', 'yellow');
        });
        </script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p class='pcolor' style='background-color:#FF5555'>First paragraph</p>
        <p class='pcolor' style='background-color:#55FF55'>Second paragraph</p>
        <p class='pcolor' style='background-color:#5555FF'>Third paragraph</p>
        <button id='btn03'>Change color to all paragraphs</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

In the example, we have used three paragraphs different with a style for the background color different, if you push the button with id btn03 we can see that with the css method, we have changed all the paragraphs to yellow

Html, jQuery, Programming language, Javascript, Programming, Web Page

Effects

Monday October 7th, 2024 secarcam

Effects

JQuery allows you to, in a simple way, create effects, transitions, movements, animations, etc

Hide and Show

The method hide allows you to hide an element

To be able to re-make it visible we can use the method show

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <script>
        $(function() {
            $('#hide').click(function() {
                $('#part01').hide(800);
            };
 
            $('#show').click(function() {
                $('#part01').hide(1000);
            };
        });
        </script>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <p id='par01'>If you press the 'hide' button, I will disappear<br/>
        And if you click on the 'show' button then I will appear</p>

        <button id='hide'>Hide</button>
        <button id='show'>Show</button>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

In the above example when the button is clicked with id hide has used the method to hide a parameter that indicates the speed (in milliseconds) to hide the paragraph with id part01

When you press the button with id show it has been used the show method with a parameter that indicates the speed (in milliseconds) to display the paragraph with id part01

Fading

It is similar to Toggle, since the element appears or disappears, however it does gradually

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <button id='fadeBtn'>Press to disappear or appear some boxes</button><br/><br/>

        <div id='div01' style='width: 8px; height: 80px; background-color: red;'></div>
        <div id='div02' style='width: 8px; height: 80px; background-color: green;'></div>
        <div id='div03' style='width: 8px; height: 80px; background-color: blue;'></div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

We will use this example to test the different methods of fadding

FadeIn

Allows that a hidden item appears

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

$('button').click(function() {
    $('#div01').fadeIn();
    $('#div02').fadeIn('slow');
    $('#div03').fadeIn(3000);
});

Modify the HTML in the previous example to add this script

FadeOut

Allows an element to be hidden

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

$('button').click(function() {
    $('#div01').fadeOut();
    $('#div02').fadeOut('slow');
    $('#div03').fadeOut(3000);
});

Modify the HTML in the previous example to add this script

FadeToggle

Allows altenar between the effects of fadeIn and fadeOut on a element

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

$('button').click(function() {
    $('#div01').fadeTogglet();
    $('#div02').fadeToggle('slow');
    $('#div03').fadeToggle(3000);
});

Modify the HTML in the previous example to add this script

Sliding

It allows us to move items to show up or down

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>
        <style>
        #panelAux, #flip {
            background-color: #F6CFCE;
            border: 1px solid #CCC;
            border-radius: 4px;
            padding: 5px;
            text-align: center;
        }

        #panelAux {
             padding: 50px;
             display: none;
        }
        </style>
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <div id='flip'>Click here to display and contract the panel</div>
        <div id='panelAux'>I like jQuery!</div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

We will use this example to test the different methods of sliding

SlideDown

It moves down the element

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

$('#flip').click(function() {
    $('#panel').slideDown();
});

Modify the HTML in the previous example to add this script

SlideUp

Move element up

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

$('#flip').click(function() {
    $('#panel').slideUp();
});

Modify the HTML in the previous example to add this script

SlideToggle

Allows altenar between the effects slideDown and slideUp to the element

Supports a parameter to indicate speed (in milliseconds) or values 'slow' or 'fast'

$('#flip').click(function() {
    $('#panelAux').slideToggle('slow');
});

Modify the HTML in the previous example to add this script

Animations

It is also possible to create custom animations with the method animate() with the following syntax:

$(selector).animate((CSS_Properties), speed);

The first parameter defines a set of CSS_Properties, enclosed between the symbols { and }, that are to be modified

The second indicates the speed(in milliseconds) or the values ‘slow’ or ‘fast’

<!DOCTYPE html>
<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <script src='jquery-3.4.1.min.js'></script>        
    </head>

    <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
        <button id='animateBtn01'>Start animation</button>

        <div id='box01' style='background: #D5322D; height: 100px; widht: 100px; display: block;'></div>
    <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

We will use this example to test various ways of doing animations

$('animateBtn01').click(function() {
    $('box01').animate( {left:'250px'} );
});

Modify the HTML in the previous example to add this script, in which we modified a single property

$('animateBtn01').click(function() {
    $('box01').animate( {
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'150px'
    });
});

Modify the HTML in the previous example to add this script, in which we modified several properties

$('animateBtn01').click(function() {
    $('box01').animate( {
        left:'250px',
        height:'+=150px',
        width:'+=150px'
    });
});

Modify the HTML in the previous example to add this script, in which we modified several properties using relative values

$('animateBtn01').click(function() {
    var div = $('box01');

    div.animate( {
        height:'300px',
        opacity:'0.4'
    }, 'slow');
    div.animate( {
        width:'300px',
        opacity:'0.8'
    }, 'slow');
    div.animate( {
        height:'100px',
        opacity:'0.4'
    }, 'slow');
    div.animate( {
        width:'100px',
        opacity:'0.8'
    }, 'slow');
});

We modified the HTML from the previous example to add this script, in which we modified several properties by running several consecutive animations one after another

jQuery, Html, Programming language, Javascript, PHP, Programming, Web Page

Ajax

Monday October 7th, 2024 secarcam

AJAX

Ajax (asynchronous Javascript and XML) allows you to upload content from a web page and display it without having to recharge it

Almost any current web page uses this technology: Gmail, Google Maps, YouToube, Facebook, etc

To accomplish this, Ajax builds a layer of additional process between the website and our server

In this way, the requests to the server will be asynchronous, without interfering with the loading process or the actions of the user

While on the browser side, the user can perform actions at any time without being paralyzed waiting for a response from the server

The update of elements is performed through the layer Ajax, dynamically and continuously while the user is still using the page

Elements that make up Ajax

Now let's examine each of the different elements that make up an Ajax application

XMLHTTPRequest

The object XMLHTTPRequest is supported by all modern browsers, starting with Internet Explorer 5+, in addition to Mozilla, Firefox, Konqueror, Opera and Safari

It is supported by a wide variety of platforms, including Microsoft Windows, UNIX / Linux, and Mac OS X

The purpose of this object is to allow Javascript the formulation and sending of HTTP requests to the server

Before using the object, we must call it with its constructor and adapt it according to the peculiarities of each browser

Microsoft was the first to introduce the object, with an implementation of the same as an ActiveX

The rest of browsers have included a native version of the same though implementandolo as a Javascript object

Given that the object depends on what browser and what operating system it is able to use it, you must adapt the code to instancie correctly

function getXMLHTTPRequest() {
    var request = false;

    try {
        //builder for non-Microsoft browsers, for example Mozilla
        request = new XMLHTTPRequest();
    }catch(error1) {
        try {
            //Microsoft browser builder in its oldest versions (IE5, IE6)
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }catch(error2) {
        try {
            //builder for Microsoft browsers in one of its most recent versions
            request = new ActiveXObject('Microsoft.XMLHTTP');
        }catch(error3) {
            //in case the builder fails or the browser does not support the object
            request = false;
        }
    }

    return request;
}

In the example above shows how it would be the call of the constructor depending on the browser if using pure Javascript code

If we use the object navigator that stores information about the browser, we could do a conditional comparison according to the type of browser you just using it as a variable:

function getXMLHTTPRequest() {
    var browser = navigator.appName;
    var request = false;

    try {        
       switch(browser) {
           case 'Netscape': //for IE11, Firefox, Chrome and Safari browsers
           case 'Opera': //for Opera browser
           case 'Edge': //for the Edge browser
               request = new XMLHTTPRequest();
               break;
           case 'Microsoft Internet Explorer': //for Microsoft browsers before IE 10
               try {
                   //Microsoft browser builder in its oldest versions (IE5, IE6)
                  request = new ActiveXObject('Msxml2.XMLHTTP');
               }catch(error1) {
                   try {
                       //builder for Microsoft browsers in one of its most recent versions
                       request = new ActiveXObject('Microsoft.XMLHTTP');
                   }catch(error2) {
                       //in case the builder fails or the browser does not support the object
                       request = false;
                   }
               }
               break;
    }catch(error) {
        //in case the builder fails or the browser does not support the object
        request = false; 
    }

    return request;
}

Properties of the object

onreadystatechange
determines which event handler will be called when you change the property readyState the object
readyState
is an integer value that reports the status of the request:
- 0 = uninitialized
- 1 = cárgandose
- 2 = loaded
- 3 = interactive
- 4 = completed
responseText
text string returned by the server that represents the data of the request
responseXML
XML document returned by the server that represents the data of the request
status
code HTTP status returned by the server
statusText
text string returned by the server with a description of the state

Methods of the object

abort()
stops the current request
getAllResponseHeaders()
returns a text string containing all the headers
getResponseHeader(x)
returns a text string with the value of the header x
open(‘method’, ‘URL’, ‘a’)
specifies if the method of the request is GET or POST, the destination URL and if the request should be handled asynchronously (if it is true) or synchronous (if it is false)
send(content)
sends the request with POST data of the form optional
setRequestHeader(‘x’, ‘y’)
defines the parameters with a pair of variable (x) value (y) and is assigned to the header that is sent with the request

Ajax with jQuery

Thanks to jQuery, we can use a code more streamlined and simple that even allows us to forget the type of browser or the system thanks to the methods get(), post(), load() and ajax()

get()

This method requests data to the server with an HTTP GET request

GET is used basically for getting (retrieving) some data from the server

The GET method may return cached data

It has the following syntax:

$.get(URL, callback);

URL
is the destination address
callback
is an optional parameter that represents the name of the function that will be executed in the event that the application is properly made

$("button").click(function(){
  $.get("test.php", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

In the example we can see how when you press the item button will launch a GET request to the server, which in this case works with the PHP language, to the URL test.php and that contains the code that should be executed

If the request was executed successfully, execute the anonymous function that shows the user a warning with the content of the data parameter and status

post()

This method requests data to the server with an HTTP POST request

POST sends data for processing to a specified resource

The POST method never caches data, and is often used to send data along with the request

It has the following syntax:

$.post(URL, data, callback);

URL
is the destination address
data
is an optional parameter that specifies the data that will be sent along with the application
callback
is an optional parameter that represents the name of the function that will be executed in the event that the application is properly made

$("button").click(function(){
  $.post("user.php",
         {
             name: "Donald Trump",
             pass: "**********"
         },
         function(data, status){
             alert("Data: " + data + "\nStatus: " + status);
  });
});

In the example we can see how when you press the item button will launch a POST request to the server, which in this case works with the PHP language, to the URL user.php and that contains the code about the user that should run

If the request was executed successfully, execute the anonymous function that shows the user a warning with the content of the data parameter and status

load()

This method gets content from the server and adds them to an element of our page

It has the following syntax:

$(selector).load(URL, data, callback);

URL
is the destination address
data
is an optional parameter that specifies the data that will be sent along with the application
callback
is an optional parameter that represents the name of the function that will be executed in the event that the application is properly made

This function must have the following mandatory parameters:
- responseTxt
  the content of response in case of success
- statusTxt
  is a text string with the status of the petition, you can be one of the following values:
  - abort
  - error
  - notmodified
  - parsererror
  - success
  - timeout
- xhr
  contains the object XHTMLRequest, which provides us with additional information about the Ajax request

<!DOCTYPE html>
<html>
<head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
    <script src='jquery-3.4.1.min.js'></script>
    <script>
        $(function(){
            $('#div01').load('datos.html #p1');
        });
    </script>
</head>

<body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
   <div id='div01'>The content will be loaded here</div>
<!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732180670&k=b73c946288fd553af417588cd28895e7&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

In the example we can see how when it is finished loading the DOM will load the content of datos.html in the element with the id div01in particular, the elements within this file that have the id p1

When you use a selector for the HTML elements that we want to load, jQuery the filter without problems, as we have seen in this example

We can also load other file types, such as for example .txtbut we have to take into account that has to be carried out by the HTTP protocol and not directly from disk (with file://)

In the event that the request fails, we would see The content will be loaded hereinstead of the loaded content

ajax()

This method performs a request asynchronous HTTP

It has the following syntax:

$ajax(URL, settings);

URL
is an optional parameter that sets out the destination address, if not specified it will add it within the parameter settings as another value more
settings
specifies the data that will be sent along with the application

Can be specified default values for all Ajax requests using the method ajaxSetup()

$.ajax({
    method: 'POST',
    url: 'teams.php',
    dataType: 'JSON',
    data: {
       action: 'get_groups',
       league : $('#team-league').val(),
       season : $('#team-season').val()
    },
    beforeSend: function(jqXHR, settings) {
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert('The Ajax request has failed');
    },
    dataFilter: function(data, type) {
    },
    success: function(data, textStatus, jqXHR) {
	for (i in data){
            $('#team-group').append('<option value=\"' + data[i].id '\">' + data[i].name + '</option>');
	}
    },
    complete: function(jqXHR, textStatus) {
    }
});

In the example we can see that it will launch a POST request to the server, which in this case works with the PHP language, to the URL teams.php and that contains the code that should be executed

In dataType has been specified that it will receive an object of type JSON and it will use the data provided by the method called get_groups with the parameters league that picks up its value from the element with id team-league and season that picks up its value from the element with id team-season

We have included the callback hooks beforeSend,, error, dataFilter, success and complete for ilustar the order in which they are called

Only has code to errorin case of failure of the request and to successin the case that it is correct

If you are running the callback hook successis recorreran all the data received in JSON format and will be added to the element with id team-group that corresponds to an option element of a select field, this new element will be added at the end of the existing

Parameters settings

accepts
assigns a dataType of type MIME, which will be sent in the header of the request

This header informs the server what type of response will be accepted
```
$.ajax({
    accepts: {
        mycustomtype: 'application/xml'
    },

    //Instructions to deserialize 'mycustomtype'
    converters: {
        'text mycustomtype': function(result) {
            //Conversion to the required type, our code would go here

            return newresult;
        }
    },
 
    //'mycustomtype' returned by the server
    dataType: 'mycustomtype'
});
```
In the example you have assigned a MIME type to work with data in the XML format and the server will return the ‘mycustomtype‘ as we have specified

To be able to work correctly with the new type, it is necessary to use converters to convert it correctly to the format that we want to return
async
by default, all requests are sent asynchronous (set to true this is the default)

To configure them synchronously you must asignarsele as false

Applications cross-domain and the dataType: ‘jsonp’ do not support operations synchronous

Keep in mind that the requests are synchronous may temporarily lock the browser, disabling any actions while the request remains active

As of jQuery 1.8 , the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the callback success, error or complete in place of the corresponding methods of the object jqXHR such as jqXHR.done()
beforeSend,
it is a method of event the Ajax that is executed before the call request that can be used to modify the object jqXHR (in jQuery 1.4.x, XMLHTTPRequest) before it is sent

Can be used to add custom headers, etc

The objects jqXHR and settings are passed as arguments

If it returns false, the application will be cancelled

As of jQuery 1.5, the options are all calls, regardless of the type of application
cache
if it is set to falsewill force the browser not to cache the pages requested

Established in false will only work correctly with HEAD requests, and GET if it has been added ‘_ = {timestamp}‘ to GET parameters

The parameter is not required for other types of requests, except in IE8 when a POST to a URL that has already been requested with GET
complete
it is a method of event the Ajax that is executed after the events success and error

This method passes two arguments: jqXHR (in jQuery 1.4.x, XMLHTTPRequest) and a text string with the status of the application (‘success‘, ‘notmodified‘, ‘nocontent‘, ‘error‘, ‘timeout‘, ‘abort‘, or ‘parsererror‘)

As of jQuery 1.5, you can accept multiple requests and each one will turn
contents
determines how jQuery will parse the response, given its content type, supports regular expressions (added in jQuery 1.5)
contentType
type of content with which to send the data to the server
The default value is ‘application/x-www-form-urlencoded; charset=UTF-8‘

If you pass explicitly a content type to $.ajax(), will always be sent to the server (even if no data is sent)

From jQuery 1.6 you can pass false to tell jQuery not to set any content-type header

The W3C specification XMLHttpRequest it says that the charset should always be UTF-8; specifying another charset will not obligaráal browser to change the encoding

For requests to cross-domain, when it is other than ‘application/x-www-form-urlencoded‘, ‘multipart/form-data‘, or ‘text/plain‘, the browser will perform checks prior to sending the request to the server
context
context for all responses of the request, by default, the context is an object that represents the settings used in the call ($.ajaxSettings along with the settings you've entered with $.ajax() )

For example, specifying a DOM element as the context will make its context to the event callback complete is:
```
$.ajax({
    url: 'test.html',
    context: document.body
    }).done(function() {
        $( this ).addClass( "done" );
});
```
converters
method to convert the returned value to the format that we need them as answer (added in jQuery 1.5)
crossDomain
is used to force a request crossDomain (such as JSONP) on the same domain, you must set the value of crossDomain to true

This allows, for example, the redirection from the server to another domain (added in jQuery 1.5)
data
data that is to be send to the server, will be converted to a query string

Will be added to the url in GET requests

Query the option processData to avoid this automatic process

In the case of an array, jQuery serialize multiple values with the same key depending on the value of the setting of traditional
dataFilter
method that will be used to handle the response data from the raw XMLHttpRequest

It accepts two parameters:
- data
  the raw data returned by the server
- dataType
dataType
type of data expected by the server

If none is specified, jQuery will try to inferirlo based on the MIME type of the response (MIME type XML generate XML, in 1.4 JSON will generate a JavaScript object, in 1.4 script will execute the script, and any other type will be returned as a string)

The available types (and the result passed as the first argument to your callback is accepted) are:
- xml
  returns an XML document that can be processed via jQuery
- html
  returns an HTML document as text without format; the labels of included script will be evaluated when inserted in the DOM
- script
  evaluates the response as JavaScript and it is returned as plain text
  
  Disables caching by adding a parameter in the query string ‘_ = {timestamp}‘ to the URL unless the cache option is set as true
  
  In this case the POST will be converted to GET to the requests of remote-domain
- json
  evaluates the response as JSON and returns a JavaScript object
  
  The json requests callback placeholder, for example ‘?callback=?‘, is made using JSONP unless the application includes jsonp: false in the configuration of the request
  
  The JSON data is parsed in a strict sense; any JSON with incorrect format will be rejected and will throw an error
  
  As of jQuery 1.9, we also reject the answers empty; the server should return a response null or {} in its place (see json.org for more information on the correction of the JSON format)
- jsonp
  load in a block-JSON-using JSONP
  
  Adds ‘?callback=?‘ at the end of your URL to specify the callback of the request
  
  Disables caching by adding a parameter in the query string ‘_ = {timestamp}‘ to the URL unless the cache option is set as true
- text
  string of text without format
- multiple values separated by spaces
  as of jQuery 1.5, it is possible to convert a dataType received in the header Content-Type the necessary
  
  For example, if you want a string of text to be treated as XML, use ‘text xml‘
  
  You can also make a request JSONP, received as text, and will be interpreted by jQuery as XML: ‘jsonp text xml‘
  
  Similarly, the chain-shortened ‘jsonp xml‘ first, it will attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then text-to-xml
error
event Ajax that will be called if the request fails

As of jQuery 1.5, supports an array of methods and each one will be called per turn

It will be called with requests cross-domain script and JSONP

Receives the following parameters:
- jqXHR
  (in jQuery 1.4.x, XMLHttpRequest)
- text string
  describes the type of error that occurred
  
  Supports the following values:
  - null
    it is not a string, it is the literal null
  - timeout
  - error
  - abort
  - parsererror
- errorThrown
  subject to certain exceptions, it is optional
  
  When an HTTP error occurs, errorThrown a party receives text of the HTTP status, such as ‘Not Found‘ or ‘Internal Server Error‘ with this parameter we can replace your options and configure it
global
enables the use of several global events and Ajax
Its default value is true

Use false to avoid that the global events ajaxStart or ajaxStop are assets
headers
additional headers sent along with the request using XMLHttpRequest, able to modify the object by changing the value X-Requested-With: XMLHttpRequest

It is also possible to change the value with the event, Ajax beforeSend, (added in jQuery 1.5)
ifModified
check the value of header Last-Modified to see if the last request was successful

Its default value is falseignore the header

Since jQuery 1.4, it also verifies the value of ‘etag‘ specified by the server to catch unmodified data
isLocal
allows the current environment to be recognized as ‘local‘ (for example, the file system), even if jQuery does not recognize it as such by default

The following protocols are currently recognized as local:
- file
- *-extension
- widget
If the configuration of isLocal needs to be modified, it is recommended to do it with the method $.ajaxSetup() (added in jQuery 1.5.1)
jsonp
overrides the response function of the requests JSONP

This value will be used in place of the ‘callback‘ in the query string of the url when you add ‘callback=?‘

For example {jsonp:’onJSONPLoad’} return to the server ‘onJSONPLoad=?‘

As of jQuery 1.5, setting jsonp to false to avoid that jQuery add the string ‘?callback‘ to the URL or attempting to use ‘=?‘ to perform the transformation

In this case, you must explicitly set the configuration to jsonpCallback

For example, { jsonp: false, jsonpCallback: ‘callbackName’ }

For safety reasons, if the target receptor is not trusted, it is recommended to configure the property jsonp to false
jsonpCallback
specifies the name of the function to return a request JSONP

This value will be used instead of the random name automatically generated by jQuery

It is recommended to let jQuery generate this unique name, since that will facilitate the management of requests and will be able to better control the callbacks and exceptions error

It is possible to specify the return of the request when it is enabled the browser cache for GET requests

As of jQuery 1.5, you can also use a function to set it up, in which case the value of jsonpCallback it is set with the return value of that function
method
HTTP method that is utilirá in the request (for example ‘POST‘, ‘GET‘, ‘PUT‘ (added in jQuery 1.9.0)
mimeType
mime type that overrides the mime type XHR (added in jQuery 1.5.1)
password
password that will be used with XMLHttpRequest as a response to a request of authentication of HTTP access
processData
by default, the data passed to data (anything that is not a string) will be processed and transformed to a query string, which will be set to the default content type ‘application/x-www-form-urlencoded‘

To send a DOMDocument or other data is not processed, set it to false
scriptAttrs
defines additional attributes for use in requests ‘script‘ or ‘jsonp‘

Where:
- key
  represents the name of the attribute
- value
  is the value of the attribute
When you receive this object, you will force the use of the script tag transport

For example, can be used to declare attributes nonce, integrity or crossorigin to meet the requirements of the security policy of the content (added in jQuery 3.4.0)
scriptCharset
only used with the ‘script‘ transport

Defines the attribute charset in the script tag used in the request

It is used when the character set on the local page is not the same as that of the remote script

Alternatively, the attribute charset it can be defined with scriptAttrs, which will also ensure the use of transport ‘script‘
statusCode
numeric codes HTTP and functions that will be called as a response to that code

For example, when the response status is a 404, it will display a prompt to the user:
```
$.ajax({
    statusCode: {
        404: function() {
            alert( "Page not found" );
        }
   }
});
```
If the request is successful, the status code of the function will take the same parameters as the return of the petition to be correct; if an error occurs (including the redirection 3xx), it will take the same parameters as the error callback (added in jQuery 1.5 )
success
event Ajax call if the request is correct

It has the following arguments:
- data
  data returned by the server, formatted according to the parameter dataType or the callback function dataFilterif one has been defined
- textStatus
  text string that describes the state
- jqXHR
  (in jQuery 1.4.x, XMLHttpRequest)
As of jQuery 1.5, supports an array of methods and each one will be called per turn
timeout
sets a timeout (in milliseconds) for the request
The value 0 means no timeout

This will override any global timeout set with the $.ajaxSetup()

The timeout period begins when the call is made to $.ajax

If there are other requests in progress and the browser has no connections available, it is possible that any request to time out before it can be sent

As of jQuery 1.4.x, the object XMLHttpRequest it will take the state to invalid if the request times out

To access any field of the object can generate an exception

Only in Firefox 3.0+, applications, script and JSONP are not cancelled by a timeout; the script will run even if it is received after a timeout
traditional
the value will true if you want to use the traditional style of parameters serialized
type
alias for method. Use type for versions of jQuery prior to 1.9.0
url
string that contains the URL to which to send the request
username
user name that will be used with XMLHttpRequest in response to a request of authentication of HTTP access
xhr
return of the request to create the object XMLHttpRequest

Its default value is ActiveXObject when available (IE), XMLHttpRequest otherwise

Sobreescribalo to provide your own implementation of XMLHttpRequest or any improvement own
xhrFields
defines the native object XHR (added in jQuery 1.5.1 )

For example, can be used to define withCredentials to true for requests cross-domain, if necessary:
```
$.ajax({
    url: a_cross_domain_url,
    xhrFields: {
        withCredentials: true
    }
});
```
In jQuery 1.5, the property withCredentials it is not native to XHR and therefore, the requests CORS (Cross-Origin Resource Sharing) that the require be ignored

For this reason, I recommend using jQuery 1.5.1+ should you require to be used

Cookie	Duration	Description
CookieLawInfoConsent	Until the end of the browser session	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Until the end of the browser session	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Until the end of the browser session	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Until the end of the browser session	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

jQuery

Installation

Load the code

Basic syntax

Selector

Item

Class

Id

Practical example

More examples of selector

Events

Syntax of events

Item events

Mouse events

Keyboard events

Touch events

Form events

Modification of styles

Add or remove CSS properties

Manipulation of CSS properties

Effects

Hide and Show

Fading

FadeIn

FadeOut

FadeToggle

Sliding

SlideDown

SlideUp

SlideToggle

Animations

AJAX

Elements that make up Ajax

XMLHTTPRequest

Properties of the object

Methods of the object

Ajax with jQuery

get()

post()

load()

ajax()

Parameters settings

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Cookie policy