jQuery常用操作

jQuery常用方法

• .eq(index),.get([index])
  获取到指定index的jQuery对象
  例如：$('div').eq(3)表示运行第四个jQuery的对象

• .next([selector]),prev([selector])
  next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
  prev取得匹配的元素集合中每一个元素紧邻的前面同辈元素的元素集合
  selector表明符合筛选的条件

• .nextAll([selector]),prevAll([selector])
  next获得每个匹配元素集合中每个元素所有后面的同辈元素
  prev获得每个匹配元素集合中每个元素所有前面的同辈元素
  selector表明符合筛选的条件

• .siblings([selectors])
  获得匹配元素集合中每个元素的兄弟元素
  selector表明符合筛选的条件

• .parent([selector])
  获取匹配元素集合的父元素
  selector表明符合筛选的条件

• .parents([selector])
  获取匹配元素集合的所有父元素
  selector表明符合筛选的条件

• .child([selector])
  获得匹配元素集合中每个元素的子元素
  selector表明符合筛选的条件

• .find([selector])
  查找符合选择器的后代元素

• .first()
  获取当前结果集中的第一个对象

• .last()
  获取当前结果集的最后一个对象

• .filter(selector), .filter(function(index))
  筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

• .not(selector), .not(function(index))
  从匹配的元素集合中移除指定的元素

• .is(selector), is(function(index)), is(dom/jqObj)
  判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

• .has(selector), .has(dom)
  筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

jQuery DOM操作

• .append()
  用于添加内容到元素尾部，可以是Dom对象，jQuery对象
  例如：$('body').append('<div><p>page</p></div>')

• .appendTo()
  用于把对象插入到元素尾部,可以理解成append()反过来
  例如：$('<div><p>page</p></div>').appendTo('body')

• .prepend()
  用于添加内容到元素头部，可以是Dom对象，jQuery对象
  例如：$('body').append('<div><p>page</p></div>')

• .prependTo()
  用于把对象插入到元素头部,可以理解成prepend()反过来
  例如：$('<div><p>page</p></div>').appendTo('body')

• .before()
  在对象前面插入内容

• .after()
  在对象后面插入内容，和.before()相反

• .remove([selector])
  删除选中的所有元素及其所有子元素
  selector表明符合筛选的条件

• .empty()
  清空选中元素内的所有子元素

• .wrap()
  为对象包裹一层和html结构

• .wrapAll()
  把所有匹配对象包裹在同一个HTML结构中

• .unwrap()
  移除对象的父元素

• html()
  用于获取或者修改元素的innerHtml
  当没有参数时，直接返回元素的innerHtml值，当有参数时，修改元素的innerHtml值

• text()
  用于获取或者修改元素的innertext

属性&CSS操作

• .val()
  用来获取或修改input里的value
  当没有参数时，获取到value的值；当有参数时用于修改value的值

• .attr()
  用于获取或修改元素的属性值
  如果只有一个参数，获取到元素当前属性的值；如果有两个参数，用于修改元素当前属性的值，可以设置多个属性的值

• .removeAttr()
  用于删除选中元素的属性

• .css()
  用于获取或修改元素css的值
  如果只有一个参数，获取到元素当前css属性的值；如果有两个参数，用于修改元素当前css属性的值，可以在css()内加对象批量操作css的值

• .addClass()
  用于给元素添加class名称，不会覆盖原来class名称，可以添加多个class名称

• .removeClass()
  删除元素的一个或多个class名称

• .hasClass()
  检测元素是否包含某个class，返回true/false

• toggleClass()
  用于切换class属性，如果当前没有有该class值，第一次执行就有了，如果当前有，再执行就没有了

更多方法

• .each(function(index,Element))
  遍历一个jQuery对象，每一个匹配的元素都执行函数
  例如

$('p').each(function(index,node){
    console.log('这是第' + index + '篇文章')
})

• jQuery.each()
  用来无缝迭代对象和数组

• .map()
  通过一个函数匹配当前集合中的元素，产生一个新的jQuery对象

• jQuery.extend()
  可用于重新合并两个对象（没有的属性会添加，已有的会覆盖）
  例如 var newObj = $.extend({},obj1,obj2)
  可用于将后一个对象合并到前一个对象上
  例如 var newObj = $.extend(obj1,obj2)

• .clone()
  用于深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点
  例如 $('.aaa').clone().appendTo('.bbb') 可以将原来.aaa的内容复制而非移动

• .index()
  用于获取所选元素的下标
  1.没参数返回第一个元素index
  2.如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
  3.如果参数是选择器，返回第一个匹配元素index，没有找到返回-1

• .ready()
  当Dom加载完成后再执行函数，相当于document.onDOMContentLoaded

jQuery事件

jQuery 用.on( events [,selector ] [,data ],handler(eventObject))来绑定事件
其中下列参数代表不同含义：

1. events：代表事件类型，如'click'，如果要给事件加上命名空间，则用'click.hello'，无特殊含义，仅用做解绑事件时会方便选定解绑的事件
2. selector: 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。通常是用做事件代理时，在父元素绑定事件，传递一个后代元素，在父元素的后代子元素触发事件。
3. data: 当事件触发时，会传递一个event.data的参数
4. handler: 当事件被触发时所执行的函数

jQuery ajax

$.ajax([settings])
settings里一般来说传递如下参数：

1. url : ajax的接口
2. type 或 method：ajax的类型，如get或post
3. data: JSON格式，里面有要传递的参数
4. dataType
5. cache: 浏览器缓存，默认情况是true
6. async: 浏览器中的同步和异步，默认是true，同步
7. .done()、.always()、.fail(): 成功、通常或失败回执行什么函数

$.get([settings])
ajax用来处理get方式的请求

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.getJSON
使用一个HTTP GET请求从服务器加载JSON编码的数据，这是一个Ajax函数的缩写

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});