zoukankan      html  css  js  c++  java
  • 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>
    
    
  • 相关阅读:
    HDU 5154 Harry and Magical Computer bfs
    opencv第一课 打开一个图片
    Codeforces Round #131 (Div. 1) A
    Topcoder SRM 643 Div1 250<peter_pan>
    bestcoder#23 1002 Sequence II 树状数组+DP
    bestcoder#23 1001 Sequence
    Oil Deposits 搜索 bfs 强联通
    迷宫问题 模拟队列 广度优先搜索
    Codeforces Round #283 (Div. 2) C. Removing Columns 暴力
    Codeforces Round #283 (Div. 2) B. Secret Combination 暴力水题
  • 原文地址:https://www.cnblogs.com/5kuishoua666/p/11164375.html
Copyright © 2011-2022 走看看