jQuery技术准备

一 . jquery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和”查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

• $(this).hide() – 隐藏当前元素

• $(“p”).hide() – 隐藏所有

  元素

• $(“p.test”).hide() – 隐藏所有 class=“test” 的

  元素

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

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
//或者
$(function(){
    // 执行代码
});
//以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

二 . jquery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

tag元素选择器

//jQuery 元素选择器基于元素名选取元素。
$("p")

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

$("#test")

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".test")

更多

三. jquery 事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

鼠标事件

click() 元素点击后触发事件

$("p").click(function(){
    // 动作触发后执行的代码!!
});

dbclick() 元素双击后触发事件

$("p").dbclick(function(){
    // 动作触发后执行的代码!!
});

mouseenter() 鼠标移入元素后触发事件

$("p").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseleave() 鼠标移出元素后触发事件

$("p").mouseleave(function(){
    // 动作触发后执行的代码!!
});

mousedown() 鼠标在该元素上按下按键时触发事件

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

mouseup() 鼠标在该元素上松开按键时触发事件

$("#p1").mouseup(function(){
    alert("鼠标在该段落上松开！");
});

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

表单事件

focus() 表单元素获取焦点触发事件

/*当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦
点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：*/
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur() 表单元素失去焦点触发事件

/*当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：*/
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

submit() 提交表单时触发的事件

/*该事件只适用于 <form> 元素。
submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。*/
$("form").submit(function(){
    alert("提交");
});

change() 当元素值改变时触发的事件

change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

$("input").change(function(){
    alert("文本已被修改");
});

键盘事件

keydown() – 键按下的过程

$("input").keydown(function(){
    $("input").css("background-color","yellow");
});

keypress() – 键被按下

$("input").keypress(function(){
    $("span").text(i+=1);
});

keyup() – 键被松开

$("input").keyup(function(){
    $("input").css("background-color","pink");
});

文档/窗口事件

loag() 元素加载时触发的事件

//当图像全部加载时警报文本：
$("img").load(function(){
    alert("图片已载入");
});

load() 方法在 jQuery 版本 1.8 中已废弃。

reaize() 调整浏览器窗口大小时触发的事件

resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

$(selector).resize();
//或
$(window).resize(function(){
    $('span').text(x+=1);
});

scroll() 当用户滚动指定的元素时触发的事件

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

$("div").scroll(function(){
    $("span").text(x+=1);
});

unload() 当用户离开当前页面时触发

当发生以下情况下，会触发 unload 事件:

点击某个离开页面的链接

在地址栏中键入了新的 URL

使用前进或后退按钮

关闭浏览器窗口

重新加载页面

$(window).unload(function(){
    alert("Goodbye!");
});

unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。 Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。

四. jQuery效果（隐藏、显示、切换、滑动、淡入淡出、动画）

1. 显示/隐藏

hide()和show()

通过hide()和show()方法来隐藏和显示HTNL元素

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

//带有 speed 参数的 hide() 方法：
$("button").click(function(){
  $("p").hide(1000);
});
//带有 speed 参数的 hide() 方法，并使用回调函数：
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（jQuery自身提供 “linear” 和 “swing”，其他可以使用相关的插件）。

toggle()

使用 toggle() 方法来切换 hide() 和 show() 方法

//显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
  $("p").toggle();
});

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数；

对于这里，当 callback 函数加上括号时，函数立即执行，只会调用一次， 如果不加括号，元素显示或隐藏后调用函数，才会调用多次。

$(document).ready(function(){
  $(".hidebtn").click(function(){
    // popalert 不加括号() 
    $("div").hide(1000,"linear",popalert)
  });
});
function popalert(){
  alert("Hide() 方法已完成!"); 
}

2.淡入淡出

fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut() 方法用于淡出可见元素。

语法:

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法:

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

fadeTo() 没有默认参数，必须加上 slow/fast/Time

3.滑动

slideDown() 方法用于向下滑动元素。

语法:

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

callback为函数名，加括号触发slideDown()立即执行，不加括号slideDown()完成后执行

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp() 方法用于向上滑动元素。

语法:

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

callback为函数名，加括号触发slideUp()立即执行，不加括号slideUp()完成后执行

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

callback为函数名，加括号触发slideToggle()立即执行，不加括号slideToggle()完成后执行

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4. 动画

animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

callback为函数名，加括号触发animate()立即执行，不加括号animate()完成后执行

$("button").click(function(){
  $("div").animate({left:'250px'});
});
//操作多个属性
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});
//使用相对值
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
/*使用预定义的值
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!*/
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
// 使用队列功能
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

5. stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

$("#stop").click(function(){
  $("#panel").stop();
});
//动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
//可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop(true);
  });
});

5. 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);
//jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

五. jQuery html

1. 获取内容和属性

获取内容

text() – 设置或返回所选元素的文本内容

html() – 设置或返回所选元素的内容（包括 HTML 标签）

val() – 设置或返回表单字段的值

//通过 jQuery text() 和 html() 方法来获得内容：
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
//通过 jQuery val() 方法获得输入字段的值：
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性

attr() 方法用于获取属性值。

$("button").click(function(){
  alert($("#run").attr("href"));
});

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

prop()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是 undefined。

2. 设置内容和属性

设置内容

text() – 设置或返回所选元素的文本内容

html() – 设置或返回所选元素的内容（包括 HTML 标记）

val() – 设置或返回表单字段的值

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("run");
});

text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

设置属性

attr() 方法也用于设置/改变属性值。

