JavaScript、jQuery、Ajax三者区别与联系

描述
简单总结：
1、JS是一门前端语言。
2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。
3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

关系比喻：
若把js比作木头，那么jquery就是木板（半成品）

1、JavaScript
javaScript的简写形式就是JS，一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能（其编写的程序可以被嵌入到HTML或XML页面中，并直接在浏览器中解释执行）。
组成部分：
核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）

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

3、Ajax
AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。

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

jQuery能大大简化JavaScript程序的编写要使用jQuery，首先要在HTML代码最前面加上对jQuery库的引用，比如：

//引用

库文件既可以放在本地，也可以直接使用知名公司的CDN（CDN加载jquery的好处），好处是这些大公司的CDN比较流行，用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了，所以能加快网站的打开速度。另外一个好处是显而易见的，节省了网站的流量带宽。
jQuery官方的 http://code.jquery.com/jquery-1.6.min.js

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

jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$(“div”) 通过标签定位
$(this) 定位当前元素

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

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有

元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素
$("#test").hide() - 隐藏 id=“test” 的元素

这是一些文本。

这是一些文本。

为第一个 div 元素添加类

这是示例文件（“demo_test.txt”）的内容：

jQuery AJAX 是个非常棒的功能！

这是段落的一些文本。

把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的

元素中：
$("#div1").load(“demo_test.txt #p1”);

jquery自定义的事件
该事件发生在整个DOM树加载完毕的时候
$(document).ready(function name(params) {
});
//缩写
$(function name(params) {
});
//缩写
$(function () {
});

单引号和双引号的使用
引号类型内外必须不一致（尽量使用外双内单）
console.log(“look ‘come’ here”); //结果： look ‘come’ here
特殊情况内外引号类型一致的，使用 \ 禁止编译
console.log(‘look ‘come’ here’); //结果： look ‘come’ here

-------------------正确
<input type=“button” οnclick=“alert(“弹窗”)” /> ----------------不正确

但为什么JS中的转义字符 \ 没有效果了呢？
因为，这段代码还是归于HTML的管辖范围，所以转义字符应该使用HTML的，而不是javascript的:
-------------------正确

事件绑定
$(function () {
//事件一
$(’.body-tab .header-btn’).click(function () {

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

        })
    });

})

jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
实例
$(“button”).click(function(){
$("#div1").load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==“success”)
alert(“外部内容加载成功!”);
if(statusTxt==“error”)
alert("Error: “+xhr.status+”: "+xhr.statusText);
});
});

jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$(“button”).click(function(){
$.get(“hello/test.json”,function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});

jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例
$(“button”).click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:“菜鸟教程”,
url:“http://www.runoob.com”
},
function(data,status){
alert(“数据: \n” + data + "\n状态: " + status);
});
});

jQuery.parent(expr)，找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$(“span”).parent(".class")
jQuery.parents(expr)，类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents()，返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next()，返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings()，返回兄弟姐妹节点，不分前后
jQuery.find(expr)，跟jQuery.filter(expr)完全不一样：

jQuery.filter()，是从初始的jQuery对象集合中筛选出一部分，而

jQuery.find()，的返回结果，不会有初始集合中的内容，比如$("p").find("span")，是从<p>元素开始找<span>，等同于$(“p span”)