jQuery 知识整理

核心语法：  全局函数： jQuery()  快捷键： $


链式调用： $("p").css("bacnkground-color","yellow") 获取所有 p 元素并调整css 中的背景色为黄色

学习笔记：


1： 基础部分


选择网页元素：


选择表达式为CSS 选择器：
${document} // 选择整个文档对象
${'#myId'}  // 选择ID 为 myId 的网页元素
${'div.myClass'}  //选择class为myClass 的div元素
${'input[name=first]'}   // 选择name属性等于first的input元素

选择表达式为jQuery 特有表达式：
${'a.first'}  // 选择网页中第一个a元素
${'tr:odd'}  // 选择表格的奇数行
${'#myForm :input'}  // 选择表单中的input元素
${'div:visible'}  // 选择可见的div
${'div:gt(2)'}    // 选择所有的div元素 除了前三个
${'div:animated'}   //选择当前处于动画状态的div元素

改变结果集 -- 强大的过滤器

$('div').has('p')  // 选择包含p 元素的div元素
$('div').not('.myClass')   // 选择class 不等于 myClass 的div元素
$('div').filter('.myClass')  // 选择class = myClass 的div元素
$('div').dirst()   // 选择第一个div 元素
$('div').eq(5)     // 选择第六个div元素
$('div').find('h3')  选择 div中的 h3 元素

选择附近相关元素  从结果集出发
$('div').next('p')  // 选择 div元素后面的第一个 p 元素
$('div').parent()    // 选择 div 元素的父元素
$('div').closest('form')    //选择离div最近的form 父元素
$('div').children()       //选择 div 的所有子元素
$('div').siblings()      // 选择div的同级元素

链式操作：
    　　$('div').find('h3').eq(2).html('Hello');  // 找到 div 中 h3 元素的 第三个元素并改信息为 Hello 
最赞的，每一步都返回一个jQuery 对象  不同操作可以连接在一起
.end()  回退一步

元素的操作：  取值和赋值   jQuery设计思想之四  就是使用同一个函数来完成取值和赋值

$('h1').html()   // htlm 没有参数 表示取出 h1 的 值
$('h1').html('hello')   //  html 有参数 表示赋值 hello 给 h1

常见的取值和赋值函数：
.html()   // 设置或返回所选元素的内容（包括 HTML 标记）
.text()  // 设置或返回所选元素的文本内容
.attr()   // 取出或设置某个属性的值
$("#submit").attr({ disabled: "disabled" });  禁用提交按钮防止重复提交
.width()  // 取出或设置某个元素的宽度
.height()    // 取出或设置某个元素的高度
.val() - 设置或返回表单字段的值

最好元素定义ID  这样就可以通过 $('#idName').html()  来访问元素对象
注意： 如果结果集包含多个元素 那么赋值的时候将对所有元素都赋值，取值的时候只取第一个元素的值

元素的操作-- 移动：
两种方式：   1  $('div').insertAfter($('p'))   把  div元素移到 p 元素的后面   这里返回 div 元素
2  $('p').after($('div'))    把 p 元素放在 div 元素的前面     这里返回 p 元素

四对：  insertAfter/after 现存元素外部
insertBefore/before   现存元素外部
appendTo/append       现存元素内部
prependTo/prepend     现存元素内部

元素复制： .clone()
元素删除： .remove() /  .detach()  不同 前者不保留被删除元素的事件  后者保留
元素创建： 　$('<p>Hello</p>');

工具方法：  定义在 jQuery 构造函数上的方法，可以直接使用   jQuery.method()
其他方法定义在 构造函数的 prototype 对象上的方法，jQuery.prototype.method() 必须生成实例(选中元素) 才能使用

$.trim() 去掉空格
$.each() 便利一个数组或对象
$.inArray() 返回一个值在索引位置 没有返回-1
$.grep() 返回数组中符合某种标准的元素
$.extends() 将多个对象合并到第一个对象中
$.makeArray()  将对象转化为数组
$.type() 判断对象类别
$.isArray() 是否数组
$.isEmptyObject() 是否空对象
$.isFunction() 是否函数



