Ang mga halimbawa ng jQuery ay simple na may mga paliwanag. Isang halimbawa ng paggamit ng jQuery. Halimbawa ng Text().

→ mga halimbawa ng jQuery para sa mga nagsisimula

Ang jQuery ay isang javascript library na binubuo ng mga cross-browser function - mga wrapper para sa pagmamanipula ng mga elemento ng DOM (Document Object Model). Ang pangunahing prinsipyo nito ay ang awtomatikong aplikasyon ng kinakailangang mekanismo, depende sa browser. Halimbawa, ang pagkuha ng isang html na elemento ng isang dokumento sa pamamagitan ng ID ay nangyayari sa iba't ibang mga browser. Bago ang jquery, ginamit ko ang function na ito:

Function getObj(objID)( if (document.getElementById) (return document.getElementById(objID);) else if (document.all) (return document.all;) else if (document.layers) (return document.layers;) )

Upang maisagawa ang parehong aksyon sa jquery, gawin lamang ito:

$("#objID") o jQuery("#objID")

Ang pagtawag sa $() function ay katumbas ng jQuery() , dahil ang una ay isang alias para sa pangalawa. Kung hindi ka gumagamit ng iba pang mga aklatan tulad ng jquery, maaari mong ligtas na ma-access ang namespace sa pamamagitan ng $(). Kung hindi, mas mainam na gamitin ang direktang pangalan ng object - jQuery. Dagdag pa, ipinapalagay namin na walang iba pang mga aklatan.

Pagsisimula sa jQuery

Kaya simulan na natin. Ang unang hakbang ay upang makuha ang pinakabagong bersyon ng jquery library mula sa opisyal na website ng proyekto http://jquery.com/ o i-download ang jquery dito. Mayroong dalawang bersyon sa archive at sa opisyal na website: naka-compress at binuo. Sa site mas mainam na gamitin ang naka-compress, at kung gusto mong mag-eksperimento, gamitin ang pangalawa. Una sa lahat, isinama namin ang jquery library sa katawan ng pahina:

Pagkatapos nito, ang javascript namespace ay tinukoy sa paraang ang tawag sa $() function ay inookupahan ng jquery at maaari kang makakuha ng anumang elemento ng html na dokumento bilang isang bagay gamit ang expression na $("#objID") . Kung saan ang objID ay ang object ID.

jQuery at CSS

Bilang unang halimbawa, tingnan natin kung paano gumagana ang jquery at CSS. Mayroong dalawang pangunahing paraan upang manipulahin ang CSS gamit ang jquery: pagbabago ng isang katangian o ilan nang sabay-sabay. Ang mga ito ay isinasagawa sa pamamagitan ng css() function. Sa teorya, mukhang ganito:

$("#objID").css("display","block") $("#objID").css(( display:"block, margin:"10px", color:"#ffffff"))

Halimbawa ng pagbabago ng isang katangian ng CSS

Ang halimbawa ng pagbabago ng isang katangian ay isang tagumpay!

Pinagmulan:

Ang halimbawa ng pagbabago ng isang katangian ay isang tagumpay!

Halimbawa ng pagbabago ng maraming katangian ng CSS

Halimbawa ng pagbabago ng maraming katangian!

Pinagmulan:

function demo_css())( $("#span2").css(( color:"#ffffff", padding:"5px", background:"#980000" )); ) Halimbawa ng pagbabago ng maraming attribute!

Pagbabago ng teksto at html

Upang baguhin ang text o html code, mayroong mga function text() at html() .

$("#objID").text("True la la") $("#objID").html("

Totoo la la

Bukod dito, kung susubukan mong magpasok ng HTML code gamit ang text() function, matatanggap mo ito sa orihinal nitong anyo. Ang text() function ay tinatakasan ang lahat.

Halimbawa ng Text().

Pinagmulan:

function set_text())( $("#span3").text("Salamat!"); )

Halimbawa ng paggamit ng html()

Pinagmulan:

function set_html())( $("#span4").html("Salamat! Mas maganda ito."); )

Pamamahala ng Mga Katangian gamit ang jQuery

Ang attr() function ay nagmamanipula ng anumang mga katangian ng elemento. Sa tulong nito maaari kang magdagdag o magbago ng pamagat, href, halaga, src at iba pa.

Attr() halimbawa

Pinagmulan:

function plus_ten())( var cur_value = $("#text").attr("value");cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); )

Mga Tagapangasiwa ng Kaganapan sa jQuery

