【JQuery基础知识/statusCode(状态码)】初学者必备

前言：

今天，给大家分享一下JQuery的基础知识，简单介绍一下JQuery高级_Ajax，和我们常见的一些statusCode(状态码)~~~

如果存在错误，请大家多多留言指正~小女子在此谢过！

***本文关键词：JQuery基础知识、状态码（见附录，在文章最后哦~~）。

一JQuery语法

1、JQuery("选择器").action()
通过选择器调用事件函数，但JQuery中，JQuery可以用$代替，即$("选择器").action();

• 选择器，可以直接使用CSS选择器，选中元素
• .action() 表示对元素执行的操作

2、文档就绪函数
防止了文档在完全加载（就绪）之前运行JQuery代码

• 代码：$(document).ready(function(){

　　　　　　//JQuery代码
　　　　　});

• 简写： $(function(){});

　　[文档就绪函数VS Window.onload]
　　　　①window.onload需在网页所有内容加载完成后执行（包括图片音频）
　　　　　　文档就绪函数，只需要在网页DOM结构加载以后便执行
　　　　②window.onload只能写一个，写多个只会执行最后一个
　　　　　　文档就绪函数，可以写多个，也不会被覆盖

3、JQuery对象与原生DOM对象互转

• 原生DOM对象转JQuery对象：$(DOM对象);

　　举个栗子
　　var p = document.getElementsByTagName("p");
　　$(p); //转换为JQuery对象

• JQuery对象转原生DOM对象:$("#p").get(0) $("#p")[0]

　　举个栗子
　　$("#p").get(0).style.color = "red";

　　解决多库冲突，用JQuery.noConflict([ex])替换$

 

二JQuery事件

1、事件绑定快捷方式
$("button:first").click(function(){
　　alert(1);
});

2、使用on绑定事件

• 使用on进行单事件绑定

　　$("button").on("click",function(){
　　　　//$(this)取到当前调用事件函数的对象
　　　　console.log($(this).html());
　　});

• 使用on同时为多个事件绑定同一函数

　　$("button").on("mouseover click",function(){
　　　　console.log($(this).html());
　　})

• 调用函数时传入自定义参数

$("button").on("click",{name:"aaa"}function(event){
　　//使用.event.date.属性名 找到传入的参数
　　console.log(event.data.name);
})

• 使用on进行多事件多函数绑定

　　$("button").on({
　　　　click:function(){
　　　　　　console.log("click");
　　　　},
　　　　mouseover:function(){
　　　　　　console.log("mouseover");
　　　　}
　　});

• 使用on进行事件委派

　　>>>将原本需要绑定到某元素上的事件，改为绑定在父元素乃至根节点上，然后委派给当前元素生效；
　　举个栗子

　　$("p").click(function(){});
　　$(document).on("click","p",function(){});

　　>>>作用：默认的绑定方式，只能绑定到页面初始时已有的p元素，当页面新增p元素时，无法绑定到新元素上；

             使用事件委派方式，当页面新增元素时，可以为所有新元素绑定事件
　　$("button").on("click",function(){
　　　　var p = $("<p>444444</p>");
　　　　$("p").after(p);
　　});
　　$("p").click(function(){
　　　　alert(1);
　　});
　　$(document).on("click","p",function(){
　　　　alert(1);
　　});

3、off()取消事件绑定

• $("p").off():取消所有事件
• $("p").off("click"):取消点击事件
• $("p").off("click mouseover"):取消多个事件
• $(document).off("click","p"):取消事件委派

使用.one() 绑定事件，只能执行一次
$("button").one("click",function(){
　　alert(1);
})

.trigger("event"):自动触发某元素的事件
//触发事件时，传递参数
$("p").trigger("click",["hahaha","heihei"]);

$("p").click(function(arg1,arg2){
　　alert("触发了p的click事件"+arg1+arg2);
})

$("button").click(function(){
　　$("p").trigger("click",["hahaha","heihei"]);
})

三JQuery动画

.show():让隐藏元素显示，同时修改元素的宽度、高度、opacity属性

• 不传参：让隐藏的元素直接显示，不进行动画
• 传入时间：多少毫秒之内完成动画
• 传入（时间，函数）：同时修改元素的宽度、高度、opacity属性

.hide():让显示元素隐藏，与.show()相反

.slideDown():让隐藏的元素显示，效果为从上往下，增加高度

.slideUp():让显示的元素隐藏，效果从下往上，减少高度
.slideToggle():让显示的元素隐藏，让隐藏的显示

.fadeOut():让显示元素隐藏，淡出
.fadeIn():让隐藏元素显示，淡入
.fadeToggle():让显示的元素隐藏，让隐藏的显示，淡入淡出
.fadeTo(时间，透明度，函数):同.fadeToggle()，但是多了透明度参数，可以指定显示最终的透明度