事件操作：  注意 当元素采用 id= 时 使用 $('#id')   如果是 class="className" 使用 $(".className") 来获取值
$(document).ready(function()  当页面全部加载完才调用 推荐使用这个 不然有些事件不一定能够执行

.click()  鼠标单击触发事件
.slideUp(毫秒)  点击后元素消失(一般配合 click使用)
.slideDown(毫秒)  点击后元素出现(一般配合 click使用)
.change() 在某个域被使用或者改变时触发事件
.dblclick() 鼠标双击触发事件
.focus() 表单元素获取焦点时触发事件  如 $("input").focus(function(){});
$("input").css("background-color","#FFFFCC")  改变元素的颜色
.focusin() 当前面的元素或者其下的子元素获取焦点时触发事件
.focusout() 当前面的元素或者子元素失去焦点时触发的事件 
.hover  鼠标指针悬停触发事件
.ready()  DOM 加载完成
.select()  选取输入框的文本时触发事件
.submit()  submit 表单被提交时触发的事件
.toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
语法： $(selector).toggle(function1(),function2(),functionN(),...)

$("p").one("click", function() {});  想让事件只运行一次 可以使用 .one() 方法
.bind() 绑定事件方法，可以同时绑定多个事件
如 $('input').bind('click change',function() {alert('Hello');});    //同时绑定click和change事件
.unbind() 解除事件绑定  $('p').unbind('click');

.hide() 隐藏参数包含  1 slow 缓慢隐藏
  2 fast 快速隐藏
  3 normal 正常速度
  4 毫秒 延缓指定时间隐藏
注意 这里有个 callback 函数 即当动画完成后调用  
语法为： .hide("slow",function(){其他事件});

.show() 显示元素  和 hide 正好相反
如果想一个按钮显示和隐藏两个功能都要 请使用 .toggle

反向在html 元素 中获取 script 内的var值
如 <script type="text/javascript"> var demo = "123"</script>
html 元素内获取  <p><script type="text/javascript">document.write(demo)</script></p> 

2： ajax 部分 多种技术综合    Ajax与服务器端语言无关。
XHTML  使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取
DOM（Document Object Model,文档对象模型）实现动态显示和交互；  
XML  一种描述数据的格式 AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择
javascript 使用JavaScript绑定和处理所有数据


ajax 核心对象 XMLHttpRequest 和服务器的交互过程
初始化--> 发送请求--> 等待服务器相应--> 接受响应
步骤： 1 创建 XMLHttpRequest 对象
   2  使用 open 方法设置和服务端交互的相应参数，包括发送请求的方式(get/post) 请求的URL 和是否异步交互
   3 使用 send 方法发送请求
   4 使用 onreadystatechange事件 监听服务器端反馈，根据 readyState 属性判断和服务器端的交互是否完成
根据 status 属性判断服务器是否正确返回了数据，完成后接受server return data
更简单的实现方法： jQuery


jQuery Ajax 方法：
selector：存放返回的数据的元素，示例中的<div id="message"></div>
URL：请求的地址
data：发送至服务器的 key-value 数据 json
callback： 请求完成后要执行的函数(不管请求成功或者失败)

ajax 缺陷： 1 大量使用了javascript 和 ajax 引擎，需要浏览器支持，测试兼容性
2 ajax 更新的时候并没刷新页面，所以回退的功能是失效的。 需要添加 数据已更新的提示
3 对流媒体的支持不如flash java applet 好
4 对终端设备支持度较差



1  .load()  语法结构： $(selector).load(URL,data,callback)


   var userName = document.getElementById("UserName").value;  // 获取用户输入
   
   //load()方法从服务器加载数据，并把返回的数据放入被选元素中。  
   get 方式：       $('#message').load("AJAX?name=" + userName);
   post 方式： $("#message").load("AJAX?name="+userName,{"Content-type":"application/x-www-form-urlencoded"});
   
2： $.ajax  语法结构   $.ajax({name:value, name:value, ... }) 内部为 k-v格式内容
$.ajax({
url:"UserServlet?method=findAccount",//传入的servlet和对应的方法
type:"post",//提交方式
dataType:"json",//提交的数据为json串
data:{"logname":$('#loginname').val()},//传入的数据为输入的登录名
});

内部的一些方法：
beforeSend(function(){});   //发送请求前运行的函数
或者  beforeSend: function (){},
$("#submit").attr({ disabled: "disabled" });  请求前禁用 提交按钮 防止重复提交

async : 布尔值，表示请求是否异步处理。默认是 true。
complete(function(){},status);  请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）
complete: function () {$("#submit").removeAttr("disabled");}, 请求后放开禁用的提交按钮

contentType: 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
data: 发送的数据
error(function(){},status,error) 如果请求失败运行的函数
success(function(){},status,sucess) 请求成功运行的函数
success: function (data){}, 这里的data 就是返回的数据 Sucess 或者 Error
timeout 设置本地的请求超时时间
type： 规定请求的类型 get/post

3：$.get(URL,callback)  $.get() 方法通过 HTTP GET 请求从服务器上请求数据。

4： $.post(URL,data,callback)  $.post() 方法通过 HTTP POST 请求从服务器上请求数据。

不刷新页面与服务器通讯的方式：
1：Flash
2：java applet
3: 使用框架  
4：隐藏的 iframe
配置 iframe
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
通过 iframe 的name 属性 可以在任何地方加载iframe 指定页面
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

5：XMLHttpRequest  该对象是对于 java script 的扩展，可使网页与服务器通讯，是创建ajax 应用的最佳选择。



全局ajax 处理程序： 都可以写到内部ajax 方法体内
  $(document).ajaxComplete(function (event, xhr, settings) {
$('#dd').text("ajax 启动完成 "+xhr1.responseText);
  });
  // ajax 错误触发
  $(document).ajaxError(function (event,xhr,settings,error) {
$('#dd').text("ajax error = "+error.toString());
  });
  // ajax 请求发送前触发
  $(document).ajaxSend(function (evetn,xhr,settings,error) {
  $('#cc').text("加载前触发");
  });
  // ajax 请求发送时检查是否还有其他未完成的ajax 请求  全局事件  1.9 以后绑定document
  $(document ).ajaxStart(function() {
$("#bb" ).text("ajax is start");
  });
  // ajax 请求结束后 检查是否还有其他未完成的ajax请求 没有的话会触发
  $( document ).ajaxStop(function() {
$( "#bb" ).hide();
  });
  // ajax 运行完毕后触发 注意 这里触发后才进行 ajax 后的下一步 类似于 ajax 内部的 success
  $(document).ajaxSuccess(function () {
alert('ajax 运行完成');
  });
辅助函数：
主要是序列化  $.param(obj)  obj 可以是 dom 对象 也可以是其他对象
ajax 方法详解：
ajax 方法类型 $.ajax(url[,settings]) 返回的是一个 XMLHttpRequest 对象
url: String 类型的URL字符串
settings： PlantObject 一个以键值组成的ajax请求设置，所有选项都是可选。可以使用 $.ajaxSetup() 设置任何默认

-------------------------------------消息类型设置

1： accepts  一个键值对集合映射给定的dataType 到其的MIME类型，可以从发送accept 请求头信息中获得。
意思就是告诉服务器我能接受什么类型数据
2： dataType  告诉服务器我想要什么类型的数据，没有指定的话自动推断  XML JSON Script  String
如  dataType: 'json',
XML：返回 xml文档
html： 纯文本html 包含的script 标签会在插入dom 时执行
script： 把响应的结果当做js来执行并将其当做文本返回。
text：返回纯文本
jsonp:以 JSONP 的方式载入 JSON 数据块。会自动在所请求的URL最后添加"?callback=?"
json:


3:  contentType  告诉服务器我要发什么类型的数据
如    contentType: 'application/x-www-form-urlencoded',  窗体数据被编码为名称/值对。这是标准的编码格式
multipart/form-data：窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
text/plain：窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符
--------------------------------------消息类型设置结束
4: async (default true) 请求是否异步，如果为false 则失去ajax原意

5:  beforeSend(xhr,settings)  function类型  可以自定义 http 头部
请求发送前的回调函数，if return false 将取消这个请求

6: cache(default true)  dataType为 json 或者script 时默认false
是否缓存该页面  原理是在 GET 请求参数中添加一个 _={timestamp}时间戳

7: complete(xhr,textStatus) 完成ajax请求后的回调函数,在 success 和 error 后均可用
return xhr 对象和 一个描述请求状态的字符串 success/notmodified/nocontent/error/timeout/abort

8: contents 一个以"{字符串/正则表达式}"配对的对象，根据给定的内容类型，解析请求的返回结果

9: context(Object)  用于设置ajax 相关回调函数的上下文，如指定一个dom对象作为参数
  context: document.body


10: converters默认: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

11： crossDomain(boolean false) 跨域请求

12: data 类型: PlainObject 或 String 或 Array
发送到服务器的数据，会被转换成一个查询字符串 追加到 GET 请求的URL 后面
必须是 键值对形式 {k:v,k:v} 如果参数为数组会自动转换

13: dataFilter 类型 function(String data,String type)
用来处理XMLHttpRequest 原始相应数据的函数  data 为ajax 返回的原始数据  type 为 dataType参数

14：error function(xhr,textStatus,error) 请求失败调用这个函数

15: global(default true) 是否触发全局ajax事件处理程序  false 将不触发 如 ajaxStart  ajaxStop

16: headers {k:v} 类型
一个额外的"{键:值}"对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;
因此，请求头中的设置值，会被beforeSend 函数内的设置覆盖
17: jsonp String或boolean
在一个JSONP请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分
18: jsonpCallback  为jsonp请求指定一个回调函数名
19: method: post/get  如果用的1.9 前版本 需要 type 
20: mimeType  String类型 用来覆盖 xhr 的 MIME 类型
21：password (String)认证密码
26： username  认证用户名
22: statusCode PlantObject 类型  HTTP状态响应码
$.ajax({
  statusCode: {
404: function() {
  alert("page not found");
}
  }
});
23：success(data,textStatus,xhr)
data:服务器返回的数据
textStatus： 状态

24: timeout 请求超时时间
25: URL 请求地址
xhr 方法：
xhr.done(function(){}) 1.5版本后代替 xhr.success()
xhr.fail(function(){})  1.5版本后代替 xhr.error()
xhr.always(function(){})  1.5 版本后代替 xhr.complete()

xhr.readyState
xhr.responseXML/responseText
xhr.status
xhr.statusText
xhr.getAllResponseHeaders()  String
xhr.getResponseHeader(name)
xhr.overrideMimeType(mimeType)
xhr.setRequestHeader(name,value) 
xhr.statusCode(callbacksByStatusCode)

回调函数：
Callback function Queues(回调函数)
beforeSend, error, dataFilter, success 和 complete接受的回调函数是在合适的时间调用。
















3： Echarts 插件学习
统计图库  MSChart:Visual Studio里的自带控件
  ichartjs: 基于 HTML5的图形库，支持各种图形绘制
  Chart.js:基于HTML5 图库适合移动端
  ECharts:  基于HTML5的百度库