jQuery拾遺

時間 2019-12-10

標籤 jquery 拾遺欄目 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;
      width: 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。