天天看點

Web知識的學習HTML、CSSjavascrip商城統計

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段落,換行,字元實體

内容

段落标簽

換行标簽 帶有行線的換行标簽  ; 空格

&lt;      小于号
&gt;      大于号
           

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);
}