六、动画效果

6.1、基本

hide([speed,[fn]])隐藏显示的元素
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000);
fn:在动画完成时执行的函数。
show([speed,[fn]])显示隐藏的匹配元素
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000);
fn:在动画完成时执行的函数。 
toggle
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

6.2、滑动（卷帘门）

注意：必须对图片设置width才可以实现卷帘门效果
slideDown([speed],[fn])显示
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp([speed,[fn]])隐藏
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
slideToggle([speed],[fn])切换
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

6.3淡入淡出

fadeIn([speed],[fn])淡入
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut([speed],[fn])淡出
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
fadeToggle([speed,[fn]]) 反复点击，实现反复的淡入淡出效果，可以设置定时器
fadeTo([[speed],opacity,[fn]])       调整到指定的不透明度，0全透明，1不透明

6.4自定义动画

animate(params,[speed],[easing],[fn])      //（阿尼马特，好记而已）
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or"fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear"和"swing".
fn:在动画完成时执行的函数，每个元素执行一次。
animate原理是修改css，不能直接改背景颜色


七、文档操作

7.1 节点追加

7.1.1内部追加

append(content)
向匹配的元素内部追加内容。
appendTo(content)
把匹配的元素追加到另一个指定的元素集合中
prepend(content)
内容前置到匹配的元素内部；
prependTo(content)
把匹配的元素前置到另一个、指定的元素集合中

7.1.2 外部追加

after(content)
在匹配的元素之后插入内容。
before(content)
在匹配的元素之前插入内容。
insertAfter(content)
把匹配的元素插入到另一个、指定的元素集合的后面。
insertBefore(content)
把匹配的元素插入到另一个、指定的元素元素集合的前面。

7.2 删除

empty()
删除匹配的元素集合中所有的子节点。标签保留
remove([expr])
从DOM中删除所有匹配的元素。将标签也一同删除

7.3 复制(克隆)

clone([Even])
克隆匹配的DOM元素
Even：一个布尔值（true或者false）指示事件处理函数是否会被复制。

7.4 替换

html代码：

<p>Hello</p><p>cruel</p><p>World</p>

jQuery代码:

$("<b>Paragraph.</b>").replaceAll("p");
$("p").replaceWith("<b>Paragraph.</b>");

结果:

<b>Paragraph. </b><b>Paragraph.</b><b>Paragraph. </b>

replaceAll(content)  主动替换，用匹配的元素替换掉所有 selector匹配到的元素。

replaceWith(content) 被动替换

将所有匹配的元素替换成指定的HTML或DOM元素。

html([val])

val 有值，则用于设定HTML内容的值，没有则获取内容值；

7.5 包裹

wrap(html|ele|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来。
unwrap()
移出选中元素的父元素
wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来
wrapInner(html|ele|fn)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

7.6 查找

问题及效果：

将选择器以jq方法调用形式实现；

知识点：

eq(index) ：根据元素的index索引来查找元素
filter(expr) ：筛选操作，$(‘div’).filter(‘.cls1’);
not(expr) ：匹配除指定选择器以外的其他元素
children([expr]) ：获取当前元素下的所有子元素
find(expr) ：获取当前元素下的所有后代元素
next([expr]) ：获取当前元素下紧邻的下一个元素
prev([expr]) ：获取当前元素上紧邻的上一个元素
parent([expr]) ：获取当前元素的父元素
siblings([expre]) ：获取当前元素的所有同级兄弟元素


八、插件

8.1 为元素扩展新方法

$.fn.extend(ob)或者 $、jQuery.fn.extend(ob)
ob：JS对象         如：{name：‘Joe’}

8.2 扩展jq对象本身

jQuery.extend(ob)或者$.extend(ob)

8.3 each 方法

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。


九、jQuery中的ajax

9.1 ajax 的底层实现

$.ajax(obj)

对象的参数设置及含义：

async：布尔类型，代表是否异步，true代表异步，false同步，默认为true

cache：是否缓存，布尔类型，true代表缓存，false代表不缓存，默认为true

complete：当Ajax状态码（readyState）为4的时候所触发的回调函数

contentType：发送信息至服务器时内容编码类型；(默认:"application/x-www-form-urlencoded")

data：要求是一个字符串格式，Ajax发送时所传递的数据

dataType：期待的返回值类型，可以是text，xml，json，默认为text类型

success：当Ajax状态码为4且响应状态码为200时所触发的回调函数

type：Ajax发送网络请求的方式，(默认: "GET")；

url：请求的url地址


//get请求
$.ajax({
	url:'9-2.php?id=11',
	success:function(data){
	alert(data);
	}
});
 
//POST请求及同步异步
$.ajax({
	url:'9-2.php',
	type:'post',
	data:'id=1111',
	success:function(data){
	alert(data);
},
// async:false,
});


9.2、ajax 的高层实现

9.2.1 GET 应用

基本语法：

$.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送Key/value参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

案例代码：

<script>
  $('#btu').click(function(){
    $.get('9-2.php',function(data){
    	alert(data.a);
    },'json');
  });
</script>

但是注意：IE浏览器存在缓存问题；

解决缓存问题修改：

<script>
  $('#btu').click(function(){
    var da = {_:new Date().getTime()};
    $.get('9-2.php',da,function(data){
    	alert(data.a);
    },'json');
  });
</script>


9.2.2 POST 应用

$.post(url, [data], [callback], [type])

url:发送请求地址。

data:待发送Key/value参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

案例代码：

<script>
  $('#btu').click(function(){
    $.post('9-2.php',
    {id:'11'},
    function(data){
    alert(data.a);
    },'json');
  });
</script>


十、jQuery中的跨域问题

Ajax技术受到浏览器同源策略的限制，禁止从一个域上向另外一个域发送请求。

前端jq跨域的三种用法

<script>
  $('#btu').click(function(){
  //$.ajax 方法的jsonp跨域
  $.ajax({
    url:'http://bbs.com/1.php?fn=?',
    dataType:'jsonp',
    success:function(data){
    alert(data.b);
  }
  });
  //$.get 方法的jsonp跨域
  $.get('http://bbs.com/1.php?fn=?',function(data){
    alert(data.b);
    },'jsonp');
    // $.getJSON 方法的jsonp跨域
    $.getJSON(
    'http://bbs.com/1.php?fn=?',
    function(data){
    alert(data.b);
    },
  );
  });
</script>