- 郵箱校驗
- 郵箱：email 含有@和.com，.com必須在末尾,@不能再末尾
- CSS3屬性
- transform屬性:定義標籤的旋轉，縮放，移動，傾斜等靜態效果
語法
transform: none|transform-functions;
值 描述
none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉換。
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設置 X 軸的值來定義縮放轉換。
scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。
scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿着 X 軸的 3D 旋轉。 測試
rotateY(angle) 定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿着 Z 軸的 3D 旋轉。
skew(x-angle,y-angle) 定義沿着 X 和 Y 軸的 2D 傾斜轉換。
skewX(angle) 定義沿着 X 軸的 2D 傾斜轉換。
skewY(angle) 定義沿着 Y 軸的 2D 傾斜轉換。
perspective(n) 爲 3D 轉換元素定義透視視圖。
Transform:
Rotate3d(1,1,0,60deg);
Scale(1,1,1);
1:表示在此軸上定義,0:不定義
Angle:角度，單位是deg
縮放:按照百分比縮放，比如 1:100%;1.5:150%;
- transition屬性：定義元素靜態屬性變成動態屬性
Transition:屬性 動態時間 [速度方式];
Eg：transition:width 1s ease-in;讓寬動態變化，時間是1秒完成，速度是加速
- box-shadow:陰影屬性
Box-shadow:X軸 Y軸 陰影的長度 陰影的顏色
- border-radius:邊框的子屬性：邊框弧度
- jQuery框架
框架：提高效率
jQuery框架 封裝好了JavaScript常用的功能代碼.提供一種簡便的JavaScript設計模式，優化HTML文檔操作，事件處理，動畫設計，和Ajax交互
- jQuery基本語法
jQuery封裝DOM 獲取標籤的方式
美元符號:$ :jquery標識符號
Document.getElementById(“idname”);-->$(“#idName”);
DOM獲取標籤方式:$(選擇器 或 標籤對象);
$(“#id”):通過id獲取標籤
$(“.class”):通過類獲取標籤
$(“標籤”)通過標籤名獲取標籤
$(“div #id”):通過div中的#id標籤，獲取
$(“div ,a”):獲取div和a標籤...
- 使用jquery框架
- 導入jQuery框架的JS文件
<script src=””></script>
- 使用jQuery的方法
- jquery的DOM操作
function d1M() {
//$("#d1").html("hello");
$(".c1").css("fontSize","50px");
$("div").css("color","red");
$("#d1 a").html("超級鏈接");
$("#d1,a").css("text-decoration","none");
$("*").addClass("c2");
}
- jquery的常用方法
- 預加載方法
$(document).ready(function () {})
相當於:onload，比onload更早
等DOM對象加載完成後，在加載js代碼
可以簡寫成：
$(function(){
//JS代碼
});
- 標籤綁定事件
獲取綁定事件的標籤.事件(觸發的方法);
//添加事件，添加事件觸發的方法
$("#but2").click(方法);
- 循環遍歷
// 讓所有的div標籤 遍歷添加內容
$("div").each(function () {
$(this).html("Hello jquery"); });
- Animate():動態效果方法.
Animate()是transition屬性的升級版
Animate({樣式},時間,速度方式,回調函數)
樣式：(必寫)逐漸改變css屬性值，形成動畫效果.
使用+= 和 -=累加來形成累加css樣式
時間:動畫完成的時間.單位:毫秒/”fast”/”slow”;
速度方式:”swing”,”linear”
回調函數:執行完方法後再觸發的方法
Eg：
$(function () {
// 給but1綁定點擊事件
$("#but1").click(function () {
// 讓div調用animate方法
$("div").animate({width:'1300px',height:'1300px'},2000,"swing",function () {
// 動畫完成後再觸發一個方法
$("div").animate({width:'100px',height:'100px'},2000,"swing");
});
});
關鍵字：
//toggle:從0 - 目前值的切換效果
// opactity:透明度 屬性;值:0.0 -1.0
Window.onload = dvMethod;
作用:在頁面文檔加載完成後，加載js的方法
- 滑動隱藏與顯現
slidUp():向上滑動隱藏標籤/slidDown:向下滑動展示標籤
slidUp(時間，速度，回調函數);slidDown 一致
時間:動畫完成的時間.單位:毫秒/”fast”/”slow”;
速度方式:”swing”(加速),”linear”(勻速)
回調函數:執行完方法後再觸發的方法
- Jquery版隱藏與顯現
與CSS的屬性display是一樣的.
Hide(時間,速度,回調函數)/show();