首先附上jQuery官网
http://jquery.com/
2.0版本开始放弃了对IE7/8及其之前版本的兼容

准备工作

文件引入

• 必须引入jQuery库文件，引入方法与普通js文件一样

jQuery基本语法

• 单双引号通用
• $('selecter').function(参数)
• $符号代表jQuery,是jQuery的缩写
• 隐式迭代：获取一组标签，不需要遍历循环，即可直接操作
• 链式操作：不需要重复获取标签元素，在一个操作后面直接跟另一条命令
  jQuery每一个操作函数返回值均为object，所以才可以使用链式操作

文档就绪

jQuery文档就绪

• $(document).ready()或者简写为：$(function{})

与原生JS文档就绪比较

• window.onload vs $(function{})
• 前者必须等网页中所有的元素（包含图片、flash、视频等）全部加载完毕后执行，而后者等所有的DOM文档结构绘制完毕后即刻执行，不需要等待图片、flash等
  DOM大标签加载完毕就执行，如p、h、body、div等加载完就执行
• 一个页面只允许存在一个window.onload，而可以存在多个$(function{})

jQuery 选择器

基本选择器

• 标签选择器$('p') or $('div')
• 类选择器$('.class')
• ID选择器$('#id')
• 群组选择器$('div,span,p')
• 交集选择器$('p.top')
  选取类名为top的p标签
• 全局选择器$('*')

特殊情况

1. $(document)
2. $(window)
3. $('body')
4. $(this)
   页面中的标签需要加引号或者双引号

层次选择器

• 后代选择器$('#box span')
• 子级选择器$('#box>span')
• 紧邻同辈选择器$('#box+p')
  id名为box的后面一个p标签
• 相邻同辈选择器$('#box~p')
  id名为box的后面所有p标签

属性选择器

• $('[name]')选择所有具有name属性的标签元素
• $('[name=user]')所有name=user的标签
• $('[name!=user]')name不等于user
• $('[name^=user]')以user开头
• $('[name$=user]')以user结尾
• $('[name][id]')选择同时具有name和id的元素
  class、type、id等均为属性

过滤选择器

• :first$('ul li:first')
• :last$('ul li:last')
• :even 从0开始，选择集合中的偶数行
• :odd 同上，选择奇数行
• :eq(n) n从0开始计数
• gt(n) 集合中第n个后的元素/大于n的元素，从0开始计数
• lt(n) 同上反
• :not(selector)$('ul li:not(:eq(3))')选择不包含selector中的元素
• :header 选择所有h1~h6的标题元素
• :visible 可见元素
• :hidden 不可见元素
• :first-child 列表中的第一个元素，相对于本 身父元素
• :first-of-type 列表中同类型元素
• :nth-c hild(n) 列表中第n个元素，从1开始计数
• :nth-last-child(n) 倒序计数第n个元素
• :nth-of-type(n) 列表中同类型的第n个子元素，从1开始计数
• :empty 空元素
• :parent 含有子元 素或文本的元素
• :has(selector)$('div:has(h 2 )') 匹配包含h2的div
• :contains(text)$(':contains(hello)') 匹配包含hello的元素

常用的过滤方法（function）

1. get(i) 选择第i个元素，返回DOM对象
   不能采用jQuery写法$('h2').get(2)
   正确写法：$('h2').get(2).style.color = 'red'
2. eq(i) 选择第i个元素，返回jQuery对象
   可以采用jQuery写法$('h2').eq(2)
   正确写法：$('h2').eq(2).css('color','red')
3. first()|last() 选择第一个|最后一个元素
4. not(selector) 同not选择器
   $('h2').not(':contains(hello)')
5. has() 同has选择器
6. find(selector) 获取当前匹配元素集合中每一个元素的后代，同has选择器，但返回的是find中的标签，而不是像has的父级元素

表单选择器

• :input 表单元素，包括input、textarea、select、button
• :text 单行文本框元素，只能匹配type=text的文本框
• :password
• :radio 单选按钮
• :checkbox 复选框
• :submit type=submit和button标签
• :image type='image'的input图像域
• :reset
• :button
• :file
• :checked
• :focus 焦点所在元素

DOM对象和jQuery对象

