The difference and connection between jquery and JavaScript and Ajax

Source: Internet
Author: User
Tags jquery library

Simple summary: 1, JS is a doorfront-end language。 2, Ajax is a doorTechnology, it provides a mechanism for asynchronous updates, which uses the exchange of data between the client and the server instead of the entire page document to implement a partial update of the page. 3. jquery is aFrame, it encapsulates JS, making it more convenient to use.   jquery makes the use of JS and Ajax more convenient relationship analogy: If JS is compared to wood, then jquery is a plank (semi-finished) jquery and Ajax are a framework of JS, each has its own function, if JS is the father, jquery and Ajax is two sons Detailed information:
1.javascript is a scripting language that executes on the client. Ajax is a JavaScript-based technology that is primarily used to provide asynchronous refreshes (only part of the page is refreshed, not the entire page). One is the language, the other is the technology, the two have essential differences.
2.javascript is a scripting language executed on the browser side, and Ajax is a development technique for creating interactive Web applications that leverages a range of related technologies including JavaScript.
1. JavaScript

JavaScript's shorthand form is JS, a widely used scripting language for client Web development, often used to add dynamic functionality to HTML pages (the programs they write can be embedded in HTML or XML pages and interpreted directly in the browser).

    • Part:

Core (ECMAScript), Document Object model (Doc object models, referred to as DOM), browser object model (Browser, BOM)

    • Describe:

JavaScript is a new programming language adapted to the needs of dynamic Web authoring, and is now increasingly used in Internet web page making.

The advent of JavaScript enables a real-time, dynamic, interactive relationship between the Web page and the user, allowing the Web page to contain more active elements and more exciting content.

JavaScript is short, and is executed on the client, which greatly improves the browsing speed and interactive ability of the Web page. It is also a simple programming language specifically tailored for Web pages.

2. Ajax

Ajax is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), Ajax is not an abbreviation, but a noun created by Jesse James Gaiiett, which is a web development technique for creating interactive Web applications.

    • Composition

A representation based on XHTML and CSS standards;

Use the document Object model for dynamic display and interaction;

Using XML and XSLT to do data interaction and manipulation;

Asynchronous communication with the server using XML HttpRequest;

Use JavaScript to bind everything.

    • Describe:

Ajax is a combination of Java technology, XML, and JavaScript programming techniques that allow developers to build Web applications based on Java technology and break the management of using page overloading.

Ajax technology uses asynchronous HTTP requests to pass data between browser and Web server so that browser only updates part of the page content without re-loading the entire page.

Ajax is a Web application development method that uses client-side scripting to Exchange data with a Web server. In this way, Web pages can be dynamically updated without interrupting the interaction process for re-cropping. With Ajax, users can create a direct, highly available, richer, more dynamic Web user interface that is close to the local desktop app

3. JQuery

jquery is a fast, concise JavaScript library that makes it easier for users to work with HTML documents, events, animate, and easily provide Ajax interactivity to websites.

    • Characteristics:

jquery is a very popular JavaScript framework, using CSS-like selectors, which can easily manipulate HTML elements, have good extensibility, and have a lot of plugins.

    • Describe:

For programmers, simplifying JavaScript and Ajax programming frees programmers from designing and writing complex JS applications, turning concerns to functional requirements rather than implementation details, thus increasing the speed of project development.

For users, improve the visual effect of the page, enhance the interactivity with the page, experience more beautiful web supplies.

The JavaScript framework is actually a series of tools and functions.

Relationship between the two and three

Here I use a guide to illustrate the relationship between the three:

Explain:

JavaScript is a scripting language for Web client development, Ajax is based on the JS language, the main combination of JS, CSS, XML three technologies, is used to create interactive Web page application of Web development technology. jquery is the framework of JS, based on the JS language, the collection of AJAX technology developed by JS Library, encapsulated JS and AJAX functions, providing a function interface, greatly simplifying the operation of Ajax,js.

jquery is more in the project, specifically speaking about him.

jquery can greatly simplify the writing of JavaScript programs

To use jquery, first add a reference to the jquery library in front of the HTML code, such as:

<script language= "javascript" src= "/js/jquery.min.js" ></script>//References

Library files can be placed locally or directly using the CDN of a well-known company (CDN loads the benefits of jquery), the advantage is that these large companies are more popular CDN, users visit your site before it is likely to visit other sites have been cached in the browser, so it can speed up the opening of the site. Another benefit is obvious, saving the traffic bandwidth of the website.

Provided by Google

Http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

The official jquery

Http://code.jquery.com/jquery-1.6.min.js

The specific wording of the jquery code and the native JavaScript notation differ from the following when performing common operations:

1 Positioning Elements
Js
document.getElementById ("abc")

Jquery
$ ("#abc") Location by ID
$ (". ABC") through class positioning
$ ("div") positioned by tag

It is important to note that the result of JS return is this element, jquery returns the result is a JS object. The following example assumes that element ABC has been positioned.

2 Changing the contents of an element
Js
abc.innerhtml = "Test"; Now the project is useful to
Jquery
abc.html ("test");

3 Show hidden elements
Js
Abc.style.display = "None"; Now the project is useful to
Abc.style.display = "block";

Jquery
Abc.hide ();
Abc.show ();

Abc.toggle (); Toggle between show and hide,


4 getting Focus

JS and jquery are the same, both Abc.focus ();

5 Assigning a value to a form
Js
Abc.value = "Test";
Jquery
Abc.val ("test");

6 Getting the value of a form
Js
alert (Abc.value);
Jquery
Alert (Abc.val ());

7 setting elements are not available
Js
Abc.disabled = true;
Jquery
Abc.attr ("Disabled", true);

8 Modifying element styles
Js
Abc.style.fontsize=size;
Jquery
Abc.css (' font-size ', 20);

Js
Abc.classname= "Test";
Jquery
Abc.removeclass ();
Abc.addclass ("test");

9 Determines whether the check box is selected

Jquery
if (abc.attr ("checked") = = "Checked")
Note: Online said. attr ("checked") = = true is not actually used, the above test can be used

The difference and connection between jquery and JavaScript and Ajax

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.