The difference and connection between JavaScript, jQuery, and Ajax

Description
Brief summary:
1. JS is a front-end language.
2. Ajax is a technology that provides an asynchronous update mechanism, which uses the exchange of data between the client and the server instead of the entire page document to achieve partial update of the page.
3. jQuery is a framework that encapsulates JS to make it more convenient to use. jQuery makes the use of JS and Ajax more convenient

Relationship metaphor:
If js is compared to wood, then jquery is a board (semi-finished product)

1.
The short form of JavaScript javaScript is JS, a scripting language widely used in client-side Web development. It is often used to add dynamic functions to HTML pages (programs written by it can be embedded in HTML or XML pages and viewed directly Interpretation and execution in the device).
Components:
Core (ECMAScript), Document Object Model (DOM), Browser Object Model (BOM)

2. jQuery
jQuery is a fast and concise javaScript library that enables users to more easily process HTML documents, events, realize animation effects, and easily provide AJAX interaction for websites.

3. Ajax
AJAX stands for "Asynchronous JavaScript and XML" (asynchronous JavaScript and XML). AJAX is not an acronym, but a noun created by Jesse James Gaiiett. It refers to a web development technology for creating interactive web applications.

Contact
javaScript is a scripting language used for web client development. Ajax is a new technology based on JS language and mainly combining three technologies of JS, CSS and XML. It is a web development technology used to create interactive web applications. jQuery is a JS framework, based on the JS language, a JS library developed by integrating Ajax technology, encapsulating the functions of JS and Ajax, and providing a functional interface, which greatly simplifies the operation of Ajax and JS.

jQuery can greatly simplify the writing of JavaScript programs. To use jQuery, you must first add a reference to the jQuery library at the top of the HTML code, such as:

//Quote

The library files can be placed locally, or you can directly use the CDNs of well-known companies (the advantage of CDN loading jquery). The advantage is that the CDNs of these large companies are more popular, and users are likely to have cached them when they visit other websites before visiting your website. In the browser, it can speed up the opening speed of the website. Another benefit is obvious, saving website traffic bandwidth.
jQuery official http://code.jquery.com/jquery-1.6.min.js

1 Positioning element
JS
document.getElementById("abc")

jQuery
$("#abc") Positioning by id
$(".abc") Positioning by class
$("div") Positioning by tag
$(this) Positioning the current element

It should be noted that the result returned by JS is this element, and the result returned by jQuery is a JS object. In the following example, it is assumed that the element abc has been positioned.

jQuery syntax selects HTML elements and performs certain operations on the selected elements.
Basic syntax: $(selector).action() The
dollar sign defines jQuery
selector (selector) "query" and "find" HTML element
jQuery's action() performs operations on the element
Example:
$(this).hide()- Hide the current element
$("p").hide()-hide all

Element
$("p.test").hide()-hide all the ones with class="test"

Element
$("#test").hide()-hide the element with id="test"

This is some text.

This is some text.

Add a class to the first div element

This is the content of the sample file ("demo_test.txt"):

jQuery AJAX is a great feature!

This is some text of the paragraph.

Load the content of the element with id="p1" in the "demo_test.txt" file to the specified

In the element:
$("#div1").load("demo_test.txt #p1");

Jquery custom event
This event occurs when the entire DOM tree is loaded
$(document).ready(function name(params) { }); //abbreviation $(function name(params) { }); //abbreviation $ (function () { });

Use of single quotation marks and double quotation
marks The types of quotation marks must be inconsistent inside and outside (try to use outer double and inner single)
console.log("look'come' here"); //Result: look'come' here
special cases where the inner and outer quotation marks have the same type, Use \ to prohibit compilation
console.log('look'come' here'); //Result: look'come' here

-------------------Correct
<input type="button" οnclick="alert("pop up")" /> ---------- ------Incorrect

But why the escape character \ in JS has no effect?
Because this code is still under the jurisdiction of HTML, the escape character should be HTML instead of javascript:
-------------------correct

Event binding
$(function () { //Event one $('.body-tab .header-btn').click(function () {

        });
        事件一  由外向内：body   .body-tab   .header-btn
        $('body').on('click', '.body-tab .header-btn', function () {

        })
    });

})

jQuery load() method The
jQuery load() method is a simple but powerful AJAX method.
The load() method loads data from the server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL,data,callback);

The optional callback parameter specifies the callback function to be allowed after the load() method is completed. The callback function can set different parameters:
responseTxt-contains the result content when the call is successful
statusTXT-contains the status of the call
xhr-contains the XMLHttpRequest object
The following example will display a prompt box after the load() method is completed. If the load() method is successful, it will display "External content loaded successfully!", and if it fails, it will display an error message:
Example
$("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); }); });

jQuery $.get() method The
$.get() method requests data from the server through an HTTP GET request.
Syntax:
$.get(URL,callback); The
required URL parameter specifies the URL you wish to request.
The optional callback parameter is the name of the function to be executed after the request is successful.
The following example uses the $.get() method to retrieve data from a file on the server:
Example
$("button").click(function(){ $.get("hello/test.json",function(data ,status){ alert("Data: "+ data + "\nStatus:" + status); }); });

jQuery $.post() method The
$.post() method submits data to the server through an HTTP POST request.
Syntax:
$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.
The optional data parameter specifies the data to be sent with the request.
The optional callback parameter is the name of the function to be executed after the request is successful.
The following example uses $.post() to send data along with the request:
Example
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"Rookie Tutorial ", url:"http://www.runoob.com" }, function(data,status){ alert("Data: \n" + data + "\nStatus: "+ status); }); }) ;

jQuery.parent(expr), find the parent node, you can pass in expr to filter, such as $("SPAn-").PAR\; \&\; ltEn-T\left(\right)orperson$ ( "span"). Parent (. "Class")
jQuery.parents (expr), similar jQuery.parents (expr), but it is Find all ancestor elements, not limited to the parent element
jQuery.children(expr), return all child nodes, this method will only return the direct child nodes, not all descendant nodes
jQuery.contents(), return all the following content, Including nodes and text. The difference between this method and children() is that, including blank text, will also be returned as a jQuery object, children() will only return the node
jQuery.prev(), the previous sibling node, not all sibling nodes
jQuery .prevAll(), returns all previous sibling nodes
jQuery.next(), returns the next sibling node, not all sibling nodes
jQuery.nextAll(), returns all subsequent sibling nodes
jQuery.siblings(), returns sibling nodes , Regardless of
jQuery.find(expr), it is completely different from jQuery.filter(expr):

jQuery.filter() is to filter out a part of the initial jQuery object collection, and

The return result of jQuery.find(), will not have the content in the initial set, such as $("p").find("span")，是从<p>YuanSuopenstartlooking<span>,And\; sothe\; samein$ ( "p span")