码迷,mamicode.com
首页 > Web开发 > 详细

jquery 事件触发二

时间:2021-04-06 14:21:28      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:OLE   拓展   fun   bre   func   html   rip   hid   使用   

一 动画效果

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();

 

jquery 事件触发二

标签:OLE   拓展   fun   bre   func   html   rip   hid   使用   

原文地址:https://www.cnblogs.com/learn-record/p/14615690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!