一 动画效果
1. show(3000); 3秒这后出来
2. hide(3000);3秒后隐藏
3. toggle(3000); 反着来,如果之前是隐藏,现在就是出现
4. slideDown(3000); 宽度不变,高度变化 卷拉门
5. slideUp(3000);
6. $('.c1').fadeIn(2000); 淡入
7.$('.c1').fadeOut(2000);淡出
8.$('.c1').fadeToggle(3000);
二 each循环
1.循环标签对象 //匿名函数 function必须有k,v参数,遍历标签对象取出来的是DOM
$('li').each(function(k,v){
console.log(k,v.innerText); //取出来的v是DOM对象标签
});
2.循环普通数组 //要把数组加进去
$.each(a,function(k,v){ //$表示的是jquery对象
console.log(k,v);
});
3.跳出循环 return false 类似 break
$.each(a,function(k,v){
if(k === 1){
return false;
}
console.log(k,v);
});
4.跳过本次循环return 类似continue
$.each(a,function(k,v){
if(k === 1){
return ;
}
console.log(k,v);
});
三 data
给标签对象添加数据,类似添加了全局变量
.data(key,value); //给标签设置值
.data(key); 取值
.removeData(key) //移除Data
四 扩展插件(了解)
1.jquery对象拓展方法,标签对象没有
$.extend({
min:function(a,b){return a<b?a:b}, //键是方法名,值是function函数
max:function(a,b){return a>b?a:b},
}); //自定义拓展了min,和max方法,仅限于jquery对象使用也就是$
$.min(4,5); //调用方法
2.jquery对象拓展方法,标签对象也可以使用;
$.fn.extend({
min:function(a,b){return a<b?a:b}, //多个方法要用逗号隔开
})
全选,反选示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义插件</title>
</head>
<body>
<script src="jquery-3.5.1.js"></script>
<input type="checkbox" name="hobby">打篮球
<input type="checkbox" name="hobby">玩游戏
<input type="checkbox" name="hobby">打架
<script>
$.fn.extend({
check:function(){
return this.each(function(){
this.checked = true;
})
},
unchecked:function(){
return this.each(function(){
this.checked = false;
})
}
})
</script>
</body>
</html>
全选:$(':checkbox').check();
反选:$(':checkbox').unchecked();