jQuery学习总结2

时间:2023-11-26 11:50:14

六、动画效果

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>