Ang buong listahan ay makukuha sa http://api.jquery.com/category/events/. Magbibigay lang ako ng ilang halimbawa. Ang pinakakaraniwang onclick event handler. Sa jQuery maaari mong harangin ito sa pamamagitan ng click() function.

Click() Halimbawa

Pinagmulan:

$("#butt").click(function())( alert("Napagpasyahan mo bang tingnan ito?"); ));

Halimbawa ng Keyup().

Maglagay ng isang bagay:

Ipinasok mo:

Pinagmulan:

Maglagay ng isang bagay:
Naglagay ka ng: $("#text2").keyup(function())( if ($("#text2").val())( $("#text2_target").css((background:"#980000" ) ); ) else ($("#text2_target").css((background:"#ffffff")); ) $("#text2_target").text($("#text2").val()); );

Halimbawa ng paggamit ng bind()

Mag-click sa akin!


Pinagmulan:

div#log( background:#1C93A5; width:300px; height:100px; padding:10px; color:#fff; ) Mag-click sa akin!
$(dokumento).ready(function() ($("#log").bind("click", function(e) ($("#coord").html("X coordinate: "+ e.pageX + " Y coordinate: " + e.pageY + "");

Ang JQuery ay isang mahusay na aklatan. Nakatulong ito upang maiwasan ang lahat ng mga pitfalls ng IE6 nang perpekto. Sa mga nakaraang panahon, ang cross-browser compatibility ay isang malaking isyu na kinakaharap ng mga developer. Nakayanan ni Jquery ang lahat ng mga pagkakaiba sa pagpapakita ng mga layout sa iba't ibang mga browser.

Ngayon, ang mga browser ay may mahusay na pinag-isang solusyon. Maginhawa naming magagamit ang lahat ng mga pribilehiyo ng ES5, at mayroon din kaming HTML5 API sa aming pagtatapon, na ginagawang mas madali ang pagproseso ng mga elemento ng DOM. Ang mga developer ay nasa bingit ng limot at lumalayo sa jQuery para sa ilang mga proyekto. Lalo na sa kaso ng mga microservice at hindi kumplikadong mga programa.

Don't get me wrong - Ang Jquery ay isa pa ring napakagandang library, at siyempre, 70% ng oras na kakailanganin mong gamitin ito. Bagama't para sa maliliit na pahina na may limitadong JS, maaari mong gamitin ang VanillaJS o ibang balangkas. Ang mga ito ay angkop para sa mga mobile application.

Well, narito ang 10 halimbawa ng gumaganang code na magagawa mo nang walang jquery.

Pagsubaybay sa pag-load ng pahina kumpletong kaganapan

Ang unang bagay na gagawin mo kapag gumagamit ng jQuery ay i-wrap ang code sa isang $(document).ready() na paraan upang malaman kung kailan handa na ang DOM para sa pagmamanipula. Kung walang Jquery, magagamit natin ang kaganapang DOMContentLoaded. Narito ang isang halimbawa ng code:

// Makinig sa DOMContentLoaded event para sa buong dokumento, na may anonymous na function // Maaari mong i-wrap ang iyong code sa mga braso ng function na ito // at ito ay isasagawa kapag na-load ang page. document.addEventListener("DOMContentLoaded", function () ( // ang aming Hawaiian hello, ay ipapakita sa console console.log("Aloha"); ));

Mga tagapili ng elemento na walang Jquery

Isang araw, kakailanganin nating pumili ng mga elemento gamit ang id, klase o mga tag, at ang jQuery ay isa sa pinakamahusay. Ang mga pumipili nito ay ganap na magkapareho sa CSS syntax. Ngayon, ipinakilala ng mga browser ang dalawang mahalagang API - querySelector at querySelectorAll.

// Maaari mong gamitin ang document.querySelector upang makuha ang unang elemento na tumutugma sa pamantayan // tumatagal lamang ng isang argument - CSS selector. var lochNess = document.querySelector(".monsters"); console.log("It"s from Scotland - " + lochNess.textContent); // makukuha rin natin ang koleksyon gamit ang document.querySelectorAll. // nagbabalik ng listahan ng mga elemento ng dom na tumutugma sa criterion var scary = document.querySelectorAll(" .monsters") ; console.log("Itago at humanap ng mga kampeon: "); para sa (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

  • Nessy
  • Malaking paa
  • La chupacabra

Paglikha at pagtanggal ng mga tagapangasiwa ng kaganapan (mga pamamaraan)

Ang pakikinig sa mga kaganapan ay isang pangunahing bahagi ng pagbuo ng mga web application. Sa kasaysayan, nagkaroon ng dalawang malalaking kampo - IE at ang iba pa. Ngunit ngayon, ginagamit lang namin ang addEventListener

Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Tawagan ang addEventListener sa gustong kaganapan. // nagsisimulang subaybayan ang kaganapan ng pag-click sa isang elemento. btn.addEventListener("click", function () ( // Kapag na-click ang isang button, gusto naming mag-trigger ng event scale sa aming listahan. // Para magawa ito, kailangan naming magdagdag ng event sa aming listahan // para kapag nag-hover ang mouse sa isang elemento, gagana ang function na list .addEventListener("mouseover", enlarge )); // Para kanselahin ang zoom event, gamitin ang removeEventListener. btn.addEventListener("click", function () ( // Ang pag-alis ng mga kaganapan ay hindi gagana sa mga hindi pinangalanang function, gumamit lamang ng mga pinangalanang list.removeEventListener("mouseover", enlarge); )); // Gumawa tayo ng isang function na magsusukat. var enlarge = function () ( // Magdagdag ng klase para sa mga elemento list.classList.add("zoomed"); // kapag umalis ang cursor sa listahan, alisin ang klase upang bumalik sa normal na scale list.addEventListener("mouseout ", function ( ) ( list.classList.remove("zoomed") )); // Ngayon gusto naming i-highlight ang mga pangalan kapag na-click. // Kapag na-trigger ang isang pag-click sa isang elemento, dapat itong maging berde // Salamat sa delegasyon ng kaganapan, maaari lang tayong magdagdag ng handler sa parent na elemento // Sa paraang ito, hindi tayo gagawa ng mga tagapakinig ng kaganapan para sa bawat isa.

  • . list.addEventListener("click", function (e) ( // i-highlight ang target na elemento sa berdeng e.target.classList.add("berde"); ));

    Paganahin ang pag-zoom Huwag paganahin ang pag-zoom

    Mag-click sa isang pangalan upang i-highlight ito

    • Chewbacca
    • Han Solo
    • Luke
    • Boba fett

    Berde ( kulay: berde; ) .zoomed ( cursor: pointer; font-size: 23px; )

    gumamit ng pangatlong argumento ang addEventListener, ngunit ito ay opsyonal. Tulad ng nakikita mo, ang code ay mukhang medyo katulad sa jQuery.

    Pagdaragdag, pag-alis ng mga klase nang walang jQuery sa purong JS

    Ang pamamahala sa mga klase ng elemento nang walang jQuery ay isang malaking problema noong unang panahon. Pero hindi na ngayon. Salamat sa classList property. At kung kailangan mong baguhin ang mga katangian, maaari mong gamitin ang setAttribute.

    Var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn.addEventListener("click", function () ( // isang madaling paraan para makakuha ng mga attribute ng elemento console.log(div.id); )); // Iniimbak ng Element.classList ang lahat ng klase ng elemento mula sa DOMTokenList. var classes = div.classList; btn.addEventListener("click", function () ( console.log(classes); )); btn.addEventListener("click", function () ( // Pagdaragdag at pag-alis ng mga klase classes.add("red"); )); btn.addEventListener("click", function () ( // Toggle classes.toggle("hidden"); ));

    Display id Mga klase sa display Kulay pula I-toggle ang visibility

    Square ( width: 100px; height: 100px; margin-bottom: 20px; border: 1px solid gray; border-radius: 5px; ) .hidden ( visibility: hidden; ) .red ( background-color: red; )

    Pagkuha at pagbabago ng HTML na nilalaman ng isang elemento

    Ang jQuery ay may mga pamamaraan ng kaginhawahan na text() at html(). Sa halip, maaari mong gamitin ang textContent at innerHTML na mga katangian, na matagal nang umiiral bago ang jQuery.

    Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("button"); // Sa ganitong paraan madali mong malalaman ang buong text ng element tree var myContent = myText.textContent; console.log("textContent: " + myContent); // Use textContent to replace the element's text // inalis ang luma, pinapalitan ito ng bagong text btn.addEventListener("click", function () ( myText.textContent = " Ang mga koala ay ang pinakamahusay na mga hayop "; )); // Kung kailangan natin ang HTML ng elemento, gamitin ang innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // To replace html, just provide a new btn.addEventListener("click", function () ( myText.innerHTML = " Penguins are the best animals "; ));

    Alin ang pinakamahusay na mga hayop?

    Koala
    Mga penguin

    Pagpasok ng bago at pagtanggal ng mga kasalukuyang elemento

    Sa kabila ng katotohanang lubos na pinasimple ng Jquery ang gawain sa pagdaragdag at pag-alis ng mga elemento, walang nagsabi na hindi ito magagawa sa purong JavaScript code. Narito ang isang halimbawa kung paano magdagdag, mag-alis, o magpalit ng elemento sa isang page.

    Var lunch = document.querySelector("#lunch"); // Sabihin nating mayroon tayong menu para sa ating tanghalian // Magdagdag tayo ng isang bagay dito var addFries = function () ( // Lumikha muna tayo ng isang elemento at punan ito ng nilalaman var fries = document.createElement("div"); fries .innerHTML = "

  • Fries
    • "; // Kapag tapos na ito, gagamitin natin ang appendChild para ipasok ito sa page. // Lalabas ang ating elemento sa page sa menu na lunch.appendChild(fries); ); // Magdagdag ng keso sa ating burger) . var addCheese = function () ( var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = "Cheese"; top slice: // Kunin ang parent element na karne ng baka at gamitin ang insertBefore. // Ang unang argumento sa insertBefore na paraan ay ang aming idinagdag na elemento // Ang pangalawang argumento ay ang elementong bago namin idagdag ang nilikhang beef.parentNode. .insertBefore(topSlice, beef); // Gumawa tayo ng kaunting trick! // Ibigay ang susunod na pinakamalapit na elemento bilang pangalawang parameter sa insertBefore, // sa ganitong paraan ilalagay natin ang content "pagkatapos" ng gustong elemento beef.parentNode.insertBefore (bottomSlice, beef.nextSibling); removePickles = function () ( // alisin ang elemento var pickles = document.querySelector("#pickles"); if (pickles) ( pickles.parentNode.removeChild(pickles); ) ); // Masarap! var btn = document.querySelectorAll("button"); btn.addEventListener("click", addFries); btn.addEventListener("click", addCheese); btn.addEventListener("click", removePickles);

    Magdagdag ng fries sa tanghalian Magdagdag ng keso sa sandwich Alisin ang mga atsara Aking Tanghalian

    • Sandwich ko
    • Tinapay
    • Mga atsara
    • karne ng baka
    • Mayo
    • Tinapay

    Sa pagdating ng jQuery, may pagkakataon ang mga web programmer na lumikha ng mga kahanga-hangang visual effect nang hindi gumagamit ng flash technology. Ang artikulong ito ay nagpapakita ng ilang kapansin-pansing mga halimbawa kung anong mga kamangha-manghang resulta ang maaaring makamit gamit ang mga karaniwang tool sa browser at ang iyong imahinasyon.

    Epekto ng magnifying glass

    Isang maayos na epekto na nagbibigay-daan sa iyong palakihin ang bahagi ng imahe kung saan matatagpuan ang cursor. Sa mga browser na hindi pamilyar sa CSS3, ang magnifying glass ay magiging parisukat.

    Aviaslider

    Ang slider na ito ay may walong iba't ibang mga mode para sa pag-flip sa mga larawan, na ang bawat isa ay nakalulugod sa mata dahil sa hindi nagkakamali nitong dynamics.

    Malawak na nabigasyon
    Malaking slideshow ng larawan
    Nabigasyon batay sa bilog

    Hindi masyadong madalas na nakatagpo ka ng isang site na maraming bilog na elemento. Binibigyang-daan ka ng Bubble Navigation plugin na lumikha ng dynamic nabigasyon batay lamang sa mga lupon.

    Panel sa pag-login ng drop-down na site
    Mag-circulate

    Binibigyang-daan kang ilunsad ang mga elemento ng pahina sa paligid ng isang bilog, at sa iba't ibang mga eroplano ng espasyo.

    I-flip ang kahon

    Binibigyang-daan ka ng Flip plugin na i-flip ang mga elemento na parang mga card.

    Pag-hover ng gallery

    Impormal na gallery ng larawan. Ang preview ng nilalaman ay isang pangkat ng mga nakakalat na litrato na kinunan gamit ang isang Polaroid camera.

    icarousel

    Isang simple ngunit napakagandang slider ng imahe.

    Daloy ng imahe

    Slideshow na may mga larawang gumagalaw sa kalawakan.

    Interactive na larawan

    Isang napaka-kagiliw-giliw na paraan upang gumawa ng isang interactive na katalogo ng produkto.

    Mga transition ng Jqfancy
    Photo shoot

    Binibigyang-daan kang kumuha ng mga larawan ng mga indibidwal na bahagi ng isang larawan sa isang pahina. Mag-click sa nais na bahagi ng larawan at makita ang resulta sa screen.

    Mabilis na buhangin

    Ang Quicksand plugin ay magbibigay-daan sa iyo na ayusin at i-filter ang isang hanay ng mga elemento gamit ang napakataas na kalidad na mga epekto.

    Mga tip sa konteksto ng slideout

    Ang plugin na ito ay magiging lubhang kapaki-pakinabang para sa paglikha ng mga detalyadong paglalarawan ng mga kumplikadong bagay at mga interactive na paglilibot kapag kinakailangan, habang kumukuha ng kaunting espasyo hangga't maaari upang magbigay ng malaking halaga ng impormasyon.

    Mga sliding box

    Tutulungan ka ng plugin ng Sliding boxes na lumikha ng hindi pangkaraniwang dynamic na gallery ng mga larawan na may mga caption para sa kanila.

    zoomer gallery

    Isang gallery ng larawan na ang mga elemento ay masayang lalabas kapag nag-hover ka sa mga ito.

    Sa artikulong ito, titingnan natin ang mga paraan ng shortcut ng AJAX ng jQuery: load, get, getJSON, getScript at post. Pinapadali ng mga pamamaraang ito na ipatupad ang mga kinakailangang kahilingan ng AJAX at, hindi katulad ng function ng ajax, nangangailangan sila ng mas kaunting mga linya ng code upang magsulat.

    jQuery - paraan ng pag-load

    Ang paraan ng pag-load ay idinisenyo upang kunin ang data mula sa server sa isang tinukoy na URL at ilagay ito sa isa o higit pang mga napiling elemento.

    Ang paraan ng pag-load ay may sumusunod na syntax:

    Load(url [,data] [,complete]) // ang mga parameter sa square bracket ay opsyonal //url - isang string na naglalaman ng URL kung saan dapat ipadala ang kahilingan //data (opsyonal na parameter) - data na dapat ipadala sa ang server (sa string o object format) //complete – karagdagang mga aksyon na dapat gawin pagkatapos makumpleto ang kahilingan (tinukoy gamit ang Function(responseText, textStatus, xhr) function) // responseText - server response // textStatus - response status // xhr - XMLHTTPRequest ng object

    Sa karamihan ng mga kaso, ang paraan ng pag-load ay gumagamit ng GET upang magpadala ng kahilingan. Ngunit maaari rin nitong gamitin ang POST method. Nangyayari lamang ito kapag ang data na ipapadala sa server ay tinukoy hindi sa format ng string, ngunit sa pamamagitan ng isang bagay.

    Mga halimbawa ng paggamit ng paraan ng pagkarga

    1. Ipasok ang mga nilalaman ng file sidenav.tpl sa block na may id="asidenav" pagkatapos ma-load ang DOM ng pahina:

    ... // pagkatapos i-load ang DOM ng pahina $(function() ( // ipasok ang nilalaman ng file sidenav.tpl sa elemento (#asidenav) // kung ang file ay wala sa parehong direktoryo ng HTML dokumento, pagkatapos ay dapat mo ring tukuyin ang landas patungo sa kanya $("#asidenav").load("asidenav.tpl");

    2. I-load ang bahagi ng demo.html file sa elemento kapag nag-click ka sa button na matatagpuan dito:

    Kunin ang nilalaman ng file na demo.html ... $("#ajaxclick").click(function())( // i-load ang bahagi ng file na demo.html (#content1) sa element id="content1" $ (this).parent() .load("demo.html #content1" ));

    Mga nilalaman ng demo.html file:

    File demo.html ... ...

    3. I-load ang response content.php sa elementong mayroong id="result" . Ang tugon na ito ay depende sa halaga ng katangian ng data-content na mayroon ang button na nagpadala ng kahilingan sa AJAX sa server.

    Mag-load ng content 1 Mag-load ng content 2 Mag-load ng content 3 ... // kapag nag-click sa isang button na may class load-ajax-click $(".load-ajax-content").click(function())( // define the value ng data attribute -content var dataContent = $(this).attr("data-content"); // humiling ng data mula sa file gamit ang data-content attribute value at i-output ito sa id="result" element kung ( dataContent) ( $ ("#result").load("content.php","content="+dataContent) ));



    MGA KAUGNAY NA ARTIKULO