HTML
前端三大塊
1、HTML：頁面結構
2、CSS：頁面表現：元素大小、顔色、位置、隐藏或顯示、部分動畫效果
3、JavaScript：頁面行為：部分動畫效果、頁面與使用者的互動、頁面功能
基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網頁标題</title>
</head>
<body>
網頁顯示内容
</body>
</html>
設定網頁編碼：
關鍵字：
描述：
網頁标題：本網頁标題
導入CSS檔案：
CSS代碼：
JS檔案或代碼：
标題
<h1>這是一級标題</h1>
<h2>這是二級标題</h2>
<h3>這是三級标題</h3>
通過
、
、
、
、
、
,标簽可以在網頁上定義6種級别的标題
HTML段落,換行,字元實體
内容
段落标簽
換行标簽 帶有行線的換行标簽 ； 空格
< 小于号
> 大于号
html塊元素
div标簽 塊元素，表示一塊内容，沒有具體的語義
★行内元素
span标簽 行内元素，表示一行中的一小段内容，沒有具體的語義。
含樣式的标簽
em标簽 行内元素，表示語氣中的強調詞
i标簽 行内元素，原本沒有語義，w3c強加了語義，表示專業詞彙
b标簽 行内元素，原本沒有語義，w3c強加了語義，表示文檔中的關鍵字或者産品名
strong标簽 行内元素，表示非常重要的内容
del 删除線
html圖檔
标簽可以在網頁上插入一張圖檔，它是獨立使用的标簽，通過“src”屬性定義圖檔的位址，通過“alt”屬性定義圖檔加載失敗時顯示的文字，以及對搜尋引擎和盲人讀屏軟體的支援。
html連結 與錨點跳轉
連結
<a href="#"></a> <!-- # 表示連結到頁面頂部 -->
<a href="http://www.itxdl.cn/" title="跳轉的it兄弟連網站">兄弟連</a>
<a href="2.html">測試頁面2</a>
href（必須） 指的是連結跳轉位址
target: 表示連結的打開方式： _blank 新視窗
title屬性定義滑鼠懸停時彈出的提示文字框
<!-- href屬性中的url可以攜帶參數 ?分割後 攜帶參數 鍵=值 多個參數之間用&分割-->
<a href="./3.html?id=1&name=zhangsan&sex=nan">京東</a>
錨點：定義頁面内滾動跳轉
<a href="#mao1">标題一</a>
......
......
<h3 id="mao1">跳轉到的标題</h3>
清單
有序清單
<ol>
<li>清單文字一</li>
<li>清單文字二</li>
<li>清單文字三</li>
</ol>
★無序清單
<ul>
<li>清單文字一</li>
<li>清單文字二</li>
<li>清單文字三</li>
</ul>
去li前面的點: list-style:none
定義清單
<h3>前端三大塊</h3>
<dl>
<dt>html</dt>
<dd>負責頁面的結構</dd>
<dt>css</dt>
<dd>負責頁面的表現</dd>
<dt>javascript</dt>
<dd>負責頁面的行為</dd>
</dl>
表格
<table>
<tr>
<th></th>
........
</tr>
<tr>
<td>内容</td>
............
</tr>
</table>
table常用标簽
1、table标簽：聲明一個表格
2、tr标簽：定義表格中的一行
3、td和th标簽：定義一行中的一個單元格，td代表普通單元格，th表示表頭單元格
table常用屬性
、border 定義表格的邊框
、cellpadding 定義單元格内内容與邊框的距離
、cellspacing 定義單元格與單元格之間的距離
、align 設定單元格中内容的水準對齊方式,設定值有：left | center | right
、valign 設定單元格中内容的垂直對齊方式 top | middle | bottom
、colspan 設定單元格水準合并
、rowspan 設定單元格垂直合并
★html表單:form
<form action="http://www..." method="get">
</from>
form表單中
action 表示資料送出的位址url
method代表送出資料的方式方法
get post
get送出方式,資料在位址欄 可見,而且資料長度有限制 218k
post送出,位址欄不可見,資料長度 2m
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
label标簽 定義表單控件的文字标注
input 類型為 text 定義了一個單行文本輸入框
<p>
<label>密碼：</label><input type="password" name="password" />
</p>
input類型為password定義了一個密碼輸入框
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
name 屬性決定是否關聯,name一樣則所有的都是單選
input類型為radio定義了單選框
<p>
<label>愛好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 遊泳
</p>
input類型為checkbox定義了單選框
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
input類型為file定義上傳照片或檔案等資源
如果表單中含有檔案上傳method送出方式必須為post
form中必須有enctype屬性
enctype=”multipart/form-data”
<p>
<label>籍貫：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">廣州</option>
<option value="3">深圳</option>
</select>
</p>
select定義下拉清單選擇
隐藏域:<input type="hidden" name="id" value="110">
<input type="submit" value="注冊">
<input type="reset" value="重置">
<button>登入</button>
input類型為submit定義送出按鈕
input類型為reset定義重置按鈕
type屬性
text:單行文本框
password:密碼輸入框
checkbox:多選框 注意要提供value值
radio:單選框 注意要提供value值
file:檔案上傳選擇框
button:普通按鈕
submit:送出按鈕
image:圖檔送出按鈕
reset:重置按鈕, 還原到開始\(第一次打開時\)的效果
hidden:主表單隐藏域,要是和表單一塊送出的資訊,但是不需要使用者修改
常用屬性
name屬性:表單項名,用于存儲内容值的
value屬性:輸入的值(預設指定值)
size屬性:輸入框 readonly屬性:對輸入框隻讀屬性的寬度值
disabled屬性:禁用屬性
checked屬性:對選擇框指定預設選項
<input type="submit" value='注冊' disabled>
生成一個不可點選的按鈕
CSS
基本文法
css的定義方法是：選擇器 { 屬性:值; 屬性:值; 屬性:值;}
1、外聯式：通過link标簽，連結到外部樣式表到頁面中：
<link rel="stylesheet" type="text/css" href="css/main.css">
2，嵌入式：通過style标簽，在網頁上建立嵌入的樣式表：
<style type="text/css">
div{ width:px; height:px; color:red }
......
</style>
3、内聯式：通過标簽的style屬性，在标簽上直接寫樣式：
<div style="width:100px; height:100px; color:red ">
......
</div>
css顔色
顔色名表示，比如：red 紅色，gold 金色
1, 16進制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
2, RGB顔色: 紅(R)、綠(G)、藍(B)三個顔色通道的變化 background-color: rgba(200,100,0);
3, RGBA顔色: 紅(R)、綠(G)、藍(B)、透明度(A) background-color: rgba(0,0,0,0.5);
滑鼠手
cursor
cursor:pointer 讓滑鼠在那塊變成可點選狀态
CSS文本設定
color 設定文字的顔色，如： color:red;
font-size 設定文字的大小，如：font-size:px;
font-family 設定文字的字型，如：font-family:'微軟雅黑';
font-style 設定字型是否傾斜，如：font-style:'normal'; 設定不傾斜，font-style:'italic';設定文字傾斜
font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗
font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫：
font：是否加粗 字号/行高 字型；如： font:normal px/px '微軟雅黑';
line-height 設定文字的行高，如：line-height:px;
text-decoration 設定文字的下劃線，如：text-decoration:none; 将文字下劃線去掉
text-indent 設定文字首行縮進，如：text-indent:px; 設定文字首行縮進24px
text-align 設定文字水準對齊方式，如text-align:center 設定文字水準居中
line-style:none 清除格式 例如：li前面的點
CSS邊框屬性
border:寬度 樣式 顔色;
border-color;
border-style; 邊框樣式：solid實作，dotted點狀線，dashed虛線
border-width:
border-left-color;
border-left-style;
border-left-width:
CSS3的樣式
border-radius：圓角處理
box-shadow: 設定或檢索對象陰影
box-sizing:border-box 元素的大小 在計算時 把邊框和内邊距計算在内
背景屬性 background
background-color: 背景顔色
*background-image: 背景圖檔
background:url(圖檔位址)
*background-repeat：是否重複，如何重複?(平鋪)
*background-position：定位
background-attachment： 是否固定背景，
scroll:預設值。背景圖像是随對象内容滾動
fixed:背景圖像固定
*background-size: 背景大小，如 background-size:px px;
元素溢出 overflow
overflow的設定項：
1、visible 預設值。内容不會被修剪，會呈現在元素框之外。
2、hidden 内容會被修剪，并且其餘内容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 内容會被修剪，但是浏覽器會顯示滾動條以便檢視其餘的内容。
4、auto 如果内容被修剪，則浏覽器會顯示滾動條以便檢視其餘的内容。
5、inherit 規定應該從父元素繼承 overflow 屬性的值。
CSS内邊距
padding： 檢索或設定對象四邊的内部邊距,如padding:px; padding:px px;
padding-top： 檢索或設定對象頂邊的内部邊距
padding-right： 檢索或設定對象右邊的内部邊距
padding-bottom：檢索或設定對象下邊的内部邊距
padding-left： 檢索或設定對象左邊的内部邊距
CSS外邊距
margin： 檢索或設定對象四邊的外延邊距,如 margin:px; margin:px auto;
margin-top： 檢索或設定對象頂邊的外延邊距
margin-right： 檢索或設定對象右邊的外延邊距
margin-bottom： 檢索或設定對象下邊的外延邊距
margin-left： 檢索或設定對象左邊的外延邊距
設定元素水準居中： margin:x auto
注意,margin 外邊距 在垂直方向會合并,水準方向不會合并
盒子
設定邊距
border-top-color:red; /* 設定頂部邊框顔色為紅色 */
border-top-width:px; /* 設定頂部邊框粗細為10px */
border-top-style:solid; /* 設定頂部邊框的線性為實線，常用的有：solid(實線)
dashed(虛線) dotted(點線); */
上面三句可以簡寫成一句：
border-top:px solid red;
設定内間距padding
padding-top：20px; /* 設定頂部内間距20px */
padding-left:px; /* 設定左邊内間距30px */
padding-right:px; /* 設定右邊内間距40px */
padding-bottom:px; /* 設定底部内間距50px */
上面的設定可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分别設定的是 上 右 下 左 四個方向的内邊距值。 */
padding：20px 40px 50px; /* 設定頂部内邊距為20px，左右内邊距為40px，底部内邊距為50px */
padding：20px 40px; /* 設定上下内邊距為20px，左右内邊距為40px*/
padding：20px; /* 設定四邊内邊距為20px */
★margin-top 塌陷
在兩個盒子嵌套時候，内部的盒子設定的margin-top會加到外邊的盒子上，導緻内部的盒子margin-top設定失敗，解決方法如下：
1、外部盒子設定一個邊框
2、外部盒子設定 overflow:hidden
3、使用僞元素類：
.clearfix:before{
content: '';
display:table;
}
塊元素,内聯元素,内聯塊元素
解決内聯元素間隙的方法
1、去掉内聯元素之間的換行
2、将内聯元素的父級設定font-size為0，内聯元素自身再設定font-size
display屬性
display屬性是用來設定元素的類型及隐藏的，常用的屬性有：
1、none 元素隐藏且不占位置
2、block 元素以塊元素顯示
3、inline 元素以内聯元素顯示
4、inline-block 元素以内聯塊元素顯示
浮點
float:left 左浮動
float:right 右浮動
★清除浮動
方法：
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:;}
浮動的父級添加：
<div class="con2 clearfix">
方法：
父級上增加屬性overflow：hidden
.con2{... overflow:hidden}
★定位
relative：相對定位,不脫離文檔流,相對于自己本身的位置進行定位,
absolute：絕對定位,脫離文檔流,位置相對于已定位的父級,
如果沒有父級,或父級沒有定位,那麼相對于文檔的00點 (body)
可以通過 z-index 屬性定義層疊(先後),參數值越大,越先
在style裡面定義
.z1{z-index:;background:#000;}
fixed：固定定位,脫離文檔流,位置相對于浏覽器視窗 進行定義
javascrip
, 在html頁面中任意位置 書寫 script标簽,在标簽内寫js代碼
在元素 (标簽) 内書寫事件屬性 來觸發js代碼的執行
, 注意 ,在 包含src屬性的script标簽内不能在書寫js代碼
js 是運作在浏覽器端的腳本語言,屬于解釋性語言.
錦定義變量時，用var關鍵字，不然嚴格模式會報錯。
console。log(a) 在控制台列印值
alert() 彈框内容
typeof()函數 檢測目前變量的資料類型
例 console.log(a,typeof(a))
使用場景
1, 注意 ,在 包含src屬性的script标簽内不能在書寫js代碼
<script type="text/javascript" src="./1.js"></script>
2. 在元素 (标簽) 内書寫事件屬性 來觸發js代碼的執行 -->
<div onclick="alert('點我幹啥?')" style="width: 200px;height: 200px;background: #369;"></div>
<a href="javascript:alert('點你咋滴')">點一下試試</a>
<a href="javascript:void(0)" onclick="alert('試試就試試')">再點一下試試</a>
!! void(0) 下面提示不顯示值
3在html頁面中任意位置 書寫 script标簽,在标簽内寫js代碼 -->
<script type="text/javascript">
// alert('哎呦,不錯哦');
</script>
1、行間事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2、頁面script标簽嵌入
<script type="text/javascript">
var a = '你好！';
alert(a);
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
javascript語句與注釋
1、一條javascript語句應該以“;”結尾
<script type="text/javascript">
var a = ;
var b = 'str';
function fn(){
alert(a);
};
fn();
</script>
2、javascript注釋
<script type="text/javascript">
// 單行注釋
var a = ;
/*
多行注釋
1、...
2、...
*/
var b = 'str';
</script>
常用方法
console.log(a) 在控制台進行輸出
alert(a) 彈出一個視窗
document.write(a) 向文檔中輸出一個文檔流
如果遇到有-的單詞，去掉-，後面的首字母大寫，比如 fontSize.
document.write(a) 在頁面進行輸出。
标簽對象.innerHTML="内容"；//在标簽對象内放置指定内容
onclick 單擊事件
onsubmit 送出事件
docunment.getElementsByTagName
擷取元素(比如 input,div)裡的狀态
document.getElementById
擷取id所屬的狀态
for (var i in window){
document.write(i+'======'+window[i]+'<br>') };
檢視js的所有屬性和方法，window是浏覽器最大的對象。
var res = rr.constructor; console.log(res);
檢視目前對象的構造函數（目前這個對象和函數的上一層）
資料類型轉換
typeof函數擷取一個變量的類型：
* boolean - 如果變量是 Boolean 類型的
* number - 如果變量是 Number 類型的 (整數、浮點數)
* string - 如果變量是 String 類型的 （采用""、 ''）
* object - 如果變量是一種引用類型或 Null 類型的
如：new Array()/ new String()...
* function -- 函數類型
* undefined - 如果變量是 Undefined 類型的
數值類型 Number
NaN 任何值與NaN進行比較,都是false,除了!=
檢測一個變量是否為NaN,隻能使用isNaN()
字串類型 string
var = 'a'
對象類型 object
var a =new Object()
數組類型 (表現類型為對象bject)
var a = new Array() （數組）
var a = [,,,]
空（表現類型也為對象）
var a = null
未定義 undefined
var a (直接定義不給值)
使用：Number（）、parseInt() 和parseFloat（） 做類型轉換
Number()強轉一個數值(包含整數和浮點數)。
整形和浮點型都可以，如果是純數字，轉數字，包含非數字時，轉 NaN，可以轉布爾
*parseInt()強轉整數，
隻能轉整型 如果字元轉中首字母是非數字，轉為NaN
*parseFloat（）強轉浮點數 （最好用）
整形和浮點都可以，如果字元串中首字母是非數字，轉為NaN
函數isNaN()檢測參數是否不是一個數字。
isNaN() is not a number
ECMAScript 中可用的 種強制類型轉換如下：
Boolean(value) - 把給定的值轉換成 Boolean 型；
為假的情況：
!!! false,,NaN,null,undefined,,‘’。
Number(value) - 把給定的值轉換成數字（可以是整數或浮點數）；
String(value) - 把給定的值轉換成字元串；
運算符
++ 自加1 --自減
+ 後面是字元串進行連接配接，數字則進行相加
（必須注意優先級，如果前面為字元串連接配接，後面也都為連接配接）
算 字 賦 比 邏 位 它
算術運算符
+ - * / ++ --
字元串連接配接
+
指派運算
= += -= %=
比較運算符
< > >= <= == === != !==
=== 值和類型都要相同 == 值相同
邏輯運算符
&& （與） ||（或） !
位運算
^ & | << >>
其它運算符
? : 三元運算符
delete：用于删除對象中屬性的 如：delete o.name; //删除o對象中的name屬性
void： void 運算符對任何值傳回 undefined。沒有傳回值的函數真正傳回的都是 undefined。
var iNum1=, iNum2=, iNum3=;// 逗号運算符 用逗号運算符可以在
流程控制
if 判斷值一樣就可以
### else if中間必須有空格
if(判斷){
執行
}else if{
執行
}else{
執行
}
switch 的判斷 === 值和類型都一樣
var a = ;
swith(a){
case :
case :
case :
case :
case :
alert{'工作日'};
break;
case :
case :
alert{'休息日'}；
break; !!!!（如果這個祛除，default也會預設出現。）
default:
alert{'火星人你好'}；
break;
}
循環
for循環
for(var i=;i<len;i++){
......
}
while循環
var i=;
while(i<){
......
i++;
}
for-in 語句
for-in 語句是嚴格的疊代語句，用于枚舉對象的屬性。
var a = [,,,,];
//疊代的是數組的下标。
for(i in a){
document.write(a[i]);
}
//輸出： 1020304050
！！！簡短寫法
for(car i =;i<=,i++){
if(i == ){
continue;
}
if(i == ){
break;
}
}
元素擷取
可以使用内置對象document上的getElementById方法來擷取頁面上設定了id屬性的元素，擷取到的是一個html對象，然後将它指派給一個變量，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">這是一個div元素</div>
上面的語句，如果把javascript寫在元素的上面，就會出錯，因為頁面上從上往下加載執行的，javascript去頁面上擷取元素div1的時候，元素div1還沒有加載，解決方法有兩種：
第一種方法：将javascript放到頁面最下邊
....
<div id="div1">這是一個div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二種方法：将javascript語句放到window.onload觸發的函數裡面,擷取元素的語句會在頁面加載完後才執行，就不會出錯了。
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">這是一個div元素</div>
樣式操作
标簽對象.style.css屬性名="值" //改變标簽對象的樣式。
示例：id.style.color="red";
注意：屬性名相當于變量名,是以css屬性名中含有雙拼詞的(font-size)的減号要去掉，将後面的首字母大寫。fontSize
文本操作
标簽對象.innerHTML="内容"；//在标簽對象内放置指定内容
表單中值的操作
标簽對象.value； //擷取标簽對象的value值
标簽對象.value=”值“；//設定标簽對象的value值
定時器
單次定時
setTimeout(要執行的代碼，時間) 時間以毫秒算
clearTimeout 關閉隻執行一次的定時器
多次計時
setInterval 反複執行的定時器
clearInterval 關閉反複執行的定時器
！！一般都是用單次是來結束多次計時
做一個小動畫圖檔流暢切換
<img src="./img/p1.png" alt="" id="tp">
<script type="text/javascript">
var tp = document.getElementById('tp');
var i = ;
setInterval(function(){
i++;
if(i > ){
i = ;
}
tp.src = './img/p'+i+'.png';
},)
</script>
三種寫法
var init = setTimeout(function(){
alert('2');
},);
function love(){
console.log('22');
}
setTimeout('love()',);
setTimeout(love,);
函數
*第一種是使用function語句定義函數
function abc(){
alert('abc');
}
*第二種是在表達式中定義函數
var 函數名 = function(參數1，參數2，…\){
alert('abc')；
};
！！！在使用函數時,如果沒有傳遞參數,形參的預設值就是undefined
第三種是使用Function()構造函數來定義函數（不常用）
var 函數名 = new Function\(“參數”，”參數”，”參數”……”函數體”\);
如：
var 函數名 = new Function\(”x”,”y”,”var z=x+y;return z;”\);
arguments 對象
在函數代碼中，使用特殊對象 arguments，開發者無需明确指出參數名，就能通路它們。
例如，在函數 sayHi() 中，第一個參數是 message。用 arguments[]
也可以通路這個值，即第一個參數的值（第一個參數位于位置 ，
第二個參數位于位置 ，依此類推）。
關于變量和參數問題：
函數外面定義的變量是全局變量，函數内可以直接使用。
在函數内部沒有使用var定義的=變量則為全局變量，
*在函數内使用var關鍵字定義的變量是局部變量，即出了函數外邊無法擷取。
js函數定義的參數沒有預設值（目前隻有最新的火狐浏覽器支援）
優先級
如果有變量和函數通用一個變量名，函數會在執行時，優先加載。
函數會在執行時,優先加載,如果在代碼中還有變量的定義和函數名一樣,那麼變量會覆寫函數
！！！注意,函數名和變量名千萬不要沖突
// var love = 222;
function love(){
alert('111');
}
love();
// alert(love); (列印出來時一個函數)
對象
var obj = new Object();
定義對象屬性
， obj.name = "張三";
obj.sex = "女";
obj.age = "18";
， obj['age'] = ;
var a = 'age';
obj[a] = ;
alert(obj['age'])
定義對象的方法
， obj.sing = function(){
alert('二營長')
}
， var a = 'dance';
obj[a] = function(){
alert('你他娘的意大利炮呢');
};
obj.dance();
json
, var 對象名 = {屬性名：屬性值，屬性名：屬性值，…….}
var rr = {
name:'玲玲',sex:'女',
dance:function(){
alert(this.name);
}
};
, function person(a,sex,age){
this.name = a;
this.info =function(){
alert(this.name);
}
}
var a = new person('翠蘭')
var b = new person('三炮')
a.info()
數組
數組就是一組資料的集合，javascript中，數組裡面的資料可以是不同類型的。
定義數組的方法
//對象的執行個體建立
var aList = new Array(,,);
//直接量建立
var aList2 = [,,,'asd'];
操作數組中資料的方法
、擷取數組的長度：aList.length;
var aList = [,,,];
alert(aList.length); // 彈出4
、用下标操作數組的某個資料：aList[];
var aList = [,,,];
alert(aList[]); // 彈出1
、push() 和 pop() 從數組最後增加成員或删除成員
var aList = [,,,];
aList.push();
alert(aList); //彈出1,2,3,4,5
aList.pop();
alert(aList); // 彈出1,2,3,4
、unshift()和 shift() 從數組前面增加成員或删除成員
var aList = [,,,];
aList.unshift();
alert(aList); //彈出5,1,2,3,4
aList.shift();
alert(aList); // 彈出1,2,3,4
、splice() 在數組中增加或删除成員
var aList = [,,,];
aList.splice(,,,,); //從第2個元素開始，删除1個元素，然後在此位置增加'7,8,9'三個元素
alert(aList); //彈出 1,2,7,8,9,4
多元數組
多元數組指的是數組的成員也是數組的數組。
var aList = [[,,],['a','b','c']];
alert(aList[][]); //彈出2;
正則
var str = 'aaaa1q?i+cn1312w4o_#ilovem4$2enshaizi ';
//轉義字元
var reg = /w/;
var reg = /\w/; //單個字母數字下劃線
var reg = /\W/; //單個非字母數字下劃線
var reg = /\d/; //單個數字
var reg = /\D/; //單個非數字
var reg = /\s/; //單個空白字元
var reg = /\S/; //單個非空白字元
//元字元串
var reg = /./; //除了換行外的任意字元
var reg = /1*/; //比對0次或多次(看第一個字元)
var reg = /q+/; //比對至少一次或多次
var reg = /i+?/; //拒絕貪婪模式
var reg = /a{3}/; //指定比對次數
var reg = /a{1,5}/; //指定比對1-3次
var reg = /[a-z,A-Z,_,0-9]+/;//指定字元範圍
var reg = /i(lo(v)e)m/;//子組
var reg = /cn|com|net/;//或
//開頭和結尾
var reg = /^\w+\d$/; //開頭除了特殊字元結尾數字
var reg = /^\w{10,20}\d$/;
//開頭除了特殊數字比對10-20次數字結尾
var reg = /^\d+[a-z]+$/;//數字開頭字母結尾
var reg = /^\w+@\w{2,10}\.(cn|com)$/;//比對郵箱
// 方法
var res1 = reg.test(str);//傳回布爾類型
var res2 = reg.exec(str);
//按照規則探索,有則以數組形式傳回,無則傳回null
console.log(res1);
console.log(res2);
return作用
在函數中如果不寫 return 或者隻寫return 沒有傳回指定值時 預設傳回值 undefined;
在函數中寫了return 代表目前函數要立即結束,并将結果傳回
return flase 阻止事件冒泡 阻止元素的行為
JQuery
選擇器
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=username]')
// 選擇name屬性等于username的input元素
$('#ul1 li span')
//空格層級擷取選擇id為為ul1元素下的所有li下的span元素
$('#id,.class');//逗号并列擷取
對選擇集進行修飾過濾(類似CSS僞類)
$('#ul1 li:first') //選擇id為ul1元素下的第一個li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li
對選擇集進行函數過濾
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').first(); //選擇第1個div元素
$('div').eq(); //選擇第6個div元素
選擇集轉移
$('div').prev('p'); //選擇div元素前面的第一個p元素
$('div').next('p'); //選擇div元素後面的第一個p元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').parent(); //選擇div的父元素
$('#abc').parents(); //選擇id為abc的所有的先輩元素
$('div').find('.myClass'); //選擇div内的class等于myClass的元素
樣式操作和擷取操作
// 給目前的樓号加樣式 其他移除
$(this).addClass('cur').siblings().removeClass('cur')
// 擷取div的樣式
$("div").css("width");
//設定div的樣式
$("div").css("width","30px");
設定樣式,多個樣式
$('.as').css({border:'2px solid red',background:'#666'});
//通過标簽名擷取元素 document.getElementsByTagName()
//$('li').css('border','2px solid #f39');
//通過标簽中的屬性擷取元素 []
//$('li[name=y]').css('border','2px solid #f39');
//$('img[width="100%"]').css('border','2px solid #f39');
//$('img[name=logo]').css('border','2px solid #f39');
//空格 層級關系擷取元素
//$('#images li').css('border','2px solid #f39');
//逗号 并列擷取
//$('.w,#img').css('border','2px solid #f39');
//選擇id為menu元素下的第一個li
//$('#menu li:first').css('border','2px solid #f39');
/選擇id為section元素下的li的奇數行
// $('#section li:odd').css('border','2px solid #f39');
// $('#section li:even').css('border','2px solid #f63');
//選擇id為section元素下的第個li 下标從開始
// $('#section li:eq(1)').css('border','2px solid #f63');
//id為section 前面第一個div元素
//$('#footer').prev('p').css('color','#f39');
//id為section 後面第一個div元素
//$('#section').next('p').css('color','#f63');
//選擇images的所有子元素
//$('#images').children().css('border','2px solid #f63');
//選擇id為acc的同級元素
//$('#acc').siblings().css('border','2px solid #f39');
//選擇id為acc的父級元素
//$('#acc').parent().css('border','2px solid #f63');
//選擇id為acc的所有的先輩元素
//$('#acc').parents().css('border','2px solid #f39');
//選擇id為acc的先輩元素中 id為all的元素
//$('#acc').parents('#all').css('border','2px solid #f63');
//選擇id為images下的id為acc元素
var c = $('#images').find('#acc');
console.log(c)
類名操作
操作樣式類名
$("#div1").addClass("divClass2") //為id為div1的對象追加樣式divClass2
$("#div1").removeClass("divClass") //移除id為div1的對象的class名為divClass的樣式
$("#div1").removeClass("divClass divClass2") //移除多個樣式
$("#div1").toggleClass("anotherClass") //重複切換anotherClass樣式
文本操作
$('#as').html('<span style="color:red">11</span>')
可以執行的樣式操作
$('#as').text('<span style="color:blue">22</span>')
取出或添加文本内容
var r = $('#as').html();
var b = $('#as').text();
屬性操作
屬性操作
、attr() 取出或設定某個屬性的值
// 取出圖檔的位址
var $src = $('#img1').attr('src');
$("input[name='sex'][value='{{user.sex}}']").attr("checked", true);
選擇框尾name時sex,值為目前選項的添加預設選項
// 設定圖檔的位址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
//也可以使用者設定class屬性
$('#abc').attr('class','all')
//也可以自定義 屬性
$('#abc').attr('love','iloveyou')
、removeattr()删除屬性
$('#abc').removeattr('class')
$('#abc').removeattr('love')
toggleClass()
如果存在,則移除,如果不存在.則添加
$('#as').toggleClass('myclass');
擷取尺寸操作
擷取元素距離文檔偏移量
//var innero = $('.inner').offset();
var innerTo = $('.inner').offset().top
擷取目前元素相對于父級元素的偏移量
//var innerp = $('.inner').position();
擷取文檔滾動的距離
var wt = $(window).scrollTop();
快速擷取元素的寬高
// var w = $('.inner').width();
// var h = $('.inner').height();
設定元素的寬高
// var w = $('.inner').width();
// var h = $('.inner').height();
擷取可視區域的寬高
// var ww = $(window).width();
// var wh = $(window).height();
擷取整個文檔的寬高
var dw = $(document).width();
var dh = $(document).height();
事件
方法綁定
click
bind 方法綁定 bind('dblclick',function(){
live 動态方法綁定 live('click',function(){
trigger 自動觸發 $('#move').trigger('click');
解除事件綁定
$('#move').die('click') 解除動态綁定
$('#move').unbind()
單擊事件 click
輕按兩下事件 dblclick 滑鼠擡起 mouseup
滑鼠按下 mousedown 滑鼠右鍵 oncontextmenu
window.oncontextmenu = function(){
alert();}
滑鼠移入 mouseover 滑鼠移出 mouseout
滑鼠移動檢視位置:
$('.move').mousemove(function(e){
// 滑鼠相對于浏覽器的視窗
var x = e.clientX;
var y = e.clientY;
// 滑鼠相對于文檔的視窗
// var x = e.pageX;
// var y = e.pageY;
console.log(x,y)
})
鍵盤按下 keydown 鍵盤擡起 keyup
//擷取按鍵資訊 function裡一般傳入參數 e
var k = e.keyCode;
擷取焦點事件 focus 喪失焦點事件 blur
改變值之後的事件 change
文檔滾動事件,當文檔發動滾動時觸發的事件
$(window).scroll(InitScroll);
網頁加載事件 window.onload = function(){}
節點操作
建立節點
var $div = $('<div>');
在元素内部尾部添加 append
在元素内部頭部添加 prepend
在元素外部頭部添加 before
在元素外部尾部添加 after
删除 remove
清空 empty
克隆 clone
彈出一個詢問框,帶有取消和确定按鈕,傳回布爾類型
var res = confirm('您确定要删除這個元素碼?');
效果
!所有的效果後面都可以加時間.
$('#move').show(); //顯示
$('#move').slideDown();//滑動顯示
$('#move').fadeIn();//漸變
$('#move').hide();//隐藏
$('#move').slideUp;//滑動隐藏
$('#move').fadeOut();//漸變
$('#move').toggle();//隐藏和顯示切換
$('#move').slideToggle();//滑動隐藏和顯示切換
$('#move').fadeToggle();//漸變隐藏和顯示切換
自定義動畫
$('#move').animate({
width:'300px',height:'400px',
top:'100px',left:'100px',
borderRadius:'50%'
},)
$('#move').stop(); 暫停動畫效果
// 延時執行自定義動畫 (delay 延時多長時間 )
$('#move').delay().animate({
width:'300px',height:'400px',
top:'100px',left:'100px',
borderRadius:'50%',
},)
// 綁定文檔滾動事件
$(window).scroll(function(){
// 擷取整個文檔的高度
var dH = $(document).height();
// 擷取可視區域的高度
var cH = $(window).height;
// 擷取文檔的滾動距離
var dT = $(window).scrollTop();
// 判斷 是否觸底
if(dT == dH-cH){
requestGoods();
}
})
json
json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裡說的json指的是類似于javascript對象的一種資料格式，目前這種資料格式比較流行，逐漸替換掉了傳統的xml資料格式。
javascript對象字面量：
var tom = {
name:'tom',
age:
}
json格式的資料：
{
"name":'tom',
"age":
}
與json對象不同的是，json資料格式的屬性名稱需要用雙引号引起來，用單引号或者不用引号會導緻讀取資料錯誤。
json的另外一個資料格式是數組，和javascript中的數組字面量相同。
['tom',,'programmer']
ajax 異步和同步
AJAX 是與伺服器交換資料并更新部分網頁的藝術，在不重新加載整個頁面的情況下。
通過 HTTP 請求加載遠端資料
jQuery 底層對 AJAX 實作進行了封裝.使得我們在進行ajax操作時,不必像原生js中那麼複雜
$.get, $.post, $.ajax() 傳回其建立的 XMLHttpRequest 對象。多數情況下我們不需要去操作傳回的對象
/發送ajax請求 url 可選 發送get請求時攜帶的參數 ,,可選 回調函數,請求完之後做什麼事 ,可選,傳回的資料類型 json
$.get(url,{攜帶的參數},function(data){},'json');
$.post(url,{攜帶的參數},function(data){},'json');
$.ajax({
url:'/cgi-bin/1.py', 目前請求的url位址
type:'post', 目前請求的方式 get post
data:{name:'fei'}, 請求時攜帶的參數
dataType:'json', 傳回的資料類型
success:function(data){ 請求成功後執行的代碼
alert('請求成功')
},
error:function(){ 請求失敗後執行的代碼
alert('請求錯誤')
},
timeout:, 毫秒 設定目前請求的逾時時間,必須異步
async:false ture異步, flase 同步
})
ajax異步 同步
//設定ajax的全局配置 async:false 設定目前請求為同步
$.ajaxSetup({
async:false
})
關于ajax中 異步 和 同步
ajax預設就是異步請求,
async (預設: true) 預設設定下，所有請求均為異步請求。
如果需要發送同步請求，請将此選項設定為 false。
同步請求,就發ajax請求發出去後必須等待ajax的結果傳回後才能繼續往下執行
一般情況下都使用異步操作就可以,除非有特殊情況,必須等ajax的結果回來後才能做處理的,就用同步
注意
ajax是無重新整理請求伺服器,是以我們在浏覽器中是感覺不到,也看不到ajax的具體請求和執行情況的.,
是以我們需要借助浏覽器的調試工具 (F12打開) 進行檢視
ajax的請求是基礎HTTP協定的,就要求你目前打開這個帶有ajax的html時必須使用http協定
ajax要求同源政策
http://:/cgi-bin/py
即: 協定(http https) 域名或IP 以及端口( ...)都必須一緻
關于傳回的資料類型 在get() post() ajax() 都可以設定傳回的資料類型 'json'
如果要求傳回json格式資料,那麼就必須傳回json,如果不正确,
在get和post方法将拿不到data中傳回的資料,在ajax方法中則會進去error方法
在python中傳回json格式資料,
引入 json子產品
json.dumps(資料) 使用json_dumps方法進行json格式的編碼轉換
在使用ajax方法時.會建立一個對象 XMLHttpRequest
那麼在ajax的方法中使用的 $(this) 就代表 ajax的對象
$(this) 永遠代表一個對象,沒有指明對象時 代表的時window對象,
在它有對象時 代表的就是目前的這個對象
ajax注意
在ajax使用$(this)時,一定要用變量接受
var uid=$(this).parents('tr').find('td:first').text()
var btn = $(this)
Bootstrap
head格式(注意:js需要改名)
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta标簽*必須*放在最前面，任何其他内容都*必須*跟随其後！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./public/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./public/js/jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./public/js/bootstrap.min.js"></script>
商城統計
window.onload=function(){
var x = document.getElementsByName('xiaoji'); ##小計的name
var num = ;
for (var i = x.length - ; i >= ; i--) {
console.log($(x[i]).text());
num = num + parseInt($(x[i]).text());
};
console.log(num);
$('.zj').html(num);
}
![DOM下元素 offset client scroll 相關屬性簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)