python-前端-Javascript&Jquery&Bootstrap

時間 2019-11-10

標籤 python 前端 javascript&jquery&bootstrap javascript jquery bootstrap 欄目 Python 简体版

原文原文鏈接

目錄:1. JavaScript 2.Jquery 3.Bootstrapjavascript

JavaScriptcss

javascript是一種web前端的描述語言，也是一種基於對象(object)和事件驅動(Event Driven)的、安全性好的腳本語言html

它運行在客戶端，從而減輕服務器的負擔前端

特色：java

1.javascript 主要用來向html頁面中添加交互行爲python

2.javascript 是一種腳本語言，語法和c語言系列語言的語法相似，屬於弱語言類型jquery

3.javascript 通常用來編寫客戶端腳本web

4.javascript 是一種解釋型語言，邊執行邊解釋，無需另外編譯ajax

用途：正則表達式

解決網頁交互和數據交互，最終目的是豐富客戶端效果以及數據的有效傳遞

1.實現頁面交互，提高用戶體驗實現頁面特效，即javascript操做html的dom結構或操做樣式

2.實現數據交互，客戶端表單驗證，即在數據送達服務端以前進行用戶提交信息，及時有效的驗證，減輕服務器壓力

ECMAScript

是腳本程序設計語言的web標準

與javascript的關係：

ECMAScript是歐洲計算機制造商協會，基於美國網景通信公司的Netscape發明的javaScript

和Microsoft公司隨後模仿javaScript推出的JScript腳本語言，制定了ECMAScript標

javascript由ECMAScript/DOM/BOM三部分組成

前端經常使用開發工具：sublime/ visual Studio Code/ HBuilder/ Webstorm

javascript實例：

<!DOCTYPE html>

<html>

<head>

.span1{

color:red;

}

</style>

<head>

<body>

<body>

document.write('<span class="span1">233</span>') 向文檔輸入內容，不會覆蓋原文檔的內容

console.log('星兒今天很漂亮') 往控制檯打印日誌

console.error('錯了') 向控制檯拋出一個異常

console.dir(window) 輸入一個對象的所有屬性 console.clear()清除，通常用不到

var a = prompt('請輸入你的名字'); 相似於input輸入內容，有返回值

console.log(a);

function clickhandler() {

//彈出警告框

//都好好的好好的

這是一個方法

一個很好的方法

//window.alert(1); 彈出一個帶有一條指定消息的信息

}

</script>

</html>

變量

即在程序運行過程當中它的值是容許改變的量，與之對應的是常量：即在程序運行過程當中它的值是不容許改變的量

定義關鍵字 var str = 'alex';

變量的聲明與定義

1.先聲明後定義

var dog;

// alert(dog) //undefined 未定義

// 定義

dog = '小黃';

2.聲明馬上定義

var dog_2 = '小紅';

console.log(dog_2); //小紅

變量名規範

1.嚴格區分大小寫

2.能夠用字母、數字、下劃線、$，但不能數字開頭，不能純數字，不能包含關鍵字，像var 和保留字，像alert

關鍵字例如var number,也儘可能不要使用top name

3.推薦駝峯命名法：有多個有意義的單詞組成名稱的時候，第一個單詞的首字母小寫，其他的單詞首字母大寫，這沒寫錯

4.匈牙利命名：就是根據數據類型單詞的首字符做爲前綴

數據類型

基本數據類型和引用數據類型

基本數據類型指的是簡單的數據段

引用數據類型指的是有多個值構成的對象

基本數據類型：

number

var a = 123;

// typeof 檢查當前變量是什麼數據類型

console.log(typeof a)

// 特殊狀況

var a1 = 5/0;

console.log(a1) //結果是infinity 無限大類型仍是number

string

var str = '123';

console.log(typeof str)

boolean

var b1 = false;

console.log(typeof b1)

空值null

var c1 = null;//空對象 object

console.log(typeof c1) 這個結果是object類型

空值undefined

var d1

//表示變量未定義

console.log(typeof d1)

引用數據類型

包含對象數據類型和函數數據類型

對象數據類型：數組array 對象object 正則regexp

函數數據類型：function

Function

Object

Arrray

String

Date

運算符

賦值運算符、算數運算符、比較運算符、特殊狀況

1.賦值運算符

= += -= *= /= %=

2.算術運算符

+ - * / %(取餘) ++(自增) --(自減)

c1=d++ d++是先賦值後++，此時查看c1就是d的值

c2=++d ++d是先++後賦值，此時查看c2就是d進行了自增操做後的值

3.比較運算符

瀏覽器會進行隱式轉換

