JQuery学习&资料整理

要求时间：3天
第一天：
jQuery是一个JavaScript函数库。
jQuery 极大地简化了 JavaScript 编程。

jQuery库包含以下功能：
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTMLDOM遍历和修改
AJAX
Utilities

在项目中如何引入JQuery？
JQuery就是一个文件，下载后放到项目根目录
在index首页head处添加

<script src="jquery-3.1.1.js"></script>

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

1、JQuery语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行”操作”（actions）。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
short way：先抓取元素，再操作元素。
基础语法：$(selector).action()
美元符号定义JQuery
选择符（selector）”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例：

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

写法

文档就绪事件，为什么，比如：试图隐藏一个不存在的元素、获得未完全加载的图像的大小。
写法1：

$(document).ready(function() {
// JQuery代码
});

写法2：
简介写法

$(fucntion() {
// JQuery代码
});

JQuery选择器

jQuery 中所有选择器都以美元符号开头：$()。
1.元素选择器$("p")
2.#id选择器$("#test")
3..class选择器$(".test")

这句后面不是函数，而是一个CSS设置，令我不解的是口号内容并不是property：value；的形式

$("tr:odd").css("background-color","yellow");

经自己写的JQuery函数独立成文件

JQuery事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

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

常用的JQuery事件方法
$(document).ready()$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。

blur() 当元素市区焦点是，触发blur事件。

JQuery效果

1.隐藏和显示

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

2.淡入淡出

$("p.fade").fadeIn("slow");
$("p.fade").fadeOut("slow");
$("p.fade").fadeToggle("slow");
$(selector).fadeTo(speed,opacity,callback); 所有元素应该都可以使用，后边的参数是不透明度（值介于 0 与 1 之间）

3.滑动

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

第二天

4.动画

$(selector).animate({params},speed,callback);
params是css属性，也就是说通过重设元素的CSS属性实现动画效果。

$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

5.Callback

JQuery HTML

1.捕获 获取内容和属性

DOM = Document Object Model（文档对象模型）
获得内容 - text()、html() 以及 val()

alert("Text: " + $("#test").text());
alert("HTML: " + $("#test").html());
alert("值为: " + $("#test").val());

以上这三个方法，括号内如果跟值，那就变成了设置新值，为空则表示抓取现有值。

2.添加元素

$("p").prepend("在开头追加文本");

添加若干新元素

<script>
function appendText(){
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>

3.删除元素

删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("#div1").remove(); 
$("#div1").empty();

过滤被删除的元素

$("p").remove(".italic");

4.获取并设置CSS类

$("h1,h2,p").addClass("blue");
$("div").addClass("important");添加指定的样式
$("h1,h2,p").removeClass("blue");删除指定的样式
$("h1,h2,p").toggleClass("blue");

5.css()方法

alert("背景颜色 = " + $("p").css("background-color"));
$("p").css("background-color","yellow");

6.JRuery尺寸

$("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

JQuery遍历

这里的遍历指什么？
jQuery 遍历，意为”移动”，用于根据其相对于其他元素的关系来”查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

1.遍历祖先

jQuery parent() 方法—>找你爸

$("span").parent().css({"color":"red","border":"2px solid red"});

jQuery parents() 方法—>一直找到你祖宗

$("span").parents(可以加过滤"ul").css({"color":"red","border":"2px solid red"});

jQuery parentsUntil() 方法—>就查到往上第几辈人

$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

2.遍历后代

jQuery children() 方法—>找孩子

$("div").children("可加过滤").css({"color":"red","border":"2px solid red"});

jQuery find() 方法—>找所有后代

$("div").find("span").css({"color":"red","border":"2px solid red"});
$("div").find("*").css({"color":"red","border":"2px solid red"});

3.遍历同胞

$("h2").siblings().css({"color":"red","border":"2px solid red"})所有同胞;
$("h2").next().css({"color":"red","border":"2px solid red"});下一个同胞
$("h2").nextAll().css({"color":"red","border":"2px solid red"});剩下顺序的所有同胞
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});剩下的区间同胞但不包括h6

jQuery prev(), prevAll() & prevUntil() 方法，同上反方向遍历。

4.遍历过滤

$("div p").first().css("background-color","yellow");返回第一个找到的$("div p").last().css("background-color","yellow");返回最后一个
$("p").eq(1).css("background-color","yellow");返回索引等于1的元素并设置背景色
$("p").filter(".url").css("background-color","yellow");返回所有p.url的元素并设置背景色
$("p").not(".url").css("background-color","yellow");和filter反向

JQuery AJAX 简介

第三天
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

1.JQuery ajax()方法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法：$.ajax({name:value, name:value, … })

为所有 AJAX 请求设置默认 URL 和 success 函数：

$("button").click(function(){
$.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){
$("div").html(result);}});
$.ajax();
}); 

