jQuery拾遗

动画效果

// 基本
show([s,[e],[fn]])  $('.c1').show()  //show(5000),就是5秒之后显示出来这个标签,并且有一个动画效果,(搞个img图片看看效果),后面两个参数先不用管
hide([s,[e],[fn]])  $('.c1').hide()
toggle([s],[e],[fn]) // 这几个toggle的意思就是你原来是什么效果,我就反着来
// 滑动(拉窗帘一样)
slideDown([s],[e],[fn])  
//使用的时候别忘了给标签设置一个高度和宽度,其实就是控制你的标签高度,如果你写$('#di').slideUp(5000);意思就是5秒内把你的高度变为0
//还有如果你直接操作的是img标签和操作img标签的父级标签,两个的效果是不同的
slideUp([s,[e],[fn]]) 
slideToggle([s],[e],[fn])
// 淡入淡出(控制透明度)
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])  o参数是透明度,0-1的区间,意思是淡入或者淡出到一个多大的透明读
fadeToggle([s,[e],[fn]])
// 自定义(了解即可)
animate(p,[s],[e],[fn])

each循环

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .c1{
      background-color: red;
      height: 200px;
       200px;
      /*display: none;*/
    }
  </style>
</head>
<body>

<div class="c1"></div>

<ul>
  <li>11</li>
  <li>22</li>
  <li>33</li>
  <li>44</li>
</ul>

<script src="jquery.js"></script>
<script>
    // 循环标签对象数组
  $('li').each(function(k,v){
    console.log(k,v);
  });

  // 循环普通数组
  var d1 = ['aa','bb','cc'];
  $.each(d1,function(k,v){
    console.log(k,v);
  })
  
  // 跳出循环  return false; 类似于break
  $('li').each(function(k,v){
    console.log(k,v.innerText);
    if (k === 1){
      return false;
    }

  });

  // 跳出本次循环  return; 类似于continue
  $('li').each(function(k,v){

    if (k === 1){
      return;
    }
    console.log(k,v.innerText);
  });
</script>

</body>
</html>



data

给标签对象添加数据,类似于添加了全局变量
	.data(key, value): // 设置值
	.data(key)   // 取值
	.removeData(key) // 删除值

插件(了解)

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法,min和max作为键,值是一个function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
$('div').min(1,2);不能通过标签对象来调用
</script>

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

原文地址:https://www.cnblogs.com/5kuishoua666/p/11164375.html