'5'==5就會是true

== ===(等同於，值和類型均相等) != !==(不等同與，值或類型有一個不相等或兩個都不相等)

> < >= <=

4.特殊狀況

能夠進行字符串拼接，即:

var name = "alex";

var str = "my name is "+name+"li"；

字符串不能進行+運算

var a1 = "1";

var a2 = "2";

var str1 = a1 + a2 輸出的是字符串格式的12，是進行了字符串的拼接，而不是運算獲得3

可是能夠進行減乘除等運算，隱式轉換，瀏覽器會自動把字符串的數字解析成數字格式而後進行運算

5.邏輯運算符

&& and || or

&& 要兩個都爲真

|| 有一個爲真就是真

數據類型轉換

1.將數值類型轉換成字符串類型

var n1 = 123;

var n2 = '123';

var n3 = n1+n2;

//隱式轉換

console.log(typeof n3); string類型

//強制轉換

var n4 = String(n1);

2.將字符串類型轉換成數值類型

var stringNum = '789.123wadjhkd';

var num2= Number(stringNum)

console.log(num2)

//parseInt()能夠解析一個字符串，並返回一個整數

console.log(parseInt(stringNum));

console.log(parseFloat(stringNum));能返回浮點數

3.任何數據類型均可以轉換爲boolean類型

var b1 = '123';

var b2 = 0;

var b3 = -123;

var b4 = Infinity;

var b5 = NaN; 這個東西是not a number 可是其實這個是個number數據類型

var b6;//undefined67

var b7 = null;

//非0 NaN即真

console.log(Boolean(b7))

流程控制

瀏覽器解析代碼的順序是從上往下的

if if-else 邏輯與&& 邏輯或|| switch while循環 do_while循環 for循環

1.if if-else

if:

var ji = 20;

if (ji >= 20){

console.log('恭喜你，吃雞成功，大吉大利')

}

alert('alex');

if-else:

var ji = 20;

if(ji >= 20){

console.log('恭喜你，吃雞成功，大吉大利')

}else{

console.log('很遺憾，下次繼續努力')

}

if-else if-else:

if (true){

//執行操做

}else if(true){

//知足條件執行

}else if(true){

//知足條件執行

}else{

//知足條件執行

}

2.邏輯與&& 邏輯或||

邏輯與&& 兩個條件都成立的時候才成立

if (sum>400 && math>90){

console.log('清華大學錄入成功')

}else{

alert('高考失利')

}

邏輯或|| 只有有一個條件成立的時候才成立

if (sum>500 || english>85){

alert('復旦大學錄入成功')

}else{

alert('高考失利')

}

3.switch

var gameScore = 'good1111';

switch(gameScore){

//case表示一個條件，知足這個條件就會走進來，遇到break跳出，break終止循環

//若是某個條件中不寫break，那麼直到該程序遇到下一個break中止

case 'good':

console.log('玩得很好')

//break表示退出

break;

case 'better':

console.log('玩的老牛逼了')

break;

case 'best':

console.log('恭喜你，吃雞成功')

break;

default: 最後的條件，不作比較

console.log('很遺憾')

}

4.while循環

循環分三步走：

1.初始化循環變量

2.判斷循環條件

3.更新循環變量

實例：

var i = 1; //初始化循環變量

while(i<=9){ //判斷循環條件

console.log(i);

i = i+1; //更新循環條件

}

練習：將1-100全部是2倍數的在控制檯打印，使用while循環

var i = 1;

while(i<101){

if (i%2===0){

console.log(i);

}i++;

}

5.do_while循環

//無論有沒有知足while中的條件do裏面的代碼都會走一次

var i =3; //初始化循環變量

do{

console.log(i)

i++; //更新循環條件

}while (i<10) //判斷循環條件

6.for循環,也是像上面同樣三步走

for (var i = 1;i<=10;i++){

console.log(i)

}

練習：

1.1-100之間全部的偶數