$("button").click(function(){
  $("a").attr("href","http://www.xxxxx.com");
});
//attr() 方法也允许您同时设置多个属性。
$("button").click(function(){
    $("#run").attr({
        "href" : "http://www.xxx.com",
        "title" : "jQuery 教程"
    });
});

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("button").click(function(){
  $("#run").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

3.添加元素

在选中元素内添加

append() – 在被选元素的结尾插入内容

prepend() – 在被选元素的开头插入内容

after() – 在被选元素之后插入内容

before() – 在被选元素之前插入内容

//jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）
$("p").append("追加文本");
//jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("在开头追加文本");
//append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

在选中元素外添加

after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

4. 删除元素/或内容

remove() – 删除被选元素（及其子元素）

empty() – 从被选元素中删除子元素

// remove() 方法删除被选元素及其子元素。
$("#div1").remove();
//empty() 方法删除被选元素的子元素。
$("#div1").empty();

过滤被删除的元素

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

//删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");

5. 获取并设置 Class 类

addClass() – 向被选元素添加一个或多个类

removeClass() – 从被选元素删除一个或多个类

toggleClass() – 对被选元素进行添加/删除类的切换操作

addClass()

//向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
//在 addClass() 方法中规定多个类
$("button").click(function(){
  $("body div:first").addClass("important blue");
});

removeClass()

//在不同的元素中删除指定的 class 属性
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass()

//使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

5. css()方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回css属性

//返回首个匹配元素的 background-color 值:
$("p").css("background-color");
//获取更多元素的值
$(function() {
    $("button").click(function() {
       for(var i = 0; i < $("p").length; i++)
        {
            alert($("p").eq(i).css("background-color"));//.eq()根据索引获取
        }
  });
});

设置单个css属性

$("p").css("background-color","yellow");

设置多个css属性

//使用对象形式传入数据
$("p").css({"background-color":"yellow","font-size":"200%"});

六. 遍历dom

1. 祖先

parent()返回被选元素的直接父元素。

$(document).ready(function(){
  $("span").parent();
});

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

$(document).ready(function(){
  $("span").parents();
});
//使用可选参数来过滤对祖先元素的搜索
$(document).ready(function(){
  $("span").parents("ul");
});

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){
  $("span").parentsUntil("div");
});

2.后代

children() 方法返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。

$(document).ready(function(){
  $("div").children();
});
//使用可选参数来过滤对子元素的搜索
//下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
  $("div").children("p.1");
});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

//返回属于 <div> 后代的所有 <span> 元素
$(document).ready(function(){
  $("div").find("span");
});
//返回 <div> 的所有后代
$(document).ready(function(){
  $("div").find("*");
});

3. 同胞

siblings() 方法返回被选元素的所有同胞元素。

//返回 <h2> 的所有同胞元素
$(document).ready(function(){
  $("h2").siblings();
});
//也可以使用可选参数来过滤对同胞元素的搜索。
//下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素:
$(document).ready(function(){
  $("h2").siblings("p");
});

next() 方法返回被选元素的下一个同胞元素。

//返回 <h2> 的下一个同胞元素
$(document).ready(function(){
  $("h2").next();
});

nextAll() 方法返回被选元素的所有跟随的同胞元素。

//返回 <h2> 的所有跟随的同胞元素
$(document).ready(function(){
  $("h2").nextUntil("h6");
});

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）

4. 过滤

first()、last()、eq()、filter()、not()

first() 方法返回被选元素的首个元素。

$(document).ready(function(){
  $("div p").first();
});

last() 方法返回被选元素的最后一个元素。

$(document).ready(function(){
  $("div p").last();
});

eq() 方法返回被选元素中带有指定索引号的元素。

$(document).ready(function(){
  $("p").eq(1);
});

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

//返回带有类名 "url" 的所有 <p> 元素
$(document).ready(function(){
  $("p").filter(".url");
});

not() 方法返回不匹配标准的所有元素。

//返回不带有类名 "url" 的所有 <p> 元素
$(document).ready(function(){
  $("p").not(".url");
});

扩展

not 和 eq 可以实现反选的效果。

选取索引值不为 1 的 p 元素，并把背景颜色设置为黄色：

$("p").not(":eq(1)").css("background-color","yellow");

$("p").filter(".url").css("background-color","yellow");
//和
$("p.url").css("background-color","yellow"); 
//效果一样。
$("p").last().css("background-color","yellow");
//和
$("p:last").css("background-color","yellow");
//效果一样。
$("p").first().css("background-color","yellow");
//和
$("p:first").ss("background-color","yellow");
//效果一样。
$("p").not(".url");
//和
$("p:not(.url)");

七. jQuery ajax

1. load()

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

//把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt");
//把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1");

可选的 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);
  });
});

2. get()和post()

$.get() 方法通过 HTTP GET 请求从服务器上请求数据

语法：

$.get(URL,callback);

或

$.get( URL, data , callback, dataType )

//使用 $.get() 方法从服务器上的一个文件中取回数据
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,callback);

或

$.post( URL , data , callback , dataType )

GET 和 POST 方法的区别：

1、发送的数据数量

在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。

在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。

2、安全性

GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。

POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。

3、加入书签中

GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。

4、编码

在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。

在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。

5、可变大小

GET 方法中的可变大小约为 2000 个字符。

POST 方法最多允许 8 Mb 的可变大小。

6、缓存

GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。

7、主要作用

GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

八.其他

1. noConflict() ，释放jQuery对$符号的控制

jQuery 使用 $ 符号作为 jQuery 的简写。

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

//通过全名替代简写的方式来使用 jQuery
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});
//也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});
//如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});