jQuery对象转化成 DOM对象

• jQuery对象可以理解为由DOM元素组成的一个数组
• get(i)
  jQuery对象.get(i)
• jQuery对象[i]
  因为通过jQuery获取的对象类似于一个数组

DOM对象转化成jQuery对象

• 将DOM获取到的对象变量用小括号包起来，前面加$
  $(DOM对象)

jQuery事件

jQuery常用事件

鼠标事件

• 点击事件
  • click
  • dblclick 双击
  • mousedown
  • mouseup
• 移动事件
  • mouseover 移入该元素和对应的子元素
  • mouseout 移出该元素和对应的子元素
  • mouseenter 移入该元素，不对其子元素生效
  • mouseleave 移出该元素，不对其子元素生效
  • mousemove 鼠标每移动一个像素就会触发一次
• 组合事件
  • hover
    mouseenter+mouseleave
    jQuery1.8版本之后改为mouseover+mouseout

键盘事件

• keydown
• keyup
• keypress 产生可打印的字符时触发，不包括中文

表单事件

• focus 获得焦点
• submit
• blur 失去焦点
• change

事件绑定与移除

事件绑定

• 直接通过事件名绑定
  $(selector).事件名()
• bind()
  • 绑定一个事件：bind('事件类型',function(){});同直接绑定
  • 绑定多个事件：
    $(selector).bind({事件类型1:function(){},事件类型2:function(){},...})
    绑定一个事件：每用一次事件查找一次
    绑定多个事件：只需要查找一遍元素
• one()
  绑定一次性事件，比如按钮点击后自动不再具有点击效果，写法同bind绑定
• on()
  类似于bind绑定，比bind多一个参数(selector)，可实现动态更新事件（页面加载完后新增加的元素也可实现此事件方法，而bind无法响应页面加载后新增的元素）

    $('ul').on('click','li',function(){
        alert($(this).text);
    });                         //动态绑定
    $('ul li').bind('click',function(){
        alert($(this).text);    //静态绑定
    });

事件移除

• unbind()
  不传参数，则默认移除所有事件
  unbind([type],[function])
  • 一个参数：可以指定移除事件类型
  • 两个参数：可以指定移除某个事件其中的某个响应方法
• off()
  同on()相对应

事件的命名空间

• 在bind绑定事件中，在事件类型中，使用事件类型命名来创建同一个事件的多个名字，如click.a,click.b...
  命名空间后要加引号，如'click.a','click.b'

模拟事件

• trigger()
  自动触发事件，传入参数为事件类型
  链式写法：$(selector).trigger('事件类型')
• triggerHandler()
  同上，区别为：
  • 不会执行事件的默认行为，比如表单的功能按钮和链接标签
  • 只触发jQuery对象集合中的第一个元素的事件处理函数，比如无序列表下的li集合，只触发第一个li
  • 返回值为undefined，trigger返回jQuery对象，无法继续在其后增加链式操作
  • 阻止了事件冒泡
    使用传入事件event参数
    event.stopPropagation()也可以达到阻止事件冒泡功能

event对象

event只有事件处理函数能够访问，当事件处理完毕后，event就会自动销毁

event常用属性

• type
• clientX|clientY
  窗口可视化区域x和y坐标
• pageX|pageY
  相对于文档的x和y坐标，y坐标算上滚动条坐标
• offsetX|offsetY
  相对于事件源的坐标，在哪个标签内就获取这个标签内的x，y坐标
• screenX|screenY
  屏幕的x，y坐标
• keyCode
  检测键盘事件相对应的内码
• target
  返回触发该事件的DOM元素
  比如标签h、p、div...元素

event常用方法

• preventDefault()
  阻止默认行为
• stopPropagation()
  阻止事件冒泡行为

jQuery动画

• 显示/隐藏
  • show() hide()
    可传入参数：'slow'、'normal'、'fast'，或者毫秒数
  • toggle()
    一个按钮两种方式切换，再点击可隐藏
• 淡入/淡出
  • fadeIn() fadeOut()
    不传参数有默认动画，但速度很快
  • fadeToggle
    同toggle()
• 改变元素高度
  • slideUp()高度由大到小
    slideDown()高度由小到大
  • slideToggle()
    同toggle()
