De bedste jQuery-eksempler

jQuery er det mest anvendte JavaScript-bibliotek og bruges på mere end halvdelen af ​​alle større websteder. Det er mottoet "skriv mindre, gør mere ...!"

jQuery gør webudvikling nemmere at bruge ved at levere en række 'hjælper'-funktioner. Disse hjælper udviklere med hurtigt at skrive DOM (Document Object Model) -interaktioner uden at skulle manuelt skrive så meget JavaScript selv.

jQuery tilføjer en global variabel med alle vedhæftede biblioteksmetoder. Navngivningskonventionen er at have denne globale variabel som $. ved at indtaste $.har du alle jQuery-metoderne til din rådighed.

Kom godt i gang

Der er to hovedmåder at begynde at bruge jQuery:

  • Inkluder jQuery lokalt : Download jQuery-biblioteket fra jquery.com, og inkluder det i din HTML-kode.
  • Brug et CDN : Link til jQuery-biblioteket ved hjælp af et CDN (Content Delivery Network).

Vælgere

jQuery bruger CSS-stilvælgere til at vælge dele eller elementer på en HTML-side. Det lader dig derefter gøre noget med elementerne ved hjælp af jQuery-metoder eller funktioner.

For at bruge en af disse vælgere, skal du skrive et dollartegn og parentes efter det: $(). Dette er stenografi for jQuery()funktionen. Inden for parenteserne skal du tilføje det element, du vil vælge. Du kan bruge enten enkelt- eller dobbeltcitater. Herefter tilføjes en prik efter parenteserne og den metode, du vil bruge.

I jQuery er klasse- og ID-vælgerne som dem i CSS.

Her er et eksempel på en jQuery-metode, der vælger alle afsnitselementer og tilføjer en klasse af "valgt" til dem:

This is a paragraph selected by a jQuery method.

This is also a paragraph selected by a jQuery method.

$("p").addClass("selected");

