jQuery学习总结2
六、动画效果
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?,
success:function(data){
alert(data);
}
});
//POST请求及同步异步
$.ajax({
url:'9-2.php',
type:'post',
data:',
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>