Date
Jul. 21st, 2024
 
2024年 6月 16日

Post: Jquery Cheatsheet

Jquery Cheatsheet

Published 08:08 Aug 02, 2020.

Created by @ezra. Categorized in #Programming, and tagged as #Cheatsheet.

Source format: Markdown

Table of Content

Jquery

jQuery is a lightweight, "write less, do more", JavaScript library. jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

Installation

There are several ways to start using jQuery on your web site. You can: - Download the jQuery library from jQuery.com - Include jQuery from a CDN, like Google

CDN Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Getting Started

With jQuery you select (query) HTML elements and perform "actions" on them.

Basic syntax is: $(selector).action() - A $ sign to define/access jQuery - A (selector) to "query (or find)" HTML elements - A jQuery action() to be performed on the element(s)

$(this).hide() // hides the current element.
$("p").hide()  // hides all the p elements
$(".test").hide() // hides all elements with class="test"
$("#test").hide() // hides the element with id="test"


$(document).ready(function(){

  // All jQuery methods go into this document event because
  // this prevents the browser running the jquery before the
  // HTML and CSS is loaded. It is a good practice

});

// Few Selector Examples
$("*") // Selects all elements
$(this) // Sets the current HTML element
$("p.intro") // Selects all <p> elements with class="intro"
$("p:first") // Selects the first <p> element

Events:

// You can have a single event bind to a 
// selector or you can chain multiple with "on" keyword

$("p").click(function(){
  // single event
});


// Chained binding
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

jQuery Effects

$("p").hide();  // hides the element
$("p").show();  // shows the element

// fade in and out for elements
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

View all effects reference

jQuery Traversing

$("span").parent();
$("div").children();
$("h2").siblings();
$("h2").next();
$("div").first();

// and much more ... check jquery
// traversing in reference docs

jQuery AJAX

LOAD

syntax:

$(selector).load(URL,data,callback);
  • The required URL parameter specifies the URL you wish to load.
  • The optional data parameter specifies a set of querystring key/value pairs to send along with the request.
  • The optional callback parameter is the name of a function to be executed after the load() method is completed.

jquery example:

$(document).ready(function(){

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

});

The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters: - responseTxt - contains the resulting content if the call succeeds - statusTxt - contains the status of the call - xhr - contains the XMLHttpRequest object

$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
      alert("External content loaded successfully!");
    if(statusTxt == "error")
      alert("Error: " + xhr.status + ": " + xhr.statusText);
  });
});

GET/POST

The jQuery get() and post() methods are used to request data from the server with an HTTP GET or POST request.

GET Request syntax:

$.get(URL, callback);

example:

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

The second parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.

POST Request Syntax:

$.post(URL,data,callback);

example:

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
  • The first parameter of $.post() is the URL we wish to request ("demo_test_post.asp").
  • Then we pass in some data to send along with the request (name and city).
  • The ASP script in "demo_test_post.asp" reads the parameters, processes them, and returns a result.
  • The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.
Pinned Message
HOTODOGO
I'm looking for a SOFTWARE PROJECT DIRECTOR / SOFTWARE R&D DIRECTOR position in a fresh and dynamic company. I would like to gain the right experience and extend my skills while working in great teams and big projects.
Feel free to contact me.
For more information, please view online résumé or download PDF
本人正在寻求任职 软件项目经理 / 软件技术经理 岗位的机会, 希望加⼊某个新鲜⽽充满活⼒的公司。
如有意向请随时 与我联系
更多信息请 查阅在线简历下载 PDF