2.jQuery ajaxSetup() 方法

ajaxSetup() 方法为将来的 AJAX 请求设置默认值。

$("button").click(function(){
$.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){
    $("div").html(result);}});
    $.ajax();
});

语法：$.ajaxSetup({name:value, name:value, … })
参数表有很多，需要的时候再查。

3.jQuery get()方法

$.get(“test.php”);

请求 “test.php” 并连同请求发送一些额外的数据（忽略返回结果）：
$.get(“test.php”, { name:”Donald”, town:”Ducktown” });

请求 “test.php” 并传递数据数组到服务器（忽略返回结果）：
$.get(“test.php”, { ‘colors[]’ : [“Red”,”Green”,”Blue”] });

请求 “test.php” 并提醒请求的结果：
$.get(“test.php”, function(data){
alert(“Data: ” + data);
});

语法:
$.get(URL,callback);
$.get(URL,data,function(data,status,xhr),dataType)

URL：必需，请求的URL
data：可选，规定联通请求发送到服务器的数据
function(data,status,xhr)：可选，请求成功时运行的函数
data：返回的数据
status：请求的状态(“success”,”notmodified”,”error”,”timeout”,”parsererror”)
xhr：包含XMLHttpRequest对象
dataType：预期的服务器相应类型
“xml”,”html”,”text”,”script”,”json”,”jsonp”
在对话框中输出空格
alert(“数据: ” + data + “\n状态: ” + status);

4.jQuery getJSON()方法

语法：$(selector).getJSON(url,data,success(data,status,xhr))

5.jQuery getScipt()方法

使用 AJAX 请求，获取和运行 JavaScript：
$(“button”).click(function(){ $.getScript(“demo_ajax_script.js”); }); 语法：$(selector).getScript(url,success(response,status))
success:可选

6.JQuery param()方法

对象序列化

7.JQuery post()方法

$(document).ready(function(){
    $("button").click(function(){
        $.post("/try/ajax/demo_test_post.php",{
            name:"菜鸟教程",
            url:"http://www.runoob.com"
        },
        function(data,status){
            alert("数据: \n" + data + "\n状态: " + status);
        });
    });
});

后面的function为回调函数

语法：
$.post(URL,data,callback); $(selector).post(URL,data,function(data,status,xhr),dataType)
$.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    }); 

8.JQuery ajaxComplete()方法

$(document).ready(function(){
    $(document).ajaxStart(function(){
        $("#wait").css("display","block");
    });
    $(document).ajaxComplete(function(){
        $("#wait").css("display","none");
    });
    $("button").click(function(){
        $("#txt").load("demo_ajax_load.php");
    });
});

ajaxStart,首先运行的ajax
ajaxComplete上面ajax执行完，将等待控件隐藏。

9.JQuery ajaxError()方法

$(document).ajaxError(function(){
        alert("一个错误发生!");
    });

没有看到弹窗，书名没出错，
ajaxError() 方法规定 AJAX 请求失败时运行的函数。

10.JQuery ajaxSend()方法

ajaxSend() 方法规定 AJAX 请求即将发送时运行的函数。

$(document).ajaxSend(function(e,xhr,opt){
        $("div").append("<p>Requesting " + opt.url + "</p>");
    });
    $("button").click(function(){
        $("div").load("demo_ajax_load.php");
    });

ajaxSend在下面ajax之前限制性，捕捉的参数刚好为当前要执行的ajax，可以做监控或标志什么的。

11.JQuery ajaxStart()方法

$(document).ajaxStart(function(){
        alert("run before ajax below")
        $(this).html("<img src='demo_wait.gif' />");
    });
    $("button").click(function(){
        $("div").load("demo_ajax_load.php");
    });

ajaxStart() 方法规定 AJAX 请求开始时运行的函数。

12.JQuery ajaxStop()方法

$(document).ajaxStop(function(){
        alert("所有 AJAX 请求已完成");
    });
    $("button").click(function(){
        $("div").load("demo_ajax_load.txt");
        $("div").load("demo_ajax_load.php");
    });

ajaxStop() 方法规定所有的 AJAX 请求完成时运行的函数。

Q:什么叫“自 jQuery 版本 1.8 起，该方法只被附加到文档”？

13.JQuery ajaxSuccess()方法

$(document).ajaxSuccess(function(){
        alert("AJAX 请求完成");
    });
    $("button").click(function(){
        $("div").load("demo_ajax_load.txt");
    });

ajaxSuccess() 方法规定 AJAX 请求成功完成时运行的函数。
注：这应该是通用方法，谁成功了都会问一问它。function里可带参数，做些判断，比如：

