030_JavaScript
前端知識體系
什麼是JavaScript
JavaScript是一門世界上最流行的腳本語言。
ECMAScript能夠理解爲是JavaScript的一個標準。
最新版本es6。
可是大部分瀏覽器還只停留在支持es5代碼上。
開發環境和生產環境版本不一致。
javascript
快速入門
引入JavaScript
- 內部標籤
- 外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--內部標籤-->
<script>
// alert('hello,world');
</script>
<!--外部引入-->
<script src="js/main.js"></script>
</head>
<body>
</body>
</html>
alert('hello,world');
基本語法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1.定義變量 變量類型 變量名 = 變量值;
var num = 1;
// 2.條件控制
alert(num);
if (2>1) {
alert("true");
}
// 3.在瀏覽器控制檯打印變量
console.log(num);
</script>
</head>
<body>
</body>
</html>
數據類型
Number 數字
js不區分整數和小數css
123 // 整數 123 123.1 // 浮點數 123.1 1.231e2 // 科學計數法 123.1 -123 // 負數 -123 NaN // not a number NaN Infinity // 表示無限大 Infinity
String 字符串
'abc' "abc" "abc" "abc"
Boolean 布爾
console.log(2>1) VM520:1 true console.log(2<1) VM568:1 false
Null 對空
Undefined 未定義
Symbol 獨一無二的值
Symbol 是 ES6 引入了一種新的原始數據類型，表示獨一無二的值。
html
Array 數組
var arr = [1,2,3,4,'ab',null,true]; new Array(1,2,3,4,'ab',null,true); console.log(arr[2]);
Object 對象
var person = {
name:'zhangyq',
age:18,
tags:['java','js','web']
}
console.log(person.age);
Function 函數
嚴格檢查模式strict
/* 前提：IDEA須要設置支持ES6語法 'use strict';嚴格檢查模式，預防JavaScript的隨意性致使產生的一些問題 必須寫在JavaScript的第一行 局部變量建議都使用let去定義，如：let i = 1; */ //嚴格檢查模式strict，嚴格加成模式下，i = 1報錯 'use strict'; //全局變量 //i = 1;
數據類型
字符串
'use strict';
// 1.正常字符串使用單引號或雙引號包裹
console.log('a');
console.log("a");
// 2.注意轉義字符
console.log('a\'');
console.log("a\'");
console.log('a\nb');
console.log('\u4e2d'); // Unicode
console.log('\x41'); // Ascll
// 3.多行字符串編寫，使用反引號`
var msg = `hello
world
你好`;
console.log(msg);
// 4.模板字符串，使用反引號`和$
let name='zhangyq';
console.log(`nihao,${name}`);
數組
// 數組能夠包含任意的數據類型
var arr=[0,1,2,3,4,5];
// slice() 截取數組的一部分，返回一個新的數組
var arr1=arr.slice(3);
// push() 壓入到尾部
arr.push('a','b');
// pop() 彈出最後一個
arr.pop();
// unshift() 壓入到頭部
arr.unshift('a','b');
// shift(); 彈出第一個
arr.shift();
// sort() 排序
var arr=['B','C','A'];
arr.sort();
console.log(arr);
// reverse() 反轉
arr.reverse();
console.log(arr);
// concat() 拼接，返回新的數組，不改變原來的數組
var arr2=arr.concat([1,2,3]);
console.log(arr2);
console.log(arr);
// join() 打印拼接數組，使用特定的字符串鏈接
console.log(arr.join('-'));
// 多維數組
var arr=[[1,2],[3,4],['a','b']];
對象
var person={
name:"zhangyq",
age:18,
phone:"13299998888"
}
person.name="zhangsf";
//刪除對象屬性
delete person.name
//添加對象屬性
person.email="zhangsf@163.com"
//判斷屬性是否在這個對象中
'age' in person
//判斷方法是否在這個對象中
'toString' in person
判斷屬性或方法是不是自身擁有的
person.hasOwnProperty('age');
person.hasOwnProperty('toString');
流程控制
- if判斷
- while循環
- for循環
- forEach循環
- for...in
- for...of
//forEach循環
var arr=[1,2,2,3,4,5];
arr.forEach(function(value){
console.log(value);
});
//for...in的值是索引
for(var index in arr){
console.log(arr[index]);
}
//for...of循環的是具體的值
for(var v of arr){
console.log(v);
}
Map和Set ES6新特性
//Map
var map=new Map([['tom',100],['jack',90],['join',80]]);
var name=map.get('tom');
map.set('admin',123);
map.delete('admin');
//Set 無序不重複集合
var set=new Set([1,2,2,3,3]); // set能夠去重
set.add(4);
set.delete(1);
console.log(set.has(2)); // 是否包含某個元素
函數
定義函數
- 定義方式一
// 一旦執行到return表明函數結束，返回結果！
// 若是沒有執行return，函數執行完也會返回結果，結果就是undefined。
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
abs(-10);
- 定義方式二
// function(x){...}是匿名函數，經過abs就能夠調用函數！
var abs=function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
abs(-10);
JavaScript能夠傳任意個參數，也能夠不傳遞參數！java
var abs=function(x){
//手動拋出異常
if(typeof x !== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
- arguments表明全部的參數，是一個數組
var abs=function(x){
if(arguments.length=1){
return x;
}else if(arguments.length>1){
return arguments.length;
}
}
rest
- ES6引入的新特性，獲取除了已經定義的參數以外的全部參數
- rest參數只能寫在最後面，必須用...標識
function fun(a,b,...rest){
console.log("a->"+a);
console.log("b->"+b);
console.log(rest);
}
變量的做用域
- 函數體中聲明的變量，函數體外不可使用（非要實現的話，能夠研究下閉包）
function fun(){
var x=1;
x=x+1;
}
x=x+2; // Uncaught ReferenceError: x is not defined
- 內部函數能夠訪問外部函數的變量，反之則不行
function funA(){
var x=1;
function funB(){
var y=x+1;
}
var z=y+1; // Uncaught ReferenceError: y is not defined
}
- 全局變量：定義在函數外部
var x=1;
function f(){
console.log(x);
}
console.log(x);
- 全局對象window：默認全部的全局變量，都會自動綁定在window對象下
var x=1;
console.log("x->"+x);
console.log("window.x->"+window.x);
- JavaScript實際只有一個全局做用域，任何變量（函數也能夠視爲變量），假設沒有在函數做用範圍內找到，就會向外查找，直到全局做用域window也沒有找到，就會報錯
- 因爲全部的全局變量都會綁定在window上，若是不一樣的js文件，使用了相同的全局變量，會衝突，如何減小衝突？把本身的代碼所有放入本身定義的惟一空間名字中，下降全局命名衝突的問題
// 惟一全局變量
var main={};
//定義全局變量
main.name='zhangyq';
main.add=function(a,b){
return a+b;
}
let 局部變量聲明
function f(){
for(var i=0;i<100;i++){
console.log(i);
}
console.log(i+1); // 101 問題？i出了做用域還可使用
}
ES6 let關鍵字，解決局部做用域問題！python
function f(){
for(let i=0;i<100;i++){
console.log(i);
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}
建議使用let去定義局部做用域的變量jquery
const 常量聲明 只讀變量
const PI=3.14; // 只讀變量 console.log(PI); pi=3.15; // TypeError: Assignment to constant variable
方法
- 方法就是把函數放在對象的裏面
var qing={
name:'zhangyq',
birth:2000,
age:function(){
var now=new Date().gerFullYear();
return now-this.birth;
}
}
qing.name;
qing.age();
內部對象
Date
Json
JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式。web
var user={name:"zhangyq",age:18,sex:'男'}
//對象轉化爲json字符串
var jsonStr=JSON.stringify(user);
//對象{name: "zhangyq", age: 18, sex: "男"}
//json字符串{"name":"zhangyq","age":18,"sex":"男"}
//json字符串轉化爲對象
var obj=JSON.parse(jsonStr);
面向對象編程
原型繼承
var user={name:"zhangyq",age:18,sex:'男'}
var xiaoming={name:"xiaoming"}
//xiaoming的原型是user
xiaoming.__proto__=user
/*xiaoming
{name: "xiaoming"}
name: "xiaoming"
__proto__:
age: 18
name: "zhangyq"
sex: "男"
__proto__: Object
*/
class繼承
class關鍵字是在ES6引入的編程
//定義一個類，屬性，方法
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
var xiaoming=new Student('xiaoming');
var xiaohong=new Student('xiaohong');
//繼承
class XiaoStudent{
constructor(name,grade){
super(name);
this.grade=grade;
}
myGrade(){
alert('我是一名小學生');
}
}
操做BOM對象
- 瀏覽器介紹
- IE6~11
- Chrome
- Safari
- FireFox
- window 表明瀏覽器窗口
window.alert(1) window.innerHeight window.outerHeight
- navigator 封裝了瀏覽器的信息
- screen 表明屏幕
screen.width screen.height
- location 表明當前頁面的URL信息
location
//刷新頁面
location.reload()
//跳轉頁面
location.assign('www.baidu.com');
- document 表明當前的頁面
document.title document.title='個人頁面' //獲取cookie document.cookie
- history 表明瀏覽器歷史記錄
history.back() history.forward()
操做DOM對象
DOM 文檔對象模型
瀏覽器網頁就是一個DOM樹形結構
<div id="div1"> <h1>標題一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div>
//根據標籤名查詢
var h1Array=document.getElementsByTagName('h1');
//根據ID查詢
var p1=document.getElementById('p1');
//根據class名查詢
var p2Array=document.getElementsByClassName('p2');
var div1=document.getElementById('div1');
//獲取子節點
var childrens=div1.children;
//修改文本值
p1.innerText='123';
//修改html
p1.innerHTML='<strong>123</strong>';
//修改css樣式
p1.style.color='red';
//刪除節點，只能經過父節點刪除子節點
div1.removeChild(p1);
p1.parentElement.removeChild(p1);
div1.removeChild(div1.children[2]);
div1.removeChild(div1.children[1]);
div1.removeChild(div1.children[0]);
//追加已有標籤
div1.appendChild(p2);
//建立標籤並追加
var p4=document.createElement('p');
p4.id='p4';
p4.innerText='p4';
p4.setAttribute('class','p2');
div1.appendChild(p4);
//插入p2節點到p1前
div1.insertBefore(p2,p1);
操做表單（MD5加密密碼）
<!--MD5工具類--> <script src="https//cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> <form method="post" action="#"> <p><span><label>用戶名 </label></span><input type="text" id="username" name="username"></p> <p><span><label>密碼 </label></span><input type="password" id="password"></p> <input type="hidden" id="md5_password" name="password"> <p><button type="submit" onclick="submit()">提交</button></p> </form>
//獲取input
var input_username=document.getElementById('username');
//獲取input的值
var username=input_username.value;
//修改input的值
input_username.value='zhangyq';
function submit(){
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
console.log(username);
console.log(password);
//MD5加密密碼
md5_password=md5(password);
console.log(md5_password);
document.getElementById('md5_password').value=md5_password;
}
jQuery
jQuery庫 封裝了大量JavaScript函數
下載引用jQuery庫
<!--引用在線或本地的--> <!--在線版--> <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> <!--開發版--> <script src="js/jquery-3.5.1.js"></script> <!--生產壓縮版--> <script src="js/jquery-3.5.1.min.js"></script>
公式 $(selector).action()
<a id="a1"></a>
$('#a1').click(function(){
alert('hello');
});
jQuery與JavaScript對比
//JavaScript
document.getElementsByTagName();
document.getElementById();
document.getElementsByClassName();
//jQuery css中的選擇器所有可使用，如：層級選擇器，僞類選擇器，屬性選擇器等
$('p').click();
$('#id').click();
$('.class').click();
事件
- 鼠標事件
- 鍵盤事件
- 其餘事件
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<!--獲取鼠標當前的座標-->
mouse: <span id="mouseMove"></span>
<div id="divMove">在這裏移動鼠標</div>
<script>
//當網頁元素加載完畢後，響應事件
//$(document).ready(function(){});
//可簡化爲
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
});
});
</script>
操做DOM元素
$('#test_ul li[name=python]').text();
$('#test_ul li[name=python]').html();
$('#test_ul li[name=python]').css({"color":"#ff0011","background":"blue"});
$('#test_ul li[name=python]').css("color","#ff0011");
$('#test_ul li[name=python]').css("color");
$('#test_ul li[name=python]').hide();
$('#test_ul li[name=python]').show();
$('#test_ul li[name=python]').toggle();
$(window).width();
$(window).height();
jQuery中文文檔：https://jquery.cuishifeng.cn/
小技巧
鞏固JS 看jQuery源碼，看小遊戲源碼-源碼之家
鞏固HTML/CSS 扒網站，down下來，對應修改看效果
扒網站步驟：
- 打開網站，選擇Elements，選中代碼，按Delete刪除，不影響頁面繼續刪除，影響頁面回退，刪除下一行，直到沒有刪除的爲止。
- 右鍵選擇Copy->Copy outerHTML，複製代碼，而後將代碼粘貼到本身的HTML文件中，修改相應的html和css。
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
