javascript
JavaScript快速入门
JavaScript快速入門
1.快速入門
1.1引入JavaScript
1.內部標簽
<script>//... </script>2.外部引入
qj.js
alert('hello,world');引入
<script src="js/qj.js"> </script>測試
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--script標簽內寫js代碼--> <!-- <script>alert('hello,world');</script>--><!--外部引入--><!--script必須成對標簽--><!--javascript不用顯示定義type,默認就是javascript--><script src="js/qj.js"></script> </head> <body></body> </html>2.基本語法入門
<!--JavaScript嚴格區分大小寫--> <script>//1.定義變量 var 變量名 =變量值var score=88;var name='張三';console.log(name);//控制臺輸出//2.條件控制if(score>60 && score<70){alert("60~70");}else if(score>70 && score<80){alert("70~80");}else {alert("other");}/*** 多行注釋*/ </script>3.數據類型
數值,文本,圖形,音頻,視頻。。。
變量
var _$ =值number
js不區分小數和整數,Number
123//整數 123.1//浮點數 1.123e3//科學計數法 -99//負數 NaN//not a number Infinity//無限大字符串
‘abc’ “abc”
‘\n’
布爾值
true , false
邏輯運算
&& 兩個都為真結果為真
|| 一個為真結果為真
!取反
比較運算符
=賦值
==等于(類型不一樣,值一樣,,會判斷為true)
===絕對等于(類型一樣值一樣,結果為true)
注意:NaN===NaN,這個與所有的數值都不相等,包括自己,只能通過isNaN判斷
浮點數問題
<script>console.log((1/3)===(1-2/3)); </script>盡量避免使用浮點數進行運算,存在精度問題
console.log(Math.abs(1/3-(1-2/3))<0.000000000001);null和undefined
- null空
- undefined未定義
數組
Java的數組必須是相同類型的對象,js不需要
//保證代碼的可讀性,盡量使用[] var arr=[1,,2,3,4,5,'hello',null,true]; new Array(1,2,3,4,5,'hello',null,true);取數組下標越界,就會報undefine
對象
數組是中括號,對象是大括號
每個屬性需要逗號隔開,最后一個不需要
var person={name: "qinjiang",age: 3,tags: ['js','java','web','...'] }取對象的值
person.name4.嚴格檢查模式
'use strict';//嚴格檢查模式,預防JavaScript的隨意性導致產生的一些問題 //局部變量建議使用let定義 //全局變量 var i=1; //ES6 let let a=2;'use strict’必須寫在JavaScript的第一行
5.數據類型
5.1字符串
1.正常字符串使用單引號,或者雙引號包裹
2.注意轉義字符\
\' \n \r \u4e2d Unicode字符 "\x41" Ascll3.多行字符串
var msg=` hello world `4.模板字符串
let name="zhangsan"; let age=3; let msg=`你好啊,${name}`;5.字符串長度
console.log(str.length)6.字符串的可變性,不可變
7.大小寫轉換
msg.toLocaleUpperCase(); msg.toLocaleLowerCase();8.msg.indexOf();獲取指定下標
9.msg.substring(1);從到一個截取到最后
msg.substring(1,2);//[1,2)5.2數組
Array可以包含任意的數據類型
var arr=[1,2,3,4,5,6];1.長度
arr.length;注意:假如給arr.length賦值,數組大小就會發生變化,如果賦值過小,元素就會丟失
2.indexof
arr.indexOf();字符串的“1”和數字1是不同的
3.slice()截取Array的一部分,返回一個新數組
arr.slice(1,3);[1,3)4.push(),pop()
push壓入到尾部pop彈出尾部的一個元素5.unshift(),shift()頭部
unshift:壓入頭部 shift:彈出頭部的一個元素6.排序
arr.sort()7.元素反轉
arr.reverse()8.concat()數組拼接
arr.concat(1,2,3)//并沒有修改數組,只是返回一個新數組9.連接符join()
打印拼接數組,使用特定字符串連接
arr.join('-');10.多維數組
arr[[12],[3]]; arr[1,1];數組:存儲數據(如何存,如何取,方法可以自己實現)
5.3對象
若干個鍵值對
let 對象名={屬性名: 屬性值,屬性名: 屬性值,屬性名: 屬性值 };let person={name: "wushuang",age: 3,sex: 1,score: 99 };Js中對象,{…}表示一個對象。鍵值對描述屬性xxx: xxx,多個屬性之間使用逗號隔開,最后一個屬性不加逗號
JavaScript中所有的鍵都是字符串,值是任意對象
1.對象賦值
person.name="wushaung" 'wushaung'2.使用一個不存在的對象屬性,不會報錯
undefined
3.動態的刪減屬性,通過delete刪除對象的屬性
delete person.name true person {age: 3, sex: 1, score: 99}4.動態的添加,直接給新的屬性添加值即可
person.a="aa"5.判斷屬性值是否在這個對象中 xxx in xxx
'age' in person true 'toString' in person true繼承的父類的方法也可以找到
6.判斷一個屬性是否是這個對象自身的
person.hasOwnProperty('age') true person.hasOwnProperty('toString') false5.4流程控制
if判斷
var age=3; if(age>3){alert("hh"); }else {alert("ww"); }while循環,避免死循環
var age=3;while (age<100){age +=1;console.log(age); }do{age +=1;console.log(age); }while(age<100)for循環
var age=3;for (let i = 0; i < 100; i++) {console.log(i); }forEach循環 5.1
var age=[1,2,3,4,5,6,7,8]; //函數 age.forEach(function (value) {console.log(value) })for in
var age=[1,2,3,4,5,6,7,8]; for(var num in age){console.log(age[num]) }出的是索引
5.5Map和Set
Map:
//學生的成績,學生的名字 var map=new Map([['tom',100],['jack',90],['haha',80]]); var name=map.get('tom'); //通過key獲取value map.set('admin',123456);//新增或者修改 console.log(name); map.delete //刪除一個元素Set:無序不重復
var set=new Set([3,1,1,1,1,1]);//set可以去重 set.add(2); //添加 set.delete(1);//刪除 console.log(set.has(3));//是否包含某個元素5.6iterator es6
通過for…of獲取值
for…in獲取下標
var arr=[3,4,5]; for (var x of arr){console.log(x); }遍歷map
var map=new Map([['tom',100],['jack',90],['haha',80]]); for(let x of map){console.log(x) }遍歷set
var set=new Set([1,2,3,4,5,6,7]); for(let x of set){console.log(x) }6.函數
6.1,定義函數
定義方式一
絕對值函數
function abs(x){if(x>=0){return x;}else{return -x;} }一旦執行到return,代表函數結束,返回結果
如果沒有執行return,函數執行完也會返回結果,結果就是undefined
定義方式二
var abs=function(x){if(x>=0){return x;}else{return -x;} }調用函數
abs(10) abs(-10)參數問題:JavaScript可以傳任意個參數,也可以不傳遞參數
參數進來是否存在的問題:假設不存在參數,先判斷
function abs(x){if(typeof x!='number'){throw 'not a number';//手動拋出異常來判斷}if(x>=0){return x;}else{return -x;} }arguments
arguments是一個JS免費贈送的關鍵字
多個參數時,可以通過arguments遍歷出來
代表傳遞進來的所有參數,是一個數組,可以拿到隱藏的參數
function abs(x){if(arguments.length>1){console.log(arguments[1]);}if(typeof x!='number'){throw 'not a number';}if(x>=0){return x;}else{return -x;} }問題:arguments會包含所有的參數,有時候只想使用除當前參數來進行操作,需要排除當前已有的參數。
rest
獲取除了已經定義的參數之外的所有參數…
以前:
function aaa(a, b) {console.log("a=>"+a);console.log("b=>"+b);if(arguments.length>2){for (let i=2;i<arguments.length;i++){console.log(arguments[i]);}} }現在:
function aaa(a, b,...rest) {console.log("a=>"+a);console.log("b=>"+b);console.log(rest); }rest參數只能寫在最后,必須用…標識
6.2,變量的作用域
JavaScript中,var定義變量實際是有作用域的
假設在函數體中聲明,則在函數體外不可使用~(閉包)
function qj() {var x=1;x=x+1; } x=x+1;//Uncaught ReferenceError: x is not defined如果兩個函數使用相同的變量名,只要在函數內部,就不影響
function qj() {var x=1;x=x+1;} function qj2() {var x=1;x=x+1; }內部函數可以訪問外部函數的成員,外部不能訪問內部
function qj() {var x=1;x=x+1;function qj2() {var y=x+1; //2}var z=y+1; //Uncaught ReferenceError: y is not defined }內外函數變量同名,由內向外查找,假設外部存在,同名的函數變量,內部函數會屏蔽外部函數的變量
function qj() {var x=1;x=x+1;function qj2() {var x='a'; //2console.log('inner'+x);}qj2();console.log('outer'+x); }提升變量的作用域
// 'use strict'function qj() {var x='x'+y;console.log(x);var y='y'; }結果:xundefined
說明:Js執行引擎,自動提升y的聲明,但是不會提升變量y的賦值
定義變量先聲明再賦值,所有的變量都放在頭部,不用亂放,便于維護
var x,y,z,h;全局函數
'user strict' //全局變量 var x=4; function f() {console.log(x); } f(); console.log(x);全局對象windows
var x='xxx'; alert(x); alert(window.x);//默認所有的全局變量,都會自動綁定在window對象中alter()這個函數,本身也是window的一個變量
// 'user strict' var x='xxx'; alert(x); alert(window.x);//默認所有的全局變量,都會自動綁定在window對象中 var old_alter= window.alert; //old_alter(x); window.alert=function () {}; //發現alter()失效 window.alert(123);//恢復 window.alert=old_alter; window.alert(456);JavaScript實際上只有一個全局作用域,任何變量(函數也可以視為變量),假設沒有在函數范圍內找到,就會向外查找,如果沒有在全局作用域中找到,就會報錯ReferenceError
規范:
由于所有的全局變量都會綁定到window上,如果不同的js文件,使用了相同的全局變量,減少沖突
//唯一全局變量 var WuShuang={}; //定義全局變量 WuShuang.name='無雙'; WuShuang.add=function (a,b) {return a+b; }把自己的代碼全部放到自己定義的唯一空間命名中,降低全局命名沖突的問題
局部作用域
function aaa() {for (var i = 0; i < 100; i++) {console.log(i);}console.log(i+1);//i 出了作用域還能用 }使用let關鍵字,解決局部作用域沖突
function aaa() {for (let i = 0; i < 100; i++) {console.log(i);}console.log(i+1);//i 出了作用域還能用 }建議使用let
常量const
在ES6,只有用全部大寫命名的就是常量,建議不要修改
var PI='3.14'; console.log(PI); PI='222'; console.log(PI);發現可以改變這個值
const PI='3.14';//只讀變量 console.log(PI); PI='222';//直接報錯6.3,方法
定義方法:方法就是把函數放到對象的里邊,對象只有兩個東西,屬性和方法
var wushuang={name: '無雙',birth: 2001,age: function () {//今年-出生var now=new Date().getFullYear();return now-this.birth;} } //屬性 wushuang.name //方法,一定帶() wushuang.age()this.始終指向調用它的人
拆開上代碼
function getAge() {//今年-出生var now=new Date().getFullYear();return now-this.birth; } var wushuang={name: '無雙',birth: 2001,age: getAge() }this是無法指向的,默認指向調用它的對象
apply
在js中控制this指向的對象
function getAge() {//今年-出生var now=new Date().getFullYear();return now-this.birth; } var wushuang={name: '無雙',birth: 2001,age: getAge }; getAge.apply(wushuang,[]);//this指向了wushuang,參數為空7.內部對象
標準對象
typeof 123 'number' typeof true 'boolean' typeof NaN 'number' typeof [] 'object' typeof {} 'object' typeof Math.abs 'function' typeof aa 'undefined'7.1,Date
基本使用
var now =new Date(); //Wed Jun 22 2022 14:18:38 GMT+0800 (中國標準時間) now.getFullYear();//年 now.getMonth();//月 now.getDate();//日 now.getDay();//星期幾 now.getHours();//時 now.getMinutes();//分 now.getMinutes();//秒now.getTime();//時間戳 1970 1.1 0:00::轉換
new Date(1655878718669);//時間戳轉換為時間now.toLocaleString()//獲取本地時間,注意調用的是方法,不是屬性 '2022/6/22 14:18:38'7.2,Json
在JavaScript一切皆為對象,任何js支持的類型都可以用JSON來表示:
格式:
- 對象都用{}
- 數字都用[]
- 所有的鍵值對 都是用key:value
JSON字符串和JS對象的轉化
var user={name: "無雙",age: 3,sex: '男' } //對象轉換為JSON字符串 var jso_user=JSON.stringify(user); //json字符串轉換為對象 var obj=JSON.parse('{"name":"無雙","age":3,"sex":"男"}');JSON和JS對象區別
var obj={a : 'b',b : 'hellob'}; var json='{"a":"hello","b":"hellob"}'7.3,Ajax
- 原生的js xhr異步請求
- JQuery $(#nname).ajax(“”)
- axios請求
8.面向對象編程
原型:父類
var user={name: "無雙",age: 3,run: function () {console.log(this.name+"run....");} } var xiaoming={name: "小明" } //原型對象 var Bird={fly: function () {console.log(this.name+"fly....");} } // 小明的原型是user xiaoming.__proto__= Bird;class繼承
function Student(name) {this.name=name; } //給 student 新增方法 Student.prototype.hello=function () {alert('hello'); } //ES6之后 // 定義一個學生的類 class Student{constructor(name){this.name=name;}hello(){alert('hello');} } xiaoming.name '小明' xiaoming.hello()繼承
// 定義一個學生的類 class Student{constructor(name){this.name=name;}hello(){alert('hello');} } class pupil extends Student{constructor(name,grade){super(name);this.grade=grade;}myGrade(){alert('我是一名小學生');} } var xiaoming=new Student("小明"); var xiaohong=new pupil("張三",2);本質還是原型
原型鏈
__ proto __
9.操作BOM對象
JavaScript和瀏覽器的關系
JavaScript誕生就是未來讓他在瀏覽器中運行
BOM:瀏覽器對象模型
window
window代表瀏覽器窗口
window.alert(1) undefined window.innerHeight 406 window.innerWidth 1396 window.outerWidth 1536 window.outerHeight 816navigator
navigator封裝了瀏覽器信息
navigator.appName 'Netscape' navigator.appVersion '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36' navigator.platform 'Win32'大多時候,不使用navigator對象,因為會被人為修改
不建議使用這些屬性來判斷和編寫代碼
screen
代表屏幕的尺寸
screen.width 1536px screen.height 864pxlocation
location代表當前的URL信息
host: "localhost:63342" hostname: "localhost" href: "http://localhost:63342/JavaScript/lesson02/class%E7%BB%A7%E6%89%BF.html?_ijt=4hdtbo9kftmj9u5hg2l3t8lrki" port: "63342" protocol: "http:"location.reload()//刷新網頁 location.assign('https://www.bilibili.com/')//設置新地址document
document代表當前頁面,HTML DOM文檔樹
獲取具體的 文檔樹節點
<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd> </dl><script>var dl=document.getElementById('app'); </script>可以獲取客服端的cookie
document.cookie劫持cookie
服務端可以設置cookie為httpOnly
history
代表瀏覽器的歷史記錄
history.back()//后退 history.forward()//前進10.操作DOM對象
DOM:文檔對象模型
核心
瀏覽器網頁就是一個Dom樹形結構
- 更新:更新Dom節點
- 遍歷dom節點:得到dom節點
- 刪除一個節點
- 添加一個新的節點
要操作一個Dom節點,就必須要先獲得這個Dom節點
//對應css選擇器 var h1=document.getElementsByTagName('h1');//標簽選擇器 var p1=document.getElementById('p1'); var p2=document.getElementsByClassName('p2'); var father=document.getElementById('father'); var children=father.children//獲取父節點下的所有節點 // father.firstChild; // father.lastChild;原生代碼,之后盡量使用jquery
更新節點
- id1.innerText=‘123’ 修改文本值
- id1.innerHTML=‘123’ 可以解析html標簽
操作css
- id1.style.color=‘red’ 操作css樣式 使用駝峰命名
刪除節點
刪除節點步驟,先獲取父節點,再刪除自己
father.removeChild(p1) //刪除是一個動態的過程 father.removeChild(father.children[0])可以直接通過父節點刪除子節點,也可以通過子節點得到父節點,刪除多個節點的時候,children是在時刻變化的
插入節點
我們獲得某個Dom節點,假設這個dom節點是空的,我們通過innerHTML就可以增加一個元素了,但是這個DOM節點已經存在元素了就不能使用了,因為會發生覆蓋
追加
<p id="js">JavaScrpt</p> <div id="list"><p id="JavaEE">JavaEE</p><p id="JavaSE">JavaSE</p><p id="JavaME">JavaME</p> </div> <script>let js = document.getElementById('js');let list = document.getElementById('list');list.append(js);//追加到最后 </script>創建新節點
<script>let js = document.getElementById('js');let list = document.getElementById('list');let newp = document.createElement('p');newp.id='newp';newp.innerText='hello,world';list.append('newp');//創建一個標簽節點,通過這個標簽可以設任意值let myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');</script>插入一個節點
<script>let js = document.getElementById('js');let list = document.getElementById('list');let newp = document.createElement('p');newp.id='newp';newp.innerText='hello,world';list.append('newp');//創建一個標簽節點let myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');// var body=document.getElementsByTagName('body');// body[0].setAttribute('style','background-color:red');let mystyle = document.createElement('style');mystyle.setAttribute('type','text/css');mystyle.innerText='body{ background-color: green;}';let head = document.getElementsByTagName('head');head[0].appendChild(mystyle);</script>insert
<script>let se = document.getElementById('JavaSE');let js = document.getElementById('js');let list = document.getElementById('list');list.insertBefore(js,se);//新節點,插入位置節點 </script>11.操作表單
獲取表單信息
<script>var text_input=document.getElementById('username');var boy_redio=document.getElementById('boy');var girl_redio=document.getElementById('girl');//得到輸入框的值text_input.value;//修改輸入框的值text_input.value='222';//對于單選框,多選框等,固定的值,xxx.value只能獲得當前的值boy_redio.checked;//查看結束是否是true 如果為true則被選中</script>MD5加密
<!--表單綁定 使用return 進行校驗判斷--> <form action="#" method="post" onsubmit="return aaa()"><table><tr><td>用戶名:</td><td><input type="text" id="username" name="username"></td></tr><tr><td>密碼:</td><td><input type="password" id="password" ></td></tr><tr><td><input type="hidden" id="md5_password" name="password"></td></tr><tr><td><button type="submit" >登錄</button></td></tr></table><script>function aaa() {let uname = document.getElementById('username');let pwd = document.getElementById('password');let md5pwd = document.getElementById('md5_password');md5pwd.value=md5(pwd.value);return true;}</script> </form>使用隱藏域,不會出現顯示密碼變長
12.jQuery
jQuer庫,里面有大量的javascript
獲取jQuery
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body></body> </html>使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>--><script src="lib/jquery-3.6.0.js"></script> </head> <body> <!--公式:$(選擇器).action()--><a href="" id="test-jquery">點我</a><script>//css選擇器$('#test-jquery').click(function () {alert('hello,jQuery');}) </script> </body> </html>選擇器
//原生js,選擇器少 //標簽選擇器 document.getElementsByTagName(); //id document.getElementById(); //類 document.getElementsByClassName();//jQuery css 中的選擇器 它全部能用 $('p').click()//標簽 $('#id1').click()//id $('.class2').click()//class文檔工具站:https://jquery.cuishifeng.cn/
事件
鼠標事件,鍵盤事件,其他事件
鼠標事件:
-
mousedown事件:鼠標按下觸發
-
mouseup事件:松開鼠標時觸發
-
mouseover事件:點擊結束觸發
-
mousemove事件:鼠標移動觸發
-
mouseenter事件:光標進入元素上時觸發。
-
mouseleaver事件:用戶的光標離開元素時觸發。
鍵盤事件
1.keydown()事件
當按鈕被按下時,發生 keydown 事件。
2.keypress()事件
keypress 當按鈕被按下時,會發生該事件,我們可以理解為按下并抬起同一個按鍵。
3.keyup事件
keyup 事件會在按鍵釋放時觸發,也就是你按下鍵盤起來后的事件
操作DOM
$('#test-ul li[name="python"]').text();//獲取值 $('#test-ul li[name="python"]').text('sss');//設置值$('#test-ul').html();//獲得值$('#test-ul').html('<strong>123</strong>');//操作值css的操作
3.6版本是:
如果低版本是,隔開
$('#test-ul li[name="python"]').css({"color":"red"});元素顯示和隱藏
$('#test-ul li[name="python"]').hide();//show()顯示 hide()隱藏 $('#test-ul li[name="python"]').toggle();//顯示與隱藏 交換總結
以上是生活随笔為你收集整理的JavaScript快速入门的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 怀化学院计算机科学专业排名,2019怀化
- 下一篇: 查看计算机桌面隐藏文件夹,电脑怎么查看隐