您的位置是:网站首页>Javascript编程Javascript编程

jQuery JavaScript ajax区别是什么

少儿编程网2021-04-13 13:41:32Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介jQueryJavaScriptajax区别:1、javaScript广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能;2、AJAX创建交互式网页应用的网页开发技术;3、jQuery方便地为网站提供AJAX交互。jQueryJavaScriptajax区别:1、JavaScrip

jQuery JavaScript ajax区别:1、javaScript广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能;2、AJAX创建交互式网页应用的网页开发技术;3、jQuery方便地为网站提供AJAX交互。85R少儿编程网-https://www.pxcodes.com

85R少儿编程网-https://www.pxcodes.com

jQuery JavaScript ajax区别:85R少儿编程网-https://www.pxcodes.com

1、JavaScript85R少儿编程网-https://www.pxcodes.com

javaScript的简写形式就是JS,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能(其编写的程序可以被嵌入到HTML或XML页面中,并直接在浏览器中解释执行)。85R少儿编程网-https://www.pxcodes.com

组成部分:85R少儿编程网-https://www.pxcodes.com

核心(ECMAScript)、文档对象模型(Document Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)85R少儿编程网-https://www.pxcodes.com

描述:85R少儿编程网-https://www.pxcodes.com

  • Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Internet网页制作上。85R少儿编程网-https://www.pxcodes.com

  • Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。85R少儿编程网-https://www.pxcodes.com

  • Javascript短小精悍,又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。85R少儿编程网-https://www.pxcodes.com

2、Ajax85R少儿编程网-https://www.pxcodes.com

AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。85R少儿编程网-https://www.pxcodes.com

组成:85R少儿编程网-https://www.pxcodes.com

  • 基于XHTML和CSS标准的表示;85R少儿编程网-https://www.pxcodes.com

  • 使用Document Object Model进行动态显示和交互;85R少儿编程网-https://www.pxcodes.com

  • 使用XML和XSLT做数据交互和操作;85R少儿编程网-https://www.pxcodes.com

  • 使用XML HttpRequest与服务器进行异步通信;85R少儿编程网-https://www.pxcodes.com

  • 使用JavaScript绑定一切。85R少儿编程网-https://www.pxcodes.com

描述:85R少儿编程网-https://www.pxcodes.com

  • Ajax是结合了Java技术、XML以及JavaScript等编程技术,可以让开发人员构建基于Java技术的Web应用,并打破了使用页面重载的管理。85R少儿编程网-https://www.pxcodes.com

  • Ajax技术使用非同步的HTTP请求,在Browser和Web Server之间传递数据,使Browser只更新部分网页内容而不重新载入整个网页。85R少儿编程网-https://www.pxcodes.com

  • Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。这样,Web页面不用打断交互流程进行重新加裁,就可以动态地更新。使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面85R少儿编程网-https://www.pxcodes.com

3、jQuery85R少儿编程网-https://www.pxcodes.com

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。85R少儿编程网-https://www.pxcodes.com

特点:85R少儿编程网-https://www.pxcodes.com

jQuery是当前很流行的一个JavaScript框架,使用类似于CSS的选择器,可以方便的操作HTML元素,拥有很好的可扩展性,拥有不少插件。 85R少儿编程网-https://www.pxcodes.com

描述:85R少儿编程网-https://www.pxcodes.com

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

  • 对于用户来说,改善了页面的视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。85R少儿编程网-https://www.pxcodes.com

  • javaScript框架实际上是一系列工具和函数。85R少儿编程网-https://www.pxcodes.com

二、三者的关系85R少儿编程网-https://www.pxcodes.com

下面我用一张导图来阐述这三者的关系:85R少儿编程网-https://www.pxcodes.com

解释:85R少儿编程网-https://www.pxcodes.com

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

项目中用jQuery比较多,具体讲讲他。85R少儿编程网-https://www.pxcodes.com

jQuery能大大简化JavaScript程序的编写85R少儿编程网-https://www.pxcodes.com

要使用jQuery,首先要在HTML代码**前面加上对jQuery库的引用,比如:85R少儿编程网-https://www.pxcodes.com

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

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

Google提供的85R少儿编程网-https://www.pxcodes.com

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js85R少儿编程网-https://www.pxcodes.com

jQuery*方的85R少儿编程网-https://www.pxcodes.com

http://code.jquery.com/jquery-1.6.min.js85R少儿编程网-https://www.pxcodes.com

jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下:85R少儿编程网-https://www.pxcodes.com

1 定位元素 85R少儿编程网-https://www.pxcodes.com

JS 85R少儿编程网-https://www.pxcodes.com

document.getElementById("abc") 85R少儿编程网-https://www.pxcodes.com

jQuery 85R少儿编程网-https://www.pxcodes.com

$("#abc") 通过id定位 85R少儿编程网-https://www.pxcodes.com

$(".abc") 通过class定位 85R少儿编程网-https://www.pxcodes.com

$("div") 通过标签定位 85R少儿编程网-https://www.pxcodes.com

需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 85R少儿编程网-https://www.pxcodes.com

2 改变元素的内容 85R少儿编程网-https://www.pxcodes.com

JS 85R少儿编程网-https://www.pxcodes.com

abc.innerHTML = "test"; //现在的项目中有用到85R少儿编程网-https://www.pxcodes.com

jQuery 85R少儿编程网-https://www.pxcodes.com

abc.html("test"); 85R少儿编程网-https://www.pxcodes.com

3 显示隐藏元素 85R少儿编程网-https://www.pxcodes.com

JS 85R少儿编程网-https://www.pxcodes.com

abc.style.display = "none"; //现在的项目中有用到85R少儿编程网-https://www.pxcodes.com

abc.style.display = "block"; 85R少儿编程网-https://www.pxcodes.com

jQuery 85R少儿编程网-https://www.pxcodes.com

abc.hide(); 85R少儿编程网-https://www.pxcodes.com

abc.show();85R少儿编程网-https://www.pxcodes.com

abc.toggle(); //在显示和隐藏之间切换、85R少儿编程网-https://www.pxcodes.com

4 获得焦点 85R少儿编程网-https://www.pxcodes.com

JS和jQuery是一样的,都是abc.focus(); 85R少儿编程网-https://www.pxcodes.com

5 为表单赋值 85R少儿编程网-https://www.pxcodes.com

JS 85R少儿编程网-https://www.pxcodes.com

abc.value = "test"; 85R少儿编程网-https://www.pxcodes.com

jQuery 85R少儿编程网-https://www.pxcodes.com

abc.val("test"); 85R少儿编程网-https://www.pxcodes.com

6 获得表单的值 85R少儿编程网-https://www.pxcodes.com

JS 85R少儿编程网-https://www.pxcodes.com

alert(abc.value); 85R少儿编程网-https://www.pxcodes.com

jQuery 85R少儿编程网-https://www.pxcodes.com

alert(abc.val()); 85R少儿编程网-https://www.pxcodes.com

7 设置元素不可用 85R少儿编程网-https://www.pxcodes.com

JS 85R少儿编程网-https://www.pxcodes.com

abc.disabled = true; 85R少儿编程网-https://www.pxcodes.com

jQuery 85R少儿编程网-https://www.pxcodes.com

abc.attr("disabled", true);85R少儿编程网-https://www.pxcodes.com

8 修改元素样式85R少儿编程网-https://www.pxcodes.com

JS85R少儿编程网-https://www.pxcodes.com

abc.style.fontSize=size;85R少儿编程网-https://www.pxcodes.com

jQuery85R少儿编程网-https://www.pxcodes.com

abc.css('font-size', 20);85R少儿编程网-https://www.pxcodes.com

JS85R少儿编程网-https://www.pxcodes.com

abc.className="test";85R少儿编程网-https://www.pxcodes.com

JQuery85R少儿编程网-https://www.pxcodes.com

abc.removeClass(); 85R少儿编程网-https://www.pxcodes.com

abc.addClass("test");85R少儿编程网-https://www.pxcodes.com

9 判断复选框是否选中85R少儿编程网-https://www.pxcodes.com

jQuery85R少儿编程网-https://www.pxcodes.com

if(abc.attr("checked") == "checked")85R少儿编程网-https://www.pxcodes.com

注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用85R少儿编程网-https://www.pxcodes.com

相关免费学习推荐:JavaScript(视频)85R少儿编程网-https://www.pxcodes.com

以上就是jQuery JavaScript ajax区别是什么的详细内容,更多请关注少儿编程网其它相关文章!85R少儿编程网-https://www.pxcodes.com

来源:php中文网85R少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

jQuery JavaScript ajax区别是什么

      匿名评论
    • 评论
    人参与,条评论
    jQuery JavaScript ajax区别是什么

微信公众号

免费视频教程

先知道