.animate({最终的样式属性键值对},动画时间,动画效果("linear" "swing"),回调函数)：自定义动画

四JQuery高级_Ajax

• HTTP:超文本传输协议
• URL：统一资源定位符
• 组成：协议名://主机名(IP地址):端口号/项目资源地址？传递参数键值对#锚点

　　举个栗子
　　http://127.0.0.1:8080/jd/index.html?name=xiaoxi

　　localhost 或 127.0.0.1 表示本机IP。

【JSON对象】

• JSON对象是键值对的集合，键与键之间用":"分隔，多个键值对之间用","分隔
• 多个JSON对象，可以放到数组中去。JSON对象和数组，可以相互嵌套
• JSON的键，必须是字符串

附录状态码

http statusCode(状态码) 200、300、400、500序列 >>>注：200, 300, 404, 500（重点记忆）

201-206都表示服务器成功处理了请求的状态代码，说明网页可以正常访问。
200（成功） 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201（已创建） 请求成功且服务器已创建了新的资源。
202（已接受） 服务器已接受了请求，但尚未对其进行处理。
203（非授权信息） 服务器已成功处理了请求，但返回了可能来自另一来源的信息。
204（无内容） 服务器成功处理了请求，但未返回任何内容。
205（重置内容） 服务器成功处理了请求，但未返回任何内容。与 204 响应不同，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。
206（部分内容） 服务器成功处理了部分 GET 请求。

300-3007表示的意思是：要完成请求，您需要进一步进行操作。通常，这些状态代码是永远重定向的。

300（多种选择） 服务器根据请求可执行多种操作。服务器可根据请求者 来选择一项操作，或提供操作列表供其选择。

301（永久移动） 请求的网页已被永久移动到新位置。服务器返回此响应时，会自动将请求者转到新位置。您应使用此代码通知搜索引擎蜘蛛网页或网站已被永久移动到新位置。
302（临时移动） 服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。会自动将请求者转到不同的位置。但由于搜索引擎会继续抓取原有位置并将其编入索引，因此您不应使用此代码来告诉搜索引擎页面或网站已被移动。
303（查看其他位置） 当请求者应对不同的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。对于除 HEAD 请求之外的所有请求，服务器会自动转到其他位置。
304（未修改） 自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。

如果网页自请求者上次请求后再也没有更改过，您应当将服务器配置为返回此响应。由于服务器可以告诉 搜索引擎自从上次抓取后网页没有更改过，因此可节省带宽和开销。

305（使用代理） 请求者只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。
307（临时重定向） 服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。会自动将请求者转到不同的位置。但由于搜索引擎会继续抓取原有位置并将其编入索引，因此您不应使用此代码来告诉搜索引擎某个页面或网站已被移动。

4XXHTTP状态码表示请求可能出错，会妨碍服务器的处理。

400（错误请求） 服务器不理解请求的语法。

401（身份验证错误） 此页要求授权。您可能不希望将此网页纳入索引。

403（禁止） 服务器拒绝请求。

404（未找到） 服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。

　　举个栗子

　　http://www.0631abc.com/20100aaaa，就会进入404错误页面

405（方法禁用） 禁用请求中指定的方法。

406（不接受） 无法使用请求的内容特性响应请求的网页。

407（需要代理授权） 此状态码与 401 类似，但指定请求者必须授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。

408（请求超时） 服务器等候请求时发生超时。

409（冲突） 服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。服务器在响应与前一个请求相冲突的 PUT 请求时可能会返回此代码，以及两个请求的差异列表。

410（已删除） 请求的资源永久删除后，服务器返回此响应。该代码与 404（未找到）代码相似，但在资源以前存在而现在不存在的情况下，有时会用来替代 404 代码。如果资源已永久删除，您应当使用 301 指定资源的新位置。

411（需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。

412（未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。

413（请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414（请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。

415（不支持的媒体类型） 请求的格式不受请求页面的支持。

416（请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态码。

417（未满足期望值） 服务器未满足"期望"请求标头字段的要求。

500至505表示的意思是：服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

500（服务器内部错误） 服务器遇到错误，无法完成请求。

501（尚未实施） 服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。

502（错误网关） 服务器作为网关或代理，从上游服务器收到了无效的响应。

503（服务不可用） 目前无法使用服务器（由于超载或进行停机维护）。通常，这只是一种暂时的状态。

504（网关超时） 服务器作为网关或代理，未及时从上游服务器接收请求。

505（HTTP 版本不受支持） 服务器不支持请求中所使用的 HTTP 协议版本。

..。..。..。..。..。..。..。..。..。END..。..。..。..。..。..。..。..。..。

..。..。..。..。..。..。希望可以帮到你哟..。..。..。..。..。..。

作者：夕照希望
出处：http://www.cnblogs.com/hope666/