for (var i = 1;i<=100;i++){

if(i%2==0){ //是偶數

console.log(i)

}

2.1-100之間全部數之和

var sum = 0;

for(var j =1;j<=100;j++){

sum = sum+j

}

console.log(sum)

3.打印6*6的星號

for(var i=1;i<7;i++){

for (var j=0;j<6;j++){

document.write('*');}

document.write('<br>');

}

4.輸出六行的直角三角形

for(var i=1;i<7;i++){

for(var j=0;j<i;j++){

document.write('*');}

document.write('<br>');

}

5.輸出等邊三角形

for(var i=1;i<7;i++){

for(var s=i;s<6;s++){

document.write(' ')

}

for(var j=1;j<=2*i-1;j++){

document.write('*');

}

document.write('<br>');

}

經常使用內置對象

都是ECMAScript提供的

數組Array

1.數組的建立方式，感受跟python裏面的list很像

1.1字面量方式建立，推薦使用

var colors = ['red','color','yellow'];

1.2使用構造函數的方式建立，使用new關鍵詞對構造函數進行建立對象

var colors2 = new Array(); Array()是構造函數，括號內能夠傳值

2.數組的賦值

var arr = []; //經過下標進行一一賦值

arr[0] = 123;

arr[1] = '哈哈哈';

arr[2] = '嘿嘿嘿';

取值也能夠經過下標來取

能夠進行for循環遍歷取到所有的值

for(var i=0;i<arr.length;i++){

console.log(arr[i])}

3.數組的經常使用方法

.concat() 把幾個數組合併成一個數組

.join() 返回字符串，其中包含了鏈接到一塊兒的數組中的全部元素，元素由指定的分隔符鏈接或分割

.toString() 直接轉成字符串，每一個元素之間用逗號隔開

.indexOf() 查找下標，正向，若是查找的值不存在，返回-1

.lastIndexOf() 查找下標，反向找，可是跟正向查出來的結果是同樣的，由於一個元素的下標是固定的

.pop() 移除數組的最後一個元素，並返回該元素

.shift() 移除數組的第一個元素，並返回這個元素

.unshift() 往數組的開頭添加一個或多個元素，而且返回新的長度

.slice(start,end) 返回數組的一段

.push() 往數組的最後添加一個元素，並返回新的長度

.sort() 對數組進行排序，並會真正影響到該數組

.reverse() 對數組進行反轉，並會真正影響到該數組

.length 它是一個屬性，惟一一屬性，獲取數組的長度，能夠結合for循環遍歷操做

字符串String

.charAt() 返回指定索引的位置的字符

.concat() 返回字符串值，表示兩個或多個字符串的拼接

.match() 返回正則表達式模式對字符串進行查找，並將查找結果做爲結果返回

.replace(a,b) 字符串b替換了a

.search(stringObject) 指明是否存在相應匹配，若是找到一個匹配，返回一個整數值

這個整數值指明瞭匹配距離字符串開始的偏移位置，沒有找到匹配返回-1

.slice(start,end) 返回start到end之間的字符串，顧頭不顧尾，不包含end，索引從0開始

.split('a',1) 字符串拆分，以a拆分，第二參數是返回的數組的內容的個數，即其長度

.substring(start,end)截取字符串，顧頭不顧尾

.length 返回字符串的長度

.toUpperCase() 返回一個新的字符串，字母所有大寫，不會更改原字符串

.toLowerCase() 返回一個新的字符串，字母所有小寫，不會更改原字符串

Number數字對象

var num = 132.32522;

var numStr = num.toString() //將number類型轉成字符串類型

console.log(typeof numStr)

var newNum = num.toFixed(2) //四捨五入，括號中是指定保留的小數位數

console.log(newNum)

Date日期對象

建立日期對象，只有用構造函數一種方法，使用new關鍵字

var myDate = new Date();

經常使用方法：

.getDate() 根據本地時間返回指定日期對象的月份中的第幾天(1-31)

Date() 根據本地時間返回當天的日期和時間,直接用Date()，不用使用myDate對象

.getMonth() 根據本地時間返回指定日期對象的月份(0-11)，因此用的時候要注意+1，0是1月！

.getFullYear() 根據本地時間返回指定日期對象的年份(四位數年份時返回四位數字)

.getDay() 根據本地時間返回指定日期對象是星期中的第幾天(0-6),0是週日，必定要注意！

.getHours() 根據本地時間返回指定日期對象的小時(0-23)

.getMinutes() 根據本地時間返回指定日期對象的分鐘(0-59)

.getSeconds() 根據本地時間返回指定日期對象的秒數(0-59)

Math內置對象

經常使用：

Math.floor() 向下取整，地板函數，有返回值，返回小於等於原值且與其最接近的值

Math.ceil() 向上取整，天花板函數，有返回值，返回值是大於等於原值且與其最接近的數

Math.max(a,b) 求a和b中的最大值，有返回值

Math.min(a,b) 求a和b中的最小值，有返回值

Math.random() 隨機數，默認0-1之間的隨機數

有個求多少值到多少值之間的數的公式

min+Math.random()*(max-min)

普通函數

在javascript中，函數是一個數據類型

函數的調用形式

一：

1.函數的聲明這個function必須小寫

function add(){

alert('函數被調用了');

alert(this);//當前的this指向了window

//執行的一些操做

}

2.函數的執行

add();

二：

var add = function(){

alert('函數被調用了');

}

add()

三：聲明函數式帶形式參數

function add3(x,y){

return x+y;

}

var sum = add3(4,5)

alert(sum)

建立對象的幾種經常使用方式

使用Object或對象字面量建立對象

工廠模式建立對象

構造函數模式建立對象

原型模式建立對象

1.使用Object或對象字面量建立對象，推薦使用字變量的方式建立

字變量的方式：

var stu={

name:'alex',

age:22,

fav:'雞湯'

};

console.log(stu);

console.log(window);/*這個window是系統提供給咱們的一個對象*/

//點.語法，包括get方法和set方法

var name=stu.name;

console.log(name);

stu.age=34;

console.log(stu.age);

使用Object的方式

var obj=new Object();

obj.name='xiaomage';

console.log(obj);

2.工廠模式建立對象

JavaScript中沒有類的概念

3.構造函數模式建立對象

構造函數與普通函數的區別：

3.1並不存在建立構造函數的特殊語法，構造函數與普通函數惟一的區別在於調用方法

對於任意函數，使用new操做符調用，那就是構造函數

3.2約定構造函數名以大寫字母開頭，普通函數以小寫字母開頭

構造函數不須要return，爲對象添加成員變量：this.name='alex'

3.3使用new操做符調用構造函數，會經歷以下四個階段：

>> 建立一個新對象

>> 將構造函數做用域賦給新對象，使this指向該對象

>> 執行構造函數代碼

>> 返回新對象

實例：

function Student(name,age){

this.name = name;

this.age = age;

this.alertName = alertName();

}

function alertName() {

alert(this.name);

}

var stu1 = new Student("easy1",20);

var stu2 = new Student("easy2",20);

推薦使用的構造函數方式

4.原型的模式建立對象，最好的方案，太難，看看就得了

實例：

function Student(){

this.name = 'easy';

this.age = 20;

}

Student.prototype.alertName = function(){

alert(this.name);

};

var stu1 = new Student();

var stu2 = new Student();

stu1.alertName;

stu2.alertName;

alert(stu1.alertName == stu2.alertName);

定時器

兩種：setTimeout() setlnterval()

1.setTimeout()

只在指定時間後執行一次

function hello(){

alert("hello");

}

var t1 = window.setTimeout(hello,1000)

var t2 = window.setTimeout("hello()",3000) //使用字符串執行方法

window.clearTimeout(t1);//去掉定時器

2.setInterval()

在指定時間循環執行,執行函數有返回值，刪除該定時器須要clearInterval(返回值)

setInterval('refreshQuery()',8000); //實時刷新時間單位爲毫秒

function refreshQuery(){

console.log('每8秒調一次')

}

通常狀況下，setTimeout用於延遲執行某方法或功能

setInterval用於刷新表單

正則表達式

https://www.processon.com/view/link/5add4ef9e4b04691064d5e37

/g 是整個字符串所有匹配一遍

DOM操做 document object module

樹狀結構

在JavaScript中，全部的事物都是節點，元素、文本都是節點

應用場景：能夠經過節點進行DOM對象的增刪改查

1.獲取DOM節點的方法

經過id獲取，惟一的

var oDiv = document.getElementById('box');

經過類名獲取

var oDiv = document.getElementsByClassName('.box')[0];

經過標籤名獲取

var oDiv = document.getElementsByTageName('div')[0];

2.經常使用DOM節點

childNodes 獲取全部子節點，包括元素、文本等

children 獲取全部元素子節點

parentNode 獲取父節點

previousSibling 獲取上一個兄弟節點，包含文本

previousElementSibling 獲取上一個兄弟元素節點，不包含文本

nextSibling 獲取下一個兄弟節點，包含文本

nextElementSibling 獲取下一個兄弟元素節點，不包含文本

firstChild 獲取第一個子節點，包含文本

firstElementChild 獲取第一個子節點，不包含文本

lashChild 獲取最後一個子節點，包含文本

lastElementChild 獲取父元素最後一個元素節點，不包含文本

3.節點的增刪改查

<div>

</div>

<p>wusir</p>

<p>xiaomage</p>

<a>luffy</a>

</div>

<div>

</div>

// 1.建立元素節點

var oH2 = document.createElement('h2');

// 設置oH2的內容，p標籤會被解析成p元素顯示到HTML頁面中

oH2.innerHTML = '<p>嘿 sariy</p>';

// 只設置元素內的文本內容，div標籤將被當作文本元素

oH2.innerText = '<div>嘿嘿</div>'

// 2.將建立好的元素節點添加到指定元素全部內容的後面

oDiv.appendChild(oH2);

// 獲取元素節點裏的全部內容包括標籤和文本

console.log(oDiv.innerHTML);

// 表示元素節點的標籤名大寫

console.log(oDiv.tagName);

// 只獲取元素內的文本內容，html標籤將被忽略

console.log(oDiv.innerText);

// 設置元素id

oH2.id = 'luffy';

// 設置類名

oH2.className = 'wusir';

oH2.className = 'wusir2';

//獲取標籤屬性

console.log(oH2.getAttribute('class'));//wusir2

// 設置標籤屬性

oA.setAttribute('href','https://www.luffycity.com');

// 刪除元素上的屬性

oA.removeAttribute('href');

// 刪除建立的對象

// oDiv.removeChild(oH2);

//若是爲true 克隆當前元素與元素的全部子節點

// console.log(oDiv.cloneNode(true));

// 父節點.replaceChild(新節點,子節點) 用新節點替換某個子節點

var op = document.createElement('p');

op.innerText = '我是一個段落';

oDiv.replaceChild(op,oA);

//style屬性：css內聯樣式屬性值

//通常狀況下， css的樣式屬性中出現「-」號，則對應的style屬性是：去掉「-」號，把「-」號後面單詞的第一字母大寫。若是沒有「-」號，則二者同樣。

//例如:oDiv.css.backgroundColor = 'red';

BOM

1.BOM輸出

所謂BOM指的是瀏覽器對象模型Browser Object Model，它的核心就是瀏覽器

全局對象window

四個經常使用方法:

alert(1);//彈出框調式使用

console.log('路飛學城')；//用瀏覽器的調用 F12查看通常用於瀏覽器的調試

prompt('message',defaultValue)

var pro = prompt('路飛學城','33333');第二個參數是默認值，這個會彈出一個輸入框，有返回值

console.log(pro)

confirm() //有返回值，若是點擊肯定，返回true，若是點擊取消，返回false

var m=confirm('學習BOM')會有一個彈出框，有肯定跟取消兩個選項

還有兩個方法 print find

2.open和close方法，全局對象window的方法

open('https://www.baidu.com');//打開百度網頁，window對象能夠省略

//行間的js中window不能省略

//打開空白頁面，_self是在當前頁面打開，_blank是在新的頁面打開

open('about:blank',"_self")

//關閉當前頁面

close();

//行間js中的window不能省略

3.其餘BOM對象和方法

//返回瀏覽器的用戶設備信息

console.log(window.navigator.userAgent)

//獲取用戶本地信息

console.log(window.location)

//常用的一個方法，跳轉一個網址

window.location.href = 'https://www.luffycity.com';

//全局刷新，window.location.reload()，這個方法少用，後面會學習ajax來實現局部刷新操做，用那個

4.client系列

style：

top

left

right

bottom

client：

clientTop 內容區域到邊框頂部的距離，就是border的寬度

clientLeft 內容區域到邊框左部的距離，就是border的寬度

clientWidth 內容區域+左右padding 可視寬度

clientHeight 內容區域+ 上下padding 可視高度

5.屏幕的可視區域

window.onload = function(){ //window.onload事件會在頁面加載完成後觸發

console.log(document.documentElement.clientWidth);

console.log(document.documentElement.clientHeight);

window.onresize = function(){

console.log(document.documentElement.clientWidth);

console.log(document.documentElement.clientHeight);

}

6.offset系列

offsetTop: 若是盒子沒有設置定位到瀏覽器的頂部的距離

若是盒子設置定位，那麼是以父盒子爲基準的top值

offsetLeft: 若是盒子沒有設置定位到瀏覽器的左部的距離

若是盒子設置定位，那麼是以父盒子爲基準的left值

offsetWidth: 內容+padding+border

offsetHeight: 內容+padding+border

7.scroll系列

<!DOCTYPE html>

<head>

<title>scroll</title>

padding:0;

margin:0;

}

</style>

</head>

<p>路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城

路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城

路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城

路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城

路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城路飛學城</p>

</div>

</body>

window.onload = function () {

//實時監聽滾動事件

// window.onscroll=function () {

// console.log('上'+document.documentElement.scrollTop);

// console.log("左"+document.documentElement.scrollLeft);

// console.log("寬"+document.documentElement.scrollWidth);

// console.log("高"+document.documentElement.scrollHeight);

// };

var s = document.getElementById('scroll');

s.onscroll = function(){

//scrollHeight : 內容的高度+padding 不包含邊框

console.log('上'+s.scrollTop);

console.log('左'+s.scrollLeft);

console.log('寬'+s.scrollWidth);

console.log('高'+s.scrollHeight);

}

</script>

</html>

jQuery

與javascript的區別

js是一門編程語言，用來編寫客戶端瀏覽器腳本

jQuery是js的一個庫，包含多個可重用的函數，用來簡化js開發的

jQuery能作的js都能作，js能作的jQuery不必定能作

注意：通常狀況下，是庫的文件，該庫中都會拋出來構造函數或對象

若是是構造函數，那麼使用new關鍵字建立對象

若是是對象，那麼直接調用屬性和方法

DOM文檔加載的步驟

1.解析HTML的結構

2.加載外部腳本和樣式表文件

3.解析並執行腳本代碼

4.DOM樹建立完成

5.加載圖片等外部文件

6.頁面加載完畢

執行時間：

window.onload()必須等到頁面內包括圖片的全部元素加載完畢後才能執行，5跟6之間

若是不寫window.onload() 代碼就是從上往下執行的

$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢，4跟5之間

編寫個數：

window.onload()不能同時編寫多個，若是有多個，只會執行一個，後面的覆蓋前面的

$(document).ready()能夠同時編寫多個，而且均可以獲得執行

簡化寫法：

window.onload()沒有簡化寫法

$(document).ready(function(){})能夠簡寫爲$(function(){})

引入：

百度的jquery庫：http://libs.baidu.com/jquery/2.0.0/jquery.min.js

jquery官方的庫：https://code.jquery.com/jquery-3.3.1.js

先引入jquery，再寫相應的jquery代碼

//DOM元素加載完成以後就會調用

//程序執行須要入口，入口函數的方式：

$(document).ready(function(){

alert(1)})

ready是一個回調函數，等待document加載完成後，去執行reday括號裏面的function

等價於:

$(function(){

alert(1);

$('#btn').click(function(){

$('div').show().html('個人內容')})})

選擇器：

基礎選擇器

id選擇器標籤選擇器類選擇器通配符選擇器

層級選擇器

子代選擇器(>) 後代選擇器( ) 毗鄰選擇器(+) 兄弟選擇器(~)

基本過濾選擇器

第一個$('li:first') 最後一個last 奇數的odd 偶數的even 索引值等於1的eq(1) 大於1 gt(1) 小於1 lt(1)

屬性選擇器

選取帶有指定屬性的元素，或選取帶有指定屬性和值的元素

li[id] li[class=what] input[name^=user]

篩選選擇器

$('li').first()

$('li').last()

jquery對象和DOM對象轉換，很重要

DOM對象轉換成jquery對象

var box = document.getElementById('box');

console.log($(box)); 直接放到$裏面就能夠

jquery對象轉成DOM對象

$('button')[0]

$('button').get(0)

jequry對象有click方法，

DOM對象是onclick方法

jquery的效果

show：

概念：顯示隱藏的匹配元素

語法：show(speed,callback)

參數：

speed：預約速度，能夠用字符串('slow','normal','fast')，能夠用毫秒數

callback：在動畫完成時執行的函數，每一個元素執行一次

hide

概念：隱藏顯示的元素

語法：hide(speed,callback)

與show的使用方法相似，這兩個方法用來動態的控制元素的顯示與隱藏

toggle

是一個開關，只控制盒子顯示隱藏時能夠用這個，要附帶文字時用show跟hide

若是元素是可見的就切換成隱藏的，若是元素是隱藏的就切換成可見的

slideDown

經過高度變化(向下增大)來動態地顯示全部匹配的元素，在顯示完成後觸發一個回調函數

用法和參數與上面相似

slideUp

經過高度變化(向上減少)來動態地隱藏全部匹配的元素，在隱藏完成後可選的觸發一個回調函數

用法和參數與上面相似

slideToggle

經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選的觸發一個回調函數

與toggle用法相似

fadeOut 沒了

經過不透明度的變化來實現全部匹配元素的淡出效果，並在動畫完成後可選的觸發一個回調函數

這個動畫只調整元素的不透明度，不改變其餘

fadeIn 出來

經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選的觸發一個回調函數

這個動畫只調整元素的不透明度，不改變其餘

fadeTo

把全部匹配元素的不透明度以漸進方式調整到指定的不透明度，並在動畫完成後可選的觸發一個回調函數

同樣的只會調整不透明度

fadeToggle

經過不透明度的變化來開關全部匹配元素的淡入淡出效果，並在動畫完成後可選的觸發一個回調函數

同樣的只會調整不透明度，實現淡入淡出就是用該方法

animate

概念：用於建立自定義動畫的函數

語法：animate(params,[speed],[fn])

參數：

params：一組包含做爲動畫屬性和終值的樣式屬性和及其值的集合

speed：跟上面同樣，用字符串或毫秒數來預約速度

fn：在動畫完成時執行的函數，每一個元素執行一次

stop

概念：中止全部在指定元素上正在運行的動畫

語法：stop([clearQueue],[jumpToEnd])

參數：

clearQueue：若是設置爲true,則清空隊列，能夠當即結束動畫

jumpToEnd/gotoEnd：讓當前正在執行的動畫當即完成，而且重設show和hide的原始樣式，調用回調函數

delay

概念：用來作延遲的操做

語法：delay(1000)一秒後作後面的操做

jquery的屬性操做

jquery對象有本身的屬性和方法，屬性分爲四部分

html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做，好比attr() removeAttr()

DOM屬性操做：是對DOM元素的屬性進行讀取，設置和移除操做，好比prop() removeProp()

類樣式操做：是對DOM屬性className進行添加，移除操做，好比addClass() removeClass() toggleClass()

值操做：是對DOM屬性value進行讀取和設置操做，好比html() text() val()

attr

概念：設置屬性值或者返回被選元素的屬性值

removeAttr

從每個匹配的元素中刪除一個屬性

prop

獲取在匹配的元素集中的第一個元素的屬性值，它是對當前匹配到的DOM對象設置屬性

removeProp

用來刪除.prop()方式設置的屬性集

addClass

添加多個類名

爲每一個匹配的元素添加指定的類名

$('div').addClass("box") 添加一個類名

$('div').addClass("box1 box2") 添加多個類名

removeClass

從匹配到的元素中刪除所有或者指定的類

$('div').removeClass('box') 移除指定的類

$('div').removeClass() 移除所有的類

toggleClass

若是存在，就刪除一個類，若是不存在，就添加一個類

toggleClass('box') 動態的切換類名爲box

html

獲取值：html()是獲取標籤元素中全部的內容

設置值：設置該元素的全部內容，會替換掉標籤中原來的內容

text

獲取值：text()獲取匹配元素中包含的文本內容

設置值：設置該元素中全部的文本內容

注意：值爲標籤的時候，不會被渲染爲標籤元素，只會被當作值渲染到瀏覽器中

val

獲取值：val()用於表單控件中獲取值，好比input textarea select等

設置值：$('input').val('設置了表單控件中的值')

有一個change方法能夠用於監控input表單值的變化，相似於click的寫法

jquery的文檔操做

插入操做

1.父元素.append(子元素) 追加，父元素中添加某個新元素

2.子元素.appendTo(父元素) 追加到，子元素添加到某個父元素中

3.prepend() 前置添加，添加到父元素的第一個位置

4.prependTo() 後置添加，第一個元素添加到父元素中

5.父.after(子)在匹配的元素以後插入內容，與子.insertAfter(父)

6.父.before(子)在匹配的元素以前插入內容，與子.insertBefore(父)

複製操做

clone()克隆匹配的DOM元素而且選中這些克隆的副本，括號裏是默認布爾值false，副本不能再克隆

若是把布爾值設爲true，那麼副本就具備跟本體相同的克隆能力

替換操做

1.replaceWith() 將全部的匹配的元素替換成指定的HTML或DOM元素

2.replaceAll() 用匹配到的元素替換掉全部selector匹配到的元素

刪除操做

1.remove() 刪除節點後，事件也會被刪除，簡言之就是刪除了整個標籤

2.detach() 刪除節點後，事件會被保留

3.empty() 清空元素中全部的後代節點

jquery的css

position

獲取匹配元素相對父元素的偏移位置，有left和top兩種屬性

offset

獲取匹配元素在當前視口的相對偏移，返回的對象包含兩個整型屬性：top和left

scrollTop

獲取匹配元素相對滾動條頂部的偏移文檔被捲起的像素值

scrollLeft

獲取匹配元素相對滾動條左側的偏移文檔被捲起的像素值

innerHeight

獲取第一個匹配元素內部區域高度(包括補白，不包括邊框)

innerWidth

獲取第一個匹配元素內部區域寬度(包括補白，不包括邊框)

outerHeight

獲取第一個匹配元素外部高度(默認包括補白和邊框)

outerWeight

獲取第一個匹配元素外部寬度(默認包括補白和邊框)

weight

取得匹配元素當前計算的寬度值

height

取得匹配元素當前計算的高度值

jquery的篩選方法

eq：獲取第N個元素 eq(index) $("p").eq(1)

first：獲取第一個元素 first() $('li').first()

last：獲取最後一個元素 last() $('li').last()

hasClass：檢查當前的元素是否含有某個特定的類，若是有，則返回true hasClass(類名) $('li').hasClass('li1')

children：取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合 children() $('div').children() 括號裏能夠加選擇器

parent：取得一個包含着全部匹配元素的惟一父元素的元素集合 parent() $('p').parent()

prev：取得一個包含匹配的元素集合中每個元素緊鄰的前一個同輩元素的元素集合 prev() $('p').prev()

preAll：查找當前元素以前全部的同輩元素 preAll() $('div:last').preAll().addClass('before')

siblings：篩選給定的同胞同類元素(不包括給定元素自己) siblings(元素) $('#leftBox li').eq(0).siblings('li').addClass('active')

js事件與事件流

HTML中與javascript的交互是經過事件驅動來實現的，會有一個事件監聽器

事件流描述的是從頁面中接收事件的順序

DOM事件流

DOM2級事件規定的事件流包括三個階段：

事件捕獲階段處於目標階段事件冒泡階段

document > html > body > 具體標籤 > body > html > document

jquery的事件不支持事件捕獲階段，只支持事件冒泡階段

jquery的經常使用事件

添加的事件不能發生在將來，動態生成的元素不能直接添加對象

事件對象的常見屬性：

e.type 獲取事件的類型

e.target 獲取事件發生的DOM對象

e.pageX和e.pageY 獲取到光標相對於頁面的X的座標和Y的座標

事件冒泡：

jquery不支持事件捕獲

阻止事件冒泡 e.stopPropagation() ,return false在jquery中既是阻止事件冒泡又是阻止默認行爲

阻止默認行爲 e.preventDefault()

合成事件：

hover事件

鼠標懸停事件.hover(handlerIn,handlerOut) 將兩個處理程序綁定到匹配的元素，當鼠標指針進入和離開元素時執行

hover事件是鼠標的mouseenter和mouseleave事件的實現

jquery事件綁定

.bind(type,[data],fn)

第一個參數是事件類型，經常使用的click，blur，hover等

多個事件類型能夠用空格分隔開

$("#foo").bind("mouseenter mouseleave",function(){

$(this).toggleClass("entered");})

第二個參數是可選參數，做爲event.data屬性值傳遞給事件對象的額外數據對象

第三個參數是用來綁定的處理函數

能夠綁定自定義的事件，而後用trigger觸發

事件代理在pycharm裏，重要

移除事件：

.unbind(type,fn) 第一個參數是事件類型，若是不寫，移除全部事件

第二個參數是將要移除的函數 $('#foo').unbind("click",function(){})

加載DOM：

.ready() 將函數綁定到文檔的就緒事件(當文檔完成加載時)

鼠標事件：

click鼠標單擊觸發事件

dblclick鼠標雙擊觸發事件

mousedown/mouseup鼠標按下/彈起觸發事件

mousemove鼠標移動事件

mouseover/mouseout鼠標移入/移出觸發事件，鼠標指針穿過或離開被選元素或當前元素的子元素，會觸發事件

mouseenter/mouseleave鼠標進入/離開觸發事件，鼠標指針只在穿過/離開被選元素觸發事件

focus/blur鼠標聚焦/失去焦點觸發事件(不支持冒泡)

keydown/keyup鍵盤按鍵按下/彈起觸發

表單事件：

change表單元素髮生改變時觸發事件

此事件僅限於input元素、textarea元素和select元素

對於選擇框、複選框和單選按鈕，當用戶使用鼠標進行選擇時，會當即觸發事件但對於其餘元素類型，事件將延遲到元素失去焦點

select文本元素髮生改變時觸發事件，此事件僅限於input type類型爲text和textarea表單元素

submit表單元素髮生改變時觸發事件

form表單有默認的submit行爲，當對input type=submit按鈕點擊的時候會觸發form的默認action行爲

此時能夠調用jquery的submit行爲經過e.preventDefault()來阻止默認事件，這樣咱們就能動態的跟服務端發送數據了

AJAX

AJAX=異步的javascript和XML

簡言之，在不重載整個網頁的狀況下，AJAX經過後臺加載數據，並在頁面上進行顯示

最重要的就是局部刷新

Bootstrap

來自Twitter，是目前最受歡迎的前端框架，基於HTML CSS Javascript

用於開發響應式佈局、移動設備有限的web項目

https://v3.bootcss.com/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。