【前端】javascript基礎學習
邊框
border-style:solid;
border-width:1px;
border-color:red;
簡寫:
border:1px dotted red;
單獨
border-top-style:solid;
簡寫
border-top:1px dotted red;
邊框圓角
border-radius:50%
display
display的值:
none:隱藏標籤,不佔空間 --- visibility:hidden;隱藏標籤,佔用空間
inline:將標籤作成內斂樣式
block:將標籤作成塊級樣式
inline-block:同時具有兩種標籤的一些特色,可以設置高度寬度,而且不獨佔一行
盒子模型
content 內容
padding 內邊距 內容與邊框之間的距離 padding:10px 20px;上下 左右 padding:1px 20px 30px 40px;上右下左
border 邊框
margin 外邊距 與其餘標籤之間的距離
float浮動
佈局用的,設置了浮動的標籤會脫離正常文檔流,會形成父級標籤塌陷的問題
float:left;
float:right;
解決塌陷:
1.父級標籤設置行高
2.僞元素選擇器清除浮動
.clearfix:after{
content:'';
display:block;
clear:both;
}
父級標籤class='clearfix'
overflow溢出
overflow:auto; 出現滾動條
overflow:hidden; 隱藏內容
position定位
position:static. 默認就是它
position:relative;相對定位,保留原來位置的空間,相對本身原來的位置移動
position:absolute;絕對定位,不保留原來位置的空間,按照父級標籤或者祖先標籤中有設置了position爲相對定位的標籤,若是有,按照他的位置移動,若是沒有按照body移動
position:fixed; 固定定位.根據瀏覽器窗口位置來定位
z-index控制層級
z-index的值誰大誰在上面
透明度opacity
opacity標籤透明度
rgba(255,0,0,0.3) 單獨設置的某個屬性的透明度
錨點
設置 <a name='top'>頂部<a/> <div id='top'>頂部</div> 觸發點: <a href='#top'></a>
今日內容
js引入
方式1:
<script>
// js代碼
alert('澳門皇家賭場上線啦!!!')
</script>
方式2:外部文件引入 xx.js文件
<script src="js文件路徑"></script>
註釋
// 這是單行註釋 /* 這是 多行註釋 */
結束符python
結束符 JavaScript中的語句要以分號（;）爲結束符。也就是說和縮進不要緊了
聲明變量var
var a = 10; 聲明變量時能夠先不賦值 var a;此時a的值爲undefined
js動態類型語言es6
基礎數據類型
數值類型 Number
var a = 10; undefined typeof a; "number" var b = 1.11; undefined typeof b; "number" 查看數據類型用 typeof a; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
字符類型 String
var a = 'alexdsb' a "alexdsb" typeof a; "string" var a = "Hello" var b = "world; var c = a + b; //字符串拼接 console.log(c); // 獲得Helloworld
類型轉換
parseInt("123") // 返回123
parseInt("ABC") // 返回NaN,NaN屬性是表明非數字值的特殊值。該屬性用於指示某個值不是數字。
parseFloat("123.456") // 返回123.456
示例:
var a = 'a123';
var b = parseInt(a);
b
NaN
typeof b;
"number"
var b = '1.11';
parseFloat(b)
1.11
字符串經常使用方法
1 .length屬性,查看字符串長度
示例
var a = 'hello';
a.length; // 5
2 .trim() 移除空白
示例
var a = ' hello ';
a.trim(); //"hello"
3 .trimLeft() .trimRight()
4 .charAt(n) 返回索引爲n的那個字符
5 .concat() 字符串拼接
示例
var a = 'hello';
var b = 'world';
a.concat(b) //"helloworld"
6 .indexOf() 經過元素找索引
示例
a
"hello"
a.indexOf('e')
start參數,索引發始位置
a.indexOf('l',3)
找不到返回-1
a.indexOf('e',3) -1
7 .slice() 切片
var a = 'hello';
a.slice(2,4) 顧頭不鈷錠
8 .toLowerCase() #所有變小寫
.toUpperCase() #所有變大寫
示例:
var b = 'HH';
b.toLowerCase();
9 .split 字符串分隔,第二個參數是返回多少個數據
示例
var a = "hello"
a.split('e') //(2) ["h", "llo"]
a.split('e',1) //["h"]
布爾值
var a = true; var b = false; ""(空字符串)、0、null、undefined、NaN都是false。
null和undefined
null和undefined null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null; undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時， 返回的也是undefined。 null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。
對象類型 object
JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。
好比聲明一個字符串對象
var a = new String('bb')
複雜數據類型或者引用數據類型
數組 Array
建立數組: var a = [11,22,33]; var b = new Array([22,33]) typeof a; //object類型
數組經常使用方法和屬性
1 索引取值
var a = [123, "ABC"];
console.log(a[1]); // 輸出"ABC"
2 .length a.length //2
3. .push() 尾部追加 .pop()尾部刪除
示例
var a = [11,22,33]
a.push('123'); //[11, 22, 33, "123"]
a.pop(); //"123"
a -- [11, 22, 33]
4 .unshift(ele)頭部追加 .shift()頭部刪除
var a = [11,22,33]
a //(3) [11, 22, 33]
a.unshift('aa');
a
(4) ["aa", 11, 22, 33]
a.shift();
"aa"
a
(3) [11, 22, 33]
5 .sort排序
var a = [11,4,84,73];
a.sort()
(4) [11, 4, 73, 84]
function sortNumber(a,b){
return a - b;
}
a.sort(sortNumber)
(4) [4, 11, 73, 84]
function sortNumber(a,b){
return b - a
}
a.sort(sortNumber)
(4) [84, 73, 11, 4]
解釋:
若是想按照其餘標準進行排序，就須要提供比較函數，也就是本身提供一個函數提供排序規則，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：
若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。
6 .splice() 刪除元素 var a = [84, 73, 11, 4]; a.splice(1,2,'aa','bb','cc');
自定義對象 {}
var a = {"name": "Alex", "age": 18};
var d = {'name':'chao',age:18}; 鍵能夠不加引號
console.log(a.name);
console.log(a["age"]);
for循環遍歷自定義對象
var a = {"name": "Alex", "age": 18};
for (var i in a){
console.log(i, a[i]);
}
運算符
算數運算符
+ - * / % ++ -- i++,是i自加1，i--是i自減1 i++的這個加1操做優先級低，先執行邏輯，而後再自加1，而++i，這個加1操做優先級高，先自加1，而後再執行代碼後面的邏輯
比較運算符
> >= < <= != == === !== ==是弱等於(不比較數據類型) ===強等於 強等於會比較數據類型
邏輯運算符
&& || ! #and，or，非（取反）!null返回true
賦值運算符
= += -= *= /= #n += 1其實就是n = n + 1
流程控制
if -else if -else
var a = 10;
if (a > 5){
console.log("a > 5");
}else if (a < 5) {
console.log("a < 5");
}else {
console.log("a = 5");
}
switch 切換
var a = 10;
undefined
switch (a){ //switch (a++){}
case 9:
console.log('999');
break;
case 10:
console.log('101010');
break;
case 11:
console.log('111111');
break;
}
加上default示例:
var a = 20;
switch (a){
case 9:
console.log('999');
break;
case 10:
console.log('101010');
break;
case 11:
console.log('111111');
break;
default : //上面的條件都不成立的時候,走default
console.log('啥也不對!!')
}
問題
var a = 10;
switch (a){
case 9:
console.log('999');
break;
case 10:
console.log('101010');
// break;
case 11:
console.log('111111');
break;
default :
console.log('啥也不對!!')
}
for循環
for (var i=0;i<10;i++) {
console.log(i);
}
循環數組：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){
console.log(i,l2[i]);
}
方式2
for (var i=0;i<l2.length;i++){
console.log(i,l2[i])
}
循環自定義對象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
console.log(i,d[i],d.i) #注意循環自定義對象的時候，打印鍵對應的值，只能是對象[鍵]來取值，不能使用對象.鍵來取值。
}
while循環
var i = 0;
while (i < 10) {
console.log(i);
i++;
}
三元運算符
var a = 1; var b = 2; var c = a > b ? a : b //若是a>b這個條件成立，就把冒號前面的值給c，不然把冒號後面的值給c //python中的：a = x if x>y else y
函數
// 普通函數定義
function f1() {
console.log("Hello world!");
}
// 帶參數的函數
function f2(a, b) {
console.log(arguments); // 內置的arguments對象
console.log(arguments.length);
console.log(a, b);
}
// 帶返回值的函數
function sum(a, b){
return a + b; //在js中，若是你想返回多個值是不行的，好比return a ，b；只能給你返回最後一個值，若是就想返回多個值，你能夠用數組包裹起來 return [a,b]；
}
sum(1, 2); // 調用函數 sum(1,2,3,4,5)參數給多了，也不會報錯，仍是執行前兩個參數的和，sum(1)，少參數或者沒參數也不報錯，不過返回值就會是NAN
// 匿名函數方式，多和其餘函數配合使用，後面咱們就會用到了
var sum = function(a, b){ //在es6中，使用var，可能會飄黃，是由於在es6中，建議你使用let來定義變量，不過不影響你使用
return a + b;
}
sum(1, 2);
// 當即執行函數，頁面加載到這裏，這個函數就直接執行了，不須要被調用執行
(function(a, b){
return a + b;
})(1, 2); //python中寫能夠這麼寫：ret=(lambda x,y:x+y)(10,20) 而後print(ret)
函數的全局變量和局部變量
局部變量： 在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。 全局變量： 在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。 變量生存週期： JavaScript變量的生命期從它們被聲明的時間開始。 局部變量會在函數運行之後被刪除。 全局變量會在頁面關閉後被刪除。
做用域
首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。
閉包
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
}
return inner;
}
var ret = f();
面向對象
es5封裝方式正則表達式
function Person(name){
this.name = name;
}
var p = new Person('taibai');
p.name
"taibai"
Person.prototype.sum = function(a,b){return a+b;}
ƒ (a,b){return a+b;}
p.sum(2,3);
Date對象
var d1 = new Date(); //獲取當前時間
console.log(d1.toLocaleString()); //當前時間日期的字符串表示
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12"); #月/日/年(能夠寫成04/03/2020)
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數，瞭解一下就行
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString()); //毫秒並不直接顯示
date對象的其餘方法
var d = new Date(); //getDate() 獲取日 //getDay () 獲取星期 ，數字表示（0-6），週日數字是0 //getMonth () 獲取月（0-11,0表示1月,依次類推） //getFullYear () 獲取完全年份 //getHours () 獲取小時 //getMinutes () 獲取分鐘 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計毫秒數(從1970/1/1午夜),時間戳
json
var str1 = '{"name": "chao", "age": 18}';
var obj1 = {"name": "chao", "age": 18};
// JSON字符串轉換成對象 反序列化
var obj = JSON.parse(str1);
// 對象轉換成JSON字符串 序列化
var str = JSON.stringify(obj1);
RegExp正則對象
建立正則對象的方法
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
簡寫方式:
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
test方法.測試某個字符串是否符合正則規則
var s = 'hello'
reg1.test(s) 符合返回True,不符合返回false
一個坑:
reg1.test() 裏面什麼也不寫,會默認放一個"undefined"字符串
reg1.test("undefined")
其餘正則方法json
var s2 = "hello world"; s2.match(/o/g); // ["o", "o"] 查找字符串中 符合正則 的內容 ，/o/g後面這個g的意思是匹配全部的o, s2.search(/h/g); // 0 查找字符串中符合正則表達式的內容位置，返回第一個配到的元素的索引位置，加不加g效果相同 s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割，獲得一個新值，原數據不變 s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換 var s1 = "name:Alex age:18"; s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不區分大小寫 坑: var reg = /a/g; var s = 'alex a sb'; reg.test(s); //true reg.lastIndex; // 1 reg.test(s); //true reg.lastIndex; // 6 reg.test(s); //false reg.lastIndex = 0;從新賦值,讓其歸零
Math計算模塊
Math.abs(x) 返回數的絕對值。 exp(x) 返回 e 的指數。 floor(x) 小數部分進行直接捨去。 log(x) 返回數的天然對數（底爲e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數。 round(x) 把數四捨五入爲最接近的整數。 sin(x) 返回數的正弦。 sqrt(x) 返回數的平方根。 tan(x) 返回角的正切。
相關文章
- 1. 前端學習 之 JavaScript基礎
- 2. 前端基礎-Javascript
- 3. 前端基礎-JavaScript
- 4. 前端 -- JavaScript基礎
- 5. 前端基礎JavaScript
- 6. 前端基礎---JavaScript
- 7. 前端基礎學習
- 8. 【前端】jquery基礎學習
- 9. web前端基礎學習
- 10. 前端Vue基礎學習
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端學習 之 JavaScript基礎
- 2. 前端基礎-Javascript
- 3. 前端基礎-JavaScript
- 4. 前端 -- JavaScript基礎
- 5. 前端基礎JavaScript
- 6. 前端基礎---JavaScript
- 7. 前端基礎學習
- 8. 【前端】jquery基礎學習
- 9. web前端基礎學習
- 10. 前端Vue基礎學習