Differences and connections between jQuery, JavaScript and ajax

Brief summary:
1. JS is a front-end language .
2. Ajax is a technology that provides an asynchronous update mechanism, using 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 JS and Ajax easier to use
 
Relationship metaphor:
If js is compared to wood, then jquery is a wooden board (semi-finished product)
jQuery and ajax are both a framework of js, each with its own function, if js is the father, jquery and ajax are two sons 
 
 
Details:
1.JavaScript is a scripting language that is executed on the client side. Ajax is a technology based on javascript, its main purpose is to provide asynchronous refresh (only part of the page is refreshed, not the entire page). One is language and the other is technology, and there is a fundamental difference between the two.
2. javascript is a scripting language executed on the browser side, and Ajax is a development technology for creating interactive web applications, which utilizes a series of related technologies, including javascript.
 
 

1、JavaScript

 The short form of javaScript is JS, a scripting language widely used in client-side web development, which is often used to add dynamic functions to HTML pages (programs written can be embedded in HTML or XML pages and interpreted directly in the browser. implement).

  • component:

             Core (ECMAScript), Document Object Model (DOM), Browser Object Model (BOM)

 

                               

 

  • describe:

 

      Javascript is a new programming language born to meet the needs of dynamic web page production, and is now more and more widely used in Internet web page production.

     The emergence of Javascript enables a real-time, dynamic and interactive relationship between web pages and users, making web pages contain more active elements and more exciting content.

      Javascript is short and powerful, and it is executed on the client machine, which greatly improves the browsing speed and interaction ability of web pages. At the same time, it is a simple programming language specially tailored for making Web pages.

2、Ajax

         AJAX is "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML). AJAX is not an acronym, but a term coined by Jesse James Gaiiett, which refers to a web development technology for creating interactive web applications.

  • composition:

            Representation based on XHTML and CSS standards;

           Dynamic display and interaction using the Document Object Model;

           Use XML and XSLT for data interaction and manipulation;

           Asynchronous communication with the server using XML HttpRequest;

           Bind everything with JavaScript.

  • describe:

            Ajax is a combination of programming technologies such as Java technology, XML and JavaScript, which allows developers to build Java technology-based Web applications and breaks the management of using page reloads.

           Ajax technology uses asynchronous HTTP requests to transfer data between the Browser and the Web Server, so that the Browser only updates part of the web page content without reloading the entire web page.

          Ajax is a web application development method that uses client-side scripting to exchange data with a web server. In this way, the Web page can be dynamically updated without interrupting the interactive flow for re-editing. Using Ajax, users can create direct, highly available, richer, and more dynamic web user interfaces that are close to native desktop applications

3、jQuery

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

  • 特点:

           jQuery是当前很流行的一个JavaScript框架,使用类似于CSS的选择器,可以方便的操作HTML元素,拥有很好的可扩展性,拥有不少插件。 

  • 描述:

            对于程序员来说,简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。

           对于用户来说,改善了页面的视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。

          javaScript框架实际上是一系列工具和函数。

二、三者的关系

 

        下面我用一张导图来阐述这三者的关系:

 

解释:

         javaScript是用于Web客户端开发的脚本语言,Ajax是基于JS语言,主要组合JS、CSS、XML三种技术的新技术,是用于创建交互式网页应用的网页开发技术。jQuery是JS的框架,基于JS语言,集合Ajax技术开发出来的JS库,封装JS和Ajax的功能,提供函数接口,大大简化了Ajax,JS的操作。

 

项目中用jQuery比较多,具体讲讲他。

jQuery能大大简化JavaScript程序的编写

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:

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

库文件既可以放在本地,也可以直接使用知名公司的CDN(CDN加载jquery的好处),好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

Google提供的

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

jQuery官方的

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

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:

1 定位元素 
JS 
document.getElementById("abc") 

jQuery 
$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("div") 通过标签定位 

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 

2 改变元素的内容 
JS 
abc.innerHTML = "test";                //现在的项目中有用到
jQuery 
abc.html("test"); 

3 显示隐藏元素 
JS 
abc.style.display = "none";              //现在的项目中有用到
abc.style.display = "block"; 

jQuery 
abc.hide(); 
abc.show();

abc.toggle();         //在显示和隐藏之间切换、


4 获得焦点 

JS和jQuery是一样的,都是abc.focus(); 

5 为表单赋值 
JS 
abc.value = "test"; 
jQuery 
abc.val("test"); 

6 获得表单的值 
JS 
alert(abc.value); 
jQuery 
alert(abc.val()); 

7 设置元素不可用 
JS 
abc.disabled = true; 
jQuery 
abc.attr("disabled", true);

8 修改元素样式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);

JS
abc.className="test";
JQuery
abc.removeClass(); 
abc.addClass("test");

9 判断复选框是否选中

jQuery
if(abc.attr("checked") == "checked")
注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用



转载自:https://www.cnblogs.com/thomasbc/p/6650119.html

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325556452&siteId=291194637