• 自定义动画
  • animate(param,speed,easing,callback)
    param：改变css一组样式属性名称和值得集合，只有数值型的属性可执行
    speed：'slow'、'fast'，或者毫秒数
    easing：'linear'匀速、'swing'由快到慢
    操作动画的方法：
    • stop()停止元素正在执行的动画暂停
    • finish()立即结束动画立刻到达动画的终点结束
    • delay()延迟执行动画效果

jQuery样式操作

样式设置与获取

• 获取样式$(selector).css(属性名称)传一个参数
  返回的为字符串类型，带有属性自带的单位值
• 设置样式$(selector).css({'color':'red','font':'16px',...})

在jQuery中设置数值类型样式可省略引号与单位,样式名称也可去掉引号，但遇到长单词需改用驼峰写法

通过类名来控制样式

• addClass('className')添加样式，通过类名增加样式
  多个类名：`addClass('className1' 'className2' ...)
• removeClass()方法同上，移除类名
• toggleClass()切换类名

快速获取和设置样式

• .width() .height()
  返回number类型，若传参，则为设置宽度和高度
• innerWidth() innerHeight()
  设置和获取元素的内宽度和内高度，包含padding，不含margin和border
• outWidth() outHeight()
  设置和获取元素的外高度和外宽度，包含padding和border
  当传入参数为true，返回值包含margin
• offset()
  设置或返回一个元素相对于文档的left和right，返回的是left和right的对象集合
• position()
  相对于该元素的父元素的left和right
• scrollTop() scrollLeft()
  设置于滚动条顶部和左部的偏移

    $('html,body').scrollTop();//设置,IE+FF为html，chrome为body
    $(window).scrollTop();//获取

jQuery内容和属性操作

• html()类似于原生js中的innerHtml

    获取和设置元素的内容，包含HTML标签
    将HTML标签和里面的文字以字符串形式完全获取出来
    比如段落内为hello，获取到的返回值为<p>hello</p>

传入参数，即改为设置新内容，会覆盖原先的内容

• text()类似于原生js里的innerText
  获取和设置元素内的文本内容，不含html标签，内容为hello的段落，获取到的返回值为hello
  传入参数，即为设置新内容，会覆盖原先的内容
• val()同原生js中的value()
• attr()元素属性
  • 传入一个参数，获取属性
  • 两个参数，设置单个属性attr(name,value)
  • 多个参数，设置多个属性
  • removeAttr()移除属性，传入属性名称即可
• prop()类似于attr()
  主要作用于select、radio、checkbox，选中则返回true
  removeProp()移除属性

jQuery对于节点的操作

创建节点

• $(selector)通过选择器获取节点
• $(element)把dom节点转换成jQuery节点
• $(html代码) $('<p>hello</p>')

在元素内部插入节点

• append() a.append(b) b元素插入到a元素中
• appendTo()
• prepend()
• prependTo

在元素外部插入节点

• after() a.after(b) b元素插入到a元素的后面
• insetAfter()
• before()
• insetBefore()

包裹节点

• wrap()将所匹配的元素用其他元素包裹起来
• unwrap()移除一个元素的父元素
• wrapAll()将所有元素用一个标签包裹起来
• wrapInner()将匹配的元素的子元素（包含节点和文本）用其他元素包裹

替换节点

• a.replaceWith(b)把a元素替换成b元素
• a.replaceAll(b)同上反

克隆节点

• clone()
  用于复制节点，复制出的节点不带有原有元素的事件，当传入参数为true时，复制元素并复制原有的事件

删除节点

• remove()
• detach()删除节点，保留原有数据和事件，同clone(true)
• empty()清空节点内的内容，不删除此节点

jQuery遍历元素

获取同辈元素

• next()获取紧邻元素后面的元素
• nextAll()获取元素后面所有同级元素
• prev()紧邻前面一个元素
• prevAll()元素前面所有元素
• siblings()元素前后所有同级元素

获取前辈元素

• parent()获取元素的父级元素(从父级开始遍历)
• parents()获取元素所有的祖先元素(从父级开始遍历)
• closest()参数必传，获取匹配选择器的第一个祖先元素(从自身开始遍历)

获取子元素

• children()获取一个元素的所有子元素，但是不包含子元素的子元素
• find(selector)获取所有匹配元素的子元素
• contents()当前所有的子节点（文本节点+注释节点）一般用于获取iframe框架内容

遍历

• each()对jQuery对象进行迭代，为每一个元素执行函数

each(function(index,element) {
  ...
})

• index()获取元素的下标位置
• is()判断当前元素是否符合选择器的条件，必传参数selector，匹配成功则返回true

jQuery插件封装

• $.extend()

  • 一个参数：用于扩展jQuery类本身，为jQuery类添加新方法

     $.extend({
        'functionName1':function(){
            ...
        },
        'functionName2':function(){
            ...
        },
        ...
   })   
  

  • 多个参数：用于合并对象
    • 浅拷贝：第一个参数可以传入空对象，那么原来的值就不会被后面的对象覆盖
      $.extend(obj1,obj2,obj3...)
    • 深拷贝：第一个参数传入true
      对象内包含对象，则会进行合并，并不会覆盖值

• $.fn.extend()
  用来扩展$元素的对象的方法

• jQuery命名冲突

  当另一个js插件库中也有$符号的存在，则会发生名字冲突

  jQuery.noConflict()放弃jQuery对命名的使用权

  • 将$全部用全称jQuery代替
  • 用新的变量作为$符号使用var $$=jQuery
  • 使用代码块，在代码块中仍可使用$符号

  插件库命名规范：jQuery.插件名字.版本号.js

jQuery-ajax

ajax简易方法

• $.get(url,data,callback,type)
  dada：需要发送的参数{key:value}
  callback：指定成功时的回调函数
  type：指定返回内容的格式（xml，html，script，json，string）
• $(selector).load(url)加载html，不需要回调函数即可加载到所选元素中
• $.getScript()加载脚本文件
• $.getJSON加载json文件
• $.ajax()

     $.ajax({
       'type':'get',
        'url':'',
        async:true,  //默认为true，可不写
        data:{},    //发送到服务器的数据
        dataType: ,   //预期服务器返回的数据类型
        success:callback,
        error:callback,
        ...
   })   
  

ajax参数详解

• type 请求方式，默认为get
• url
• data key:value格式
• dataType 返回的数据类型，如：json，不指定则jQuery自动断定
• cache 是否缓存，默认为true，当dataType为script与jsonp【跨域用途】时cache默认false
• global 是否触发ajax全局事件，默认true
• jsonpCallback 为jsonp请求指定一个回调函数的名称
• context 用于指定$(this)所指向的对象
• success 请求成功时所执行的操作function
• error 失败时，同上
• complete function函数，请求完成后执行，不管成败
  success:function(data,textStatus,xhr)
  error:function(xhr,textStatus,errormsg)
  complete:function(xhr,textStatus)

      data：请求地址返回的数据
      textStatus：请求状态的文字说明
      xhr：xmlHTTPRequest对象
  

• beforeSend function(xhr)发送请求之前调用
• username|password 响应HTTP访问认证请求的用户名和密码

ajax全局设置

用于设置全局ajax默认选项（当需要多次使用ajax请求时，有些默认参数是一样的，可以通过全局一次性设置）
$.ajaxSetup({同ajax参数})
设置后不会发送请求，只是设置，所以$.ajax()还是要写一遍

• 全局事件：
  $(document).ajaxComplete(function(){});
$(document).ajaxSuccess(function(){});
$(document).ajaxError(function(){});
$(document).ajaxStart(function(){});
$(document).ajaxSend(function(){});
$(document).ajaxStop(function(){});
  function内参数为：event，xhr，options

序列化数据

使用序列化方法时表单必须加一个name属性  
serialize() 序列化表单内容，将表单内容转化为字符串  
serializeArray() 序列化表单内容，返回数据格式

jQuery-jsonp跨域

同源策略：浏览器不能向不同域的地址提交请求

远程获取数据

• script的src属性
• img的src属性
• iframe的src属性

jsonp跨域

• 可以让网页从别的域名（网站）获取资料，只支持get请求
  设置☞
  dataType:'jsonp',
  jsonpCallback:'自己命名(服务器的function名称，不传参数，服务器会自动生成一个随机名)'