JavaScript-day04笔记

• 邮箱校验

1. 条件

邮箱：含有。。。

 

 

 

• Css3新属性

1. transform属性:定义标签的旋转，缩放，移动，倾斜等静态效果

transform: rotate3d(1.2,1.2,1.2,170deg);

1：表示在此轴上定义，0：不定义

Angel：角度，单位是deg

缩放，按百分比缩放：比如1:100%；1.5:150%；

 

1. transition属性：定义元素静态属性变成动态属性

   Transition 属性： 动态时间 [速度方式][等待时间]；

Eg:transiton:width 1s ease-in;让宽动态变化，时间是1秒完成，速度是加速

 

1. box-shadow：阴影属性

Box-shadow:x轴 y轴阴影的长度  阴影的颜色；

 

1. border-radis:边框弧度

 

• jQuery 框架

 

框架：提高效率

JQuery框架  封装好了JavaScript常用的功能代码。提供了一种简便的JavaScirpt设计模式。优化了HTML文档操作，事件处理，动画设计，和Ajax交互。

 

1. jQuery 基本语法

   jQuery封装DOM获取便签的方式

   美元符号：$:jQuery 标示符号

   Documnet.getElementById(“idName”);--->$(“#idName”);

   DOM获取标签方式：$(“选择器 或 标签对象”)；

   $(“#id”):通过id获取标签

   $(“标签”):通过标签名获取标签

   $(“div #id”):通过div中#id标签，获取

 

1. 使用jQuery框架

1. 导入jQuery框架的JS文件

<script src="jquery-2.1.1.min.js"></script>

 

1. 使用jQuery方法

  3.DOM的操作

 获取元素的方式

$(".c1").css("color","red");
$("div").css("font-size","24px");
$("#d1 a").html("hello world");
$("#d1 a").css("text-decoration","none");
$("*").addClass("c2");

 

 

 

4.jQuery的常用方法

（1）预加载方法

$(document).ready(function () {
    //在添加事件:给#btn1添加onclick事件
    $("#btn1").click();
});

 

相当于onload,比onload更早

等DOM对象  加载完后，在加载JS代码

可以简写 ： $(function () { 

     //JS代码

});

 

 

1. Animate();动态效果方法

  Animate()方法是transition属性的升级版

  Animate({样式},时间,速度方式,回调函数);

样式：逐渐改变css属性值，形成动画效果。

使用+= 和 -=累加来形成累加css样式

时间：动画完成的时间。单位：毫秒/”fast”/”slow”

速度方式：”swing”加速,  ”linear”匀速

  回调函数：执行完方法后在触发的方法。

 

关键字：

//toggle:从0-目前值 的切换效果
//opacity:透明度 属性；值：0.0-1.0
$("div").animate({width:'toggle',height:'toggle',opacity:'toggle'});

 

1. 滑动的隐藏与显现

slidUp():向上滑动隐藏标签 / slidDown():向下滑动展示标签

slidUp(时间，速度，回调函数)；     slidDown()；一致

Jquery版隐藏与显现

1. .jquery版隐藏与显现

与css的属性display是一样的

Hide(时间，速度，回调函数) /show();

时间：动画完成的时间。单位：毫秒/”fast”/”slow”

速度方式：”swing”加速,  ”linear”匀速

  回调函数：执行完方法后在触发的方法。