2019年1月17日 周四

一、css3的渐变

1、线性渐变：语法

 background: linear-gradient(direction, color-stop1, color-stop2, ...);

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

2、重复的线性渐变：repeating-linear-gradient() 函数用于重复线性渐变

#grad {
        background: repeating-linear-gradient(red, yellow 10%, green 20%);
    }

3、径向渐变 - 颜色结点不均匀分布

#grad {
        background: radial-gradient(red 5%, green 15%, blue 60%);
    }

4、设置形状：shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

 #grad {
        background: radial-gradient(circle, red, yellow, green); 
    }

 

5、不同尺寸大小关键字的使用，size 参数定义了渐变的大小。它可以是以下四个值：closest-side;farthest-side;closest-corner;farthest-corner

#grad {
        background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
    }
    #grad {
        background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
    }

二、css3动画：animation

1、关键帧——keyFrames：类似于flash，只需指明两个状态，之间的过程由计算机自动计算

2、关键帧的时间单位 数字：0%、25%、100%等 字符：from(0%)、to(100%)

3、格式

 @keyframes 动画名称
    {
    动画状态
    }
    
    @keyframes  test
    {
        from { background:red; }
        to { background:green; }
    }可以只有to

4、animation-fill-mode :forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

三、Jquery

（一）如何学习JQ：官网：www.jquery.com；中文API：www.css88.com/jqapi-1.9

• 选择网页元素：模拟了CSS选择元素的方法，提供多种筛选方法，且有其独有表达式选择

• JQ书写方法：属性函数化，链式操作，取值赋值合体

• JQ与JS关系：可以共存，但不能混用

• JQ与JS写法区别：

  (1)赋值：

  document.getElementById("div1").style.background = "red";
      document.getElementsByTagName("div"); //需要遍历
      getByClass(document,"box"); //需要遍历
      $("#div1").css("background","red");
      $("div").css("background","red");
      $(".box").css("background","red");

  (2)页面加载

  window.onload = function(){};
      $(function(){});

  (3)事件调用

  document.getElementById("div1").onclick = function(){};
  $("#div1").click(function(){});

  (4)this和属性的区别：

      alert(this.innerHTML);
      alert($(this).html());

  (5)原生js和JQ的转换：

   jq对象.get(i)/[i]  //把jq对象转化为原生js对象
   jq对象.get(0)/[0]  //把第一个jq对象转化为原生js对象
   $(原生对象) //把原生js对象转化为jq对象

  （二）选择器和链式操作

  （1）JQ的选择器与css的选择器非常类似，还增加了一些css没有的方法和筛选功能

  $('li:eq(2)').css('background','red');
  $('li:odd').css('background','red');
  $('li').filter('.box').css('background','red');
  $('li').filter('[title=hello]').css('background','red');

  (2)链式操作

   $('#div1').html('hello').css('background','red').click(function(){
          alert(123);
      });

  (3)常用方法

    $('div').filter('.box').css('background','red');  //过滤（当前元素）
    $('div').not('.box').css('background','red');   //filter的反义
    $('div').has('.box').css('background','red');   //包含（后代元素）
    $('div').next().css('background','red'); //下一个同级元素
    $('div').find('h2').eq(1).css('background','red'); //后代元素
    alert( $('#h').index() );  //索引是当前元素在所有兄弟节点中的位置

  (4)元素的移动

  A.insertBefore(B); //把A放在B的前面
  A.insertAfter(B); //把A放在B的后面
  A.appendTo(B); //把A插入到B的内容后
  A.prependTo(B); //把A插入到B的内容前
  A.before(B); //A把B放在A的前面
  A.after(B); //A把B放在A的后面
  A.append(B); //A把B插入到A的内容后
  A.prepend(B); //A把B插入A的内容前

  注意：在使用A.insertBefore(B)和A.before(B)方法时，结果恰恰相反

  （5）元素的删除

      $('div').remove();   //删除该节点
      $('div').detach();   //跟remove方法一样，只不过会保留删除这个元素的操作：
      var oDiv = $('div');
      oDiv.click(function(){alert(123);});
      oDiv.detach();   
      $('body').append( oDiv );

  (6)JQ的遍历

      $('li').each(function(i,elem){   
      //一参：下标 二参 : 每个元素
          $(elem).html(i);
      });
      //可以简写成下面的写法：
      $('li').each(function(){ 
          $(this).html($(this).index());
      });

  (7)元素的创建

      $('<>')  //创建标签，如：
      $("<div class='box'>").appendTo($("#div1"));

  (8)判断真假方法

      JQ对象.is(); //方法，判断is里面是否为真，返回布尔值，如:
      JQ对象.is(":checked"); //判断单选/多选框是否被选中
      JQ对象.is(":animated"); //判断对象是否在执行动画