$(document).ajaxSuccess(function(e,xhr,opt){
    if (opt.url == "demo_ajax_load.txt") {
      alert("AJAX 请求完成");
    };

14.JQuery load()方法

jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
把文件 “demo_test.txt” 的内容加载到指定的

元素：

$("button").click(function(){
        $("#div1").load("/try/ajax/demo_test.txt");
    });

语法：$(selector).load(url,data,function(response,status,xhr))
function(response,status,xhr) means callback

也可以把 jQuery 选择器添加到 URL 参数。
$(“#div1”).load(“demo_test.txt #p1”);有空格
这样可以选择性的加载。

15.JQuery serialize()方法

$("button").click(function(){
        $("div").text($("form").serialize());
    });

serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
怎么根据将检索的值编辑成url格式的字符串，序列化。
语法：$(selector).serialize()

16.JQuery serializeArray()方法

serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。
语法：$(selector).serializeArray()

$("button").click(function(){
        x=$("form").serializeArray();
        $.each(x, function(i, field){
            $("#results").append(field.name + ":" + field.value + " ");
        });
    });

用法：将表单项以数组的形式序列化
serializeArray() 方法通过序列化表单值来创建对象（name 和 value）的数组。

JQuery 杂项 data()方法

在元素上挂载数据，但不在元素上显示
data() 方法向被选元素附加数据，或者从被选元素获取数据。
removeData() 方法移除之前通过 data() 方法设置的数据。
语法：$(selector).removeData(name)
name:可选。规定要移除的数据的名称。如果没有规定名称，该方法将从被选元素中移除所有已存储的数据。

$(document).ready(function(){
    testObj=new Object();
    testObj.greetingMorn="Good Morning!";
    testObj.greetingEve="Good Evening!";
    $("#btn1").click(function(){
        $("div").data(testObj);
    });
    $("#btn2").click(function(){
        alert($("div").data("greetingEve"));
    });
});

上面的testObj，很好的表现了JavaScript的写法，
还可以使用对象： $(selector).data(object)

jQuery 杂项 toArray() 方法

toArray() 方法以数组的形式返回 jQuery 选择器匹配的元素。

$("button").click(function(){
        x=$("li").toArray() // toArray方法
        for (i=0;i<x.length;i++)
        {
            alert(x[i].innerHTML);// innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
        }
    });

jQuery jquery 属性

返回jQuery 的版本号。

var version = $().jquery; 
alert("你正在运行的jQuery版本为: " + version);

jQuery jQuery.fx.interval 属性

$("#toggle").on("click",function(){
    $("div").toggle(5000);
});
$("#interval").on("click",function(){
    jQuery.fx.interval = 500;
}); 

语法：jQuery.fx.interval = milliseconds;
milliseconds 必需。规定以毫秒计的动画运行速率。默认是 13 毫秒。
jQuery.fx.off 属性用于对所有动画进行全局禁用或启用。
jQuery.fx.off = true|false;

jQuery jQuery.support 属性

jQuery.support.ajax：看浏览器是否支持ajax

jQuery length 属性

alert($("li").length);

jQuery - noConflict() 方法

当涉及多JS框架是，为了避免冲突引用$而设的方法 jquery使用$作为jQuery的简写，其他框架有的也会用。
如果两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("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 仍然在工作!");
  });
}); 

JSONP教程

Jsonp(JSON with Padding垫) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。同源不支持跨区。
JSONP 应用
1.服务端JSONP格式数据
2.客户端实现 callbackFunction 函数
3.jQuery 使用 JSONP
没太看懂，有时间在研究。

JQuery实例

都已看过，遇到问题时，再查阅。
链接：http://www.runoob.com/jquery/jquery-examples.html

JQuery参考手册

此部分作参考查询
链接：http://www.runoob.com/jquery/jquery-ref-selectors.html
1.JQuery选择器：列举了所有元素不同情况的抓取方法。
2.JQuery事件方法：列举了所有事件方法，可用于监听不同事件，然后做出需要的响应。
3.JQuery效果方法：列举了所有用于创建动画效果的 jQuery 方法。
4.JQuery HTML/CSS方法：列举了所有用于处理 HTML 和 CSS 的 jQuery 方法。
5.JQuery遍历方法：列举了所有遍历DOM的方法。
6.JQuery AJAX方法：列举了所有 jQuery AJAX 方法。
7.JQuery杂项方法
8.JQuery实用工具
9.JQuery回调对象
10.JQuery延迟对象
11.JQuery属性

JQuery插件

用时再说
1.JQuery Validate：表单验证
2.JQuery Accordion：jQuery Accordion 做复杂下拉列表会用到
插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。
3.JQuery Autocomplete：搜索条只能提示，提前检索，匹配。
4.JQuery Message：提示信息，显示后小时。（有问题）
5.jQuery Password Validation（密码验证）：可显示密码安全等级。
6.jQuery Prettydate：日期验证相关
7.JQuery Tooltip：悬浮提示
8.jQuery 树型菜单插件(Treeview)：将元素生成菜单树视图