I jQuery er klasse- og ID-vælgerne de samme som i CSS. Hvis du vil vælge elementer med en bestemt klasse, skal du bruge en prik ( .) og klassens navn. Hvis du vil vælge elementer med et bestemt ID, skal du bruge hash-symbolet ( #) og ID-navnet. Bemærk, at HTML ikke er store og små bogstaver, og derfor er det bedst at holde HTML-markering og CSS-vælgere små bogstaver.

Valg efter klasse

Hvis du vil vælge elementer med en bestemt klasse, skal du bruge en prik (.) Og klassens navn.

Paragraph with a class.

$(".pWithClass").css("color", "blue"); // colors the text blue

Du kan også bruge klassevælgeren i kombination med et tagnavn for at være mere specifikt.


    
    My Wish List
`

$("ul.wishList").append("
  • New blender
  • ");

    Valg af id

    Hvis du vil vælge elementer med en bestemt ID-værdi, skal du bruge hash-symbolet (#) og ID-navnet.

  • List item with an ID.
  • $("#liWithID").replaceWith("

    Socks

    ");

    Som med klassevælgeren kan dette også bruges i kombination med et tagnavn.

    News Headline

    $("h1#headline").css("font-size", "2em");

    Valg af attributværdi

    Hvis du vil vælge elementer med en bestemt attribut, skal du bruge ([attributeName="value"]).

    $("[name='myInput']").value("Test"); // sets input value to "Test"

    Du kan også bruge attributvælgeren i kombination med et tagnavn for at være mere specifikt.

    `

    Button

    $("input[name='myElement']").remove(); // removes the input field not the button

    Vælgere, der fungerer som filtre

    Der er også vælgere, der fungerer som filtre - de starter normalt med kolon. For eksempel :firstvælger vælgeren det element, der er det første barn til sin forælder. Her er et eksempel på en ikke-ordnet liste med nogle listeelementer. JQuery-vælgeren under listen vælger den første

  • element på listen - "Ét" listeelement - og bruger derefter .cssmetoden til at gøre teksten grøn.

    
         
    • One
    • Two
    • Three
    $("li:first").css("color", "green");

    Attributvælger

    Der er vælgere, der returnerer elementer, der matcher bestemte kombinationer af attributter som attribut indeholder , attribut slutter med , attribut starter med osv. Her er et eksempel på en ikke-ordnet liste med nogle listeelementer. JQuery-vælgeren under listen vælger

  • element på listen - "Ét" listeelement, som det har data*attribut som "India"værdi - og bruger derefter .cssmetoden til at gøre teksten grøn.

    
         
    • Mumbai
    • Beijing
    • New York
    $("li[data-country='India']").css("color", "green");

    En anden filtreringsvælger :contains(text)vælger elementer, der har en bestemt tekst. Placer den tekst, du vil matche, i parentes. Her er et eksempel med to afsnit. JQuery-vælgeren tager ordet "Moto" og skifter farve til gul.

    Hello

    World

    $("p:contains('World')").css("color", "yellow");

    Similarly, the :last selector selects the element that is the last child of its parent. The jQuery selector below selects the last

  • element in the list--the "Three" list item--and then uses the .css method to turn the text yellow.

    $("li:last").css("color", "yellow");

    Note: In the jQuery selector, World is in single-quotes because it is already inside a pair of double-quotes. Always use single-quotes inside double-quotes to avoid unintentionally ending a string.

    Multiple Selectors

    In jQuery, you can use multiple selectors to apply the same changes to more than one element, using a single line of code. You do this by separating the different ids with a comma. For example, if you want to set the background color of three elements with ids cat,dog,and rat respectively to red, simply do:

    $("#cat,#dog,#rat").css("background-color","red");

    HTML Method

    The jQuery .html() method gets the content of a HTML element or sets the content of an HTML element.

    Getting

    To return the content of a HTML element, use this syntax:

    $('selector').html();

    For example:

    $('#example').html();

    Setting

    To set the content of a HTML element, use this syntax:

    $('selector').html(content);

    For example:

    $('p').html('Hello World!');

    That will set the content of all of the

    Warning

    .html() method is used to set the element's content in HTML format. This may be dangerous if the content is provided by user. Consider using .text() method instead if you need to set non-HTML strings as content.

    CSS Method

    The jQuery .css() method gets the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

    Getting

    To return the value of a specified CSS property, use the following syntax:

     $(selector).css(propertyName);

    Example:

     $('#element').css('background');

    Note: Here we can use any css selector eg: element(HTML Tag selector), .element(Class Selector), #element(ID selector).

    Setting

    To set a specified CSS property, use the following syntax:

     $(selector).css(propertyName,value);

    Example:

     $('#element').css('background','red');

    To set multiple CSS properties, you'll have to use the object literal syntax like this:

     $('#element').css({ 'background': 'gray', 'color': 'white' });

    If you want to change a property labeled with more than one word, refer to this example:

    To change background-color of an element

     $('#element').css('background-color', 'gray');

    Click Method

    The jQuery Click method triggers a function when an element is clicked. The function is known as a "handler" because it handles the click event. Functions can impact the HTML element that is bound to the click using the jQuery Click method, or they can change something else entirely. The most-used form is:

    $("#clickMe").click(handler)

    The click method takes the handler function as an argument and executes it every time the element #clickMe is clicked. The handler function receives a parameter known as an eventObject that can be useful for controlling the action.

    Examples

    This code shows an alert when a user clicks a button:

    Click Here
    $("#alert").click(function () { alert("Hi! I'm an alert"); });

    The eventObject has some built in methods, including preventDefault(), which does exactly what it says - stops the default event of an element. Here we pevent the anchor tag from acting as a link:

    Link to Google
    $("#myLink").click(function (event) { event.preventDefault(); });

    More ways to play with the click method

    The handler function can also accept additional data in the form of an object:

    jqueryElement.click(usefulInfo, handler)

    The data can be of any type.

    $("element").click({firstWord: "Hello", secondWord: "World"}, function(event){ alert(event.data.firstWord); alert(event.data.secondWord); });

    Invoking the click method without a handler function triggers a click event:

    $("#alert").click(function () { alert("Hi! I'm an alert"); }); $("#alert").click();

    Now, whenever the page loads, the click event will be triggered when we enter or reload the page, and show the assigned alert.

    Also you should prefer to use .on("click",...) over .click(...) because the former can use less memory and work for dynamically added elements.

    Common Mistakes

    The click event is only bound to elements currently in the DOM at the time of binding, so any elements added afterwards will not be bound. To bind all elements in the DOM, even if they will be created at a later time, use the .on() method.

    For example, this click method example:

    $("element").click(function() { alert("I've been clicked!"); });

    Can be changed to this on method example:

    $(document).on("click", "element", function() { alert("I've been clicked!"); });

    Getting The Element From A Click event

    This applies to both jQuery and plain JavaScript, but if you set up your event trigger to target a class, you can grab the specific element that triggered the element by using the this keyword.

    jQuery happens to make it very easy (and multi browser friendly) to traverse the DOM to find that element's parents, siblings, and children, as well.

    Let's say I have a table full of buttons and I want to target the row that button is in, I can simply wrap this in a jQuery selector and then get its parent and its parent's parent like so:

    $( document ).on("click", ".myCustomBtnClassInATable", function () { var myTableCell = $(this).parent(); var myTableRow = myTableCell.parent(); var myTableBody = myTableRow.parent(); var myTable = myTableBody.parent(); //you can also chain these all together to get what you want in one line var myTableBody = $(this).parent().parent().parent(); });

    It is also interesting to check out the event data for the click event, which you can grab by passing in any variable name to the function in the click event. You'll most likely see an e or event in most cases:

    $( document ).on("click", ".myCustomBtnClassInATable", function (e) { //find out more information about the event variable in the console console.log(e); });

    Mousedown Method

    The mousedown event occurs when the left mouse button is pressed. To trigger the mousedown event for the selected element, use this syntax: $(selector).mousedown();

    Most of the time, however, the mousedown method is used with a function attached to the mousedown event. Here's the syntax: $(selector).mousedown(function); For example:

    $(#example).mousedown(function(){ alert("Example was clicked"); });

    That code will make the page alert "Example was clicked" when #example is clicked.

    Hover Method

    The jquery hover method is a combination of the mouseenter and mouseleave events. The syntax is this:

    $(selector).hover(inFunction, outFunction);

    The first function, inFunction, will run when the mouseenter event occurs. The second function is optional, but will run when the mouseleave event occurs. If only one function is specified, the other function will run for both the mouseenter and mouseleave events. Below is a more specific example.

    $("p").hover(function(){ $(this).css("background-color", "yellow"); }, function(){ $(this).css("background-color", "pink"); });

    So this means that hover on paragraph will change its background color to yellow and the opposite will change back to pink.

    Animate Method

    jQuery's animate method makes it easy to create simple animations using only a few lines of code. The basic structure is as following:

    $(".selector").animate(properties, duration, callbackFunction());

    For the properties argument, you need to pass a javascript object with the CSS properties you want to animate as keys and the values you want to animate to as values. For the duration, you need to input the amount of time in milliseconds the animation should take. The callbackFunction() is executed once the animation has finished.

    Example

    A simple example would look like this:

    $(".awesome-animation").animate({ opacity: 1, bottom: += 15 }, 1000, function() { $(".different-element").hide(); });

    Hide Method

    In its simplest form, .hide() hides the matched element immediately, with no animation. For example:

    $(".myclass").hide()

    will hide all the elements whose class is myclass. Any jQuery selector can be used.

    .hide() as an animation method

    Thanks to its options, .hide() can animate the width, height, and opacity of the matched elements simultaneously.

    • Duration can be provided in milliseconds, or using the literals slow (600 ms) and fast(200ms). for example:
    • A function can be specified to be called once the animation is complete, once per every matched element. This callback is mainly useful for chaining together different animations. For example
    $("#myobject").hide(800)
    $("p").hide( "slow", function() { $(".titles").hide("fast"); alert("No more text!"); });

    Show Method

    In its simplest form, .show() displays the matched element immediately, with no animation. For example:

    $(".myclass").show();

    will show all the elements whose class is myclass. Any jQuery selector can be used.

    However, this method does not override !important in the CSS style, such as display: none !important.

    .show() as an animation method

    Thanks to its options, .show() can animate the width, height, and opacity of the matched elements simultaneously.

    • Duration can be provided in milliseconds, or using the literals slow (600 ms) and fast(200ms). for example:
    • A function can be specified to be called once the animation is complete, once per every matched element. for example
    $("#myobject").show("slow");
    $("#title").show( "slow", function() { $("p").show("fast"); });

    jQuery Toggle method

    To show / hide elements you can use toggle() method. If element is hidden toggle() will show it and vice versa. Usage:

    $(".myclass").toggle()

    Slide Down method

    This method animates the height of the matched elements. This causes lower parts of the page to slide down, making way for the revealed items. Usage:

    $(".myclass").slideDown(); //will expand the element with the identifier myclass for 400 ms. $(".myclass").slideDown(1000); //will expand the element with the identifier myclass for 1000 ms. $(".myclass").slideDown("slow"); //will expand the element with the identifier myclass for 600 ms. $(".myclass").slideDown("fast"); //will expand the element with the identifier myclass for 200 ms.

    Load Method

    The load() method loads data from a server and puts the returned data into the selected element.

    Note: There is also a jQuery Event method called load. Which one is called, depends on the parameters.

    Example

    $("button").click(function(){ $("#div1").load("demo_test.txt"); });

    Chaining

    jQuery chaining allows you to execute multiple methods on the same jQuery selection, all on a single line.

    Chaining allows us to turn multi-line statements:

    $('#someElement').removeClass('classA'); $('#someElement').addClass('classB');

    Into a single statement:

    $('#someElement').removeClass('classA').addClass('classB');

    Ajax Get Method

    Sends an asynchronous http GET request to load data from the server. Its general form is:

    jQuery.get( url [, data ] [, success ] [, dataType ] )
    • url: The only mandatory parameter. This string contains the address to which to send the request. The returned data will be ignored if no other parameter is specified.
    • data: A plain object or string sent to the server with the request.
    • success: A callback function executed if the request succeeds. It takes as an argument the returned data. It is also passed the text status of the response.
    • dataType: The type of data expected from the server. The default is Intelligent Guess (xml, json, script, text, html). If this parameter is provided, the success callback also must be provided.

    Examples

    Request resource.json from the server, send additional data, and ignore the returned result:

    $.get('//example.com/resource.json', {category:'client', type:'premium'});

    Request resource.json from the server, send additional data, and handle the returned response (json format):

    $.get('//example.com/resource.json', {category:'client', type:'premium'}, function(response) { alert("success"); $("#mypar").html(response.amount); });

    However, $.get doesn't provide any way to handle error.

    The above example (with error handling) can also be written as:

    $.get('//example.com/resource.json', {category:'client', type:'premium'}) .done(function(response) { alert("success"); $("#mypar").html(response.amount); }) .fail(function(error) { alert("error"); $("#mypar").html(error.statusText); });

    Ajax GET Equivalent

    $.get( url [, data ] [, success ] [, dataType ] ) is a shorthand Ajax function, equivalent to:

    $.ajax({ url: url, data: data, success: success, dataType: dataType });

    Ajax Post Method

    Sends an asynchronous http POST request to load data from the server. Its general form is:

    jQuery.post( url [, data ] [, success ] [, dataType ] )
    • url : This is the only mandatory parameter. This string contains the adress to which to send the request. The returned data will be ignored if no other parameter is specified
    • data : A plain object or string that is sent to the server with the request.
    • success : A callback function that is executed if the request succeeds. It takes as an argument the returned data. It is also passed the text status of the response.
    • dataType : The type of data expected from the server. The default is Intelligent Guess (xml, json, script, text, html). if this parameter is provided, then the success callback must be provided as well.

    Examples

    $.post('//example.com/form.php', {category:'client', type:'premium'});

    requests form.php from the server, sending additional data and ignoring the returned result

    $.post('//example.com/form.php', {category:'client', type:'premium'}, function(response){ alert("success"); $("#mypar").html(response.amount); });

    requests form.php from the server, sending additional data and handling the returned response (json format). This example can be written in this format:

    $.post('//example.com/form.php', {category:'client', type:'premium'}).done(function(response){ alert("success"); $("#mypar").html(response.amount); });

    The following example posts a form using Ajax and put results in a div

     jQuery.post demo // Attach a submit handler to the form $( "#searchForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), term = $form.find( "input[name='s']" ).val(), url = $form.attr( "action" ); // Send the data using post var posting = $.post( url, { s: term } ); // Put the results in a div posting.done(function( data ) { var content = $( data ).find( "#content" ); $( "#result" ).empty().append( content ); }); }); 

    The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div

     jQuery Get demo // Attach a submit handler to the form $( "#userForm" ).submit(function( event ) { // Stop form from submitting normally event.preventDefault(); // Get some values from elements on the page: var $form = $( this ), username = $form.find( "input[name='username']" ).val(), url = "//api.github.com/users/"+username+"/repos"; // Send the data using post var posting = $.post( url, { s: term } ); //Ajax Function to send a get request $.ajax({ type: "GET", url: url, dataType:"jsonp" success: function(response){ //if request if made successfully then the response represent the data $( "#result" ).empty().append( response ); } }); }); 

    Ajax POST Equivalent

    $.post( url [, data ] [, success ] [, dataType ] ) is a shorthand Ajax function, equivalent to:

    $.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });