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?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>