當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript快速上手入门
生活随笔
收集整理的這篇文章主要介紹了
JavaScript快速上手入门
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1.快速入門
- 1.1引入JavaScript
- 1.1.1內部引入
- 1.1.2.外部引入
- 1.2.基本語法入門
- 1.2.1.變量和條件判斷
- 1.2.2.瀏覽器控制臺打印變量
- 1.2.3.瀏覽器Debug調試
- 1.3.數據類型
- 1.4 嚴格檢查格模式strict
- 2.數據類型詳解
- 2.1.字符串
- 2.2.數組
- 2.3.對象
- 2.4.流程控制
- 2.5.Map和Set
- 2.6.遍歷集合
- 3.函數
- 3.1.定義函數
- 3.2.變量的作用域
- 3.3.方法
- 4.內部對象
- 4.1 Date時間類
- 4.2.JSON
- 5.面向對象編程
- 5.1.class繼承
- 6.操作BOM對象（重點）
- 6.1.window
- 6.2.screen
- 6.3.location
- 6.4.document
- 6.5.history
- 7.操作DOM對象（重點）
- 7.1.核心
- 7.2.獲得Dom節點
- 7.3.更新節點
- 7.4.刪除節點
- 7.4.插入節點
- 8.操作表單（重要）
- 9.jQuery
- 9.1.jQuery初步使用
- 9.2.選擇器
- 9.3.事件
- 9.4.操作DOM
1.快速入門
1.1引入JavaScript
1.1.1內部引入
<script>alert("hello,world");</script>1.1.2.外部引入
zxf.js
alert("hello,world");helloword.html
<script src="js/zxf.js"></script>注意！ html5對標簽極為嚴格，script標簽必須成對出現
1.2.基本語法入門
1.2.1.變量和條件判斷
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head><script>// 1.定義變量 變量類型 變量名 = 變量值var score = 71;// 2.條件控制if (score>=60){alert("及格")}else {alert("不及格")}// console.log(score) 在瀏覽器控制臺打印變量</script> <body></body> </html>1.2.2.瀏覽器控制臺打印變量
1.2.3.瀏覽器Debug調試
1.3.數據類型
number
123 //整數 123.1 //浮點數 1.123e3 //科學計數法 -80 //負數 NaN //not a number 不是一個數 Infinity //表示無限大+*字符串
'abc' ''abc''布爾值
true false邏輯運算
&& || !比較運算符
= 賦值 == 等于（類型不一樣，值一樣，也會返回true） === 絕對等于（類型一樣并且值一樣，返回true）所以在js中不用== 進行比較
注意：
- NaN這個值與所有的數值都不相等，包括本身
- 只能通過isNaN(NaN)來判斷這個數是否為NaN
浮點數問題
盡量避免使用浮點數進行比較
可以用絕對值相減小于一個無限接近于0的數來判斷是否相等
null和undefined
數組
java中數組必須存放相同類型的值，而JS不需要這樣
如果數組下表越界了就會報undenfiend
對象
取對象的值
1.4 嚴格檢查格模式strict
"use strict" 嚴格檢查模式，預防由于JavaScript的隨意性而導致的一些問題
- 必須寫在第一行
- Idea需要設置支持es6的語法
局部變量都使用let進行定義
使用之后運行直接報錯。
2.數據類型詳解
2.1.字符串
1.正常字符串使用單引號或者雙引號包裹
2.轉義字符 \
3.多行字符串編寫
tab上面的`
4.模板字符串
let name = '張筱楓'let msg = `早上好，${name}`
5.字符串長度
6.字符串的可變性，不可變
7.一些字符串的方法
2.2.數組
let var arr = [1,2,3,4,5]1.長度
注意：假如給arr.length賦值，數組大小就會發生變化，如果賦值過小，元素就會丟失
2.indexOf ，通過元素獲取下標索引
3.slice(),截取Array中的一部分，返回一個新數組。類似substring
4.push() 壓入元素，pop()彈出元素 尾部操作
5.unshift()壓入元素 shift()彈出元素 頭部操作
6.排序sort()
7.元素反轉reverse
8.concat()
注意：concat并沒有改變原有的數組，只是返回了一個新的數組
9.連接符join
打印拼接字符，使用特定的字符串連接
10.多維數組
2.3.對象
對象定義
var person ={name:"張筱楓",age:22,email:"1342486395@qq.com",score:100}js中{…}表示一個對象，屬性和屬性值通過鍵值對的形式描述，多個屬性之間用逗號隔開，最后一個屬性不加逗號
JavaScript中所有的對象的鍵都是字符串，值可以是任意對象
1.對象賦值
2.使用一個不存在的屬性，不會報錯
3.動態刪減一個屬性 delete
4.動態增加一個屬性
5.判斷屬性是否在這個對象中
6.判斷一個屬性是否是自身所擁有的
2.4.流程控制
1.if判斷
var score = 71;if (score>=60){alert("及格")}else {alert("不及格")}2.while循環
let i=0;while (i<100){i++;console.log(i);}3.for循環
for (let i = 0; i <100 ; i++) {console.log(i);}4.數組遍歷
forEach循環
for in循環
let arr = [1,561,561,56,156,1,561,56,1,561,53];for (let index in arr){console.log(arr[index])}for of 循環
for (let xin arr){console.log(x)}2.5.Map和Set
ES6新特性
1.Map
2.Set 無序不重復的集合
let set = new Set([1,2,3,3,])console.log(set)set.add(4)//添加一個元素set.delete(2)//刪除一個元素console.log(set.has(1))//判斷是否有這個元素2.6.遍歷集合
let hero = new Map([["伊澤瑞爾","射手"],["拉克絲","法師"],["佐伊","法師"]])for (let x of hero){console.log(x)}let set = new Set([1,2,3,4])for (let x of set){console.log(x)}3.函數
3.1.定義函數
定義方式一
function abs(x) {if (x>0){return x;}else {return -x;}}定義方式二
var abs = function (x) {if (x>0){return x;}else {return -x;}}
一旦執行打return代表函數結束，返回結果
如果沒有執行return，也不會報錯，返回undefined或者NaN
參數問題：JavaScript可以傳遞任意個參數，也可以不傳遞參數
參數是否存在問題
假設不存在參數，如何規避
arguments
arguments是一個數組，代表傳遞進來的所有參數
function abs(x) {console.log("x>"+x);for (let i = 0; i <arguments.length ; i++) {console.log(arguments[i])}if (x>0){return x;}else {return -x;}}rest
ES6 新特性,獲取除了已定義的參數以外的參數
function abs(x,...rest) {console.log("x>"+x);console.log(rest)if (x>0){return x;}else {return -x;}}rest參數只能寫在最后面，必須用…標識
3.2.變量的作用域
var是有作用域的
假設在函數體中聲明，則在函數外不可以使用
內部函數可以訪問外部函數的成員，反之則不行
提升變量的作用域
function zxf() {var x = "x" +y;console.log(x)var y = "y";}結果：xundefined
說明js執行引擎，自動提升了y的聲明，但是不會提升y的賦值
所以養成規范，所有變量的定義都放在函數的頭部便于代碼維護
全局函數
//全局變量x= 1;function f() {console.log(x)}console.log(x)全局對象window
var msg = "歡迎你";alert(msg);alert(window.x);window.alert(x);alert這個函數本身也是一個window變量
JavaScript實際上只有一個全局作用域，任何變量（函數也可以視為變量），假設沒有在函數作用域范圍內找到，就會向外查找，如果全局作用域都沒有找到，報錯ReferenceError
規范
由于所有變量都會綁定到window上，如果不同的js文件定義了相同的變量就會產生沖突
//唯一全局變量var FengApp={};//定義全局變量FengApp.name = "張筱楓";FengApp.add=function (a,b) {return a+b;}所以需要把自己的代碼全部放到自己定義的唯一明明空間中，降低全局變量沖突問題。
局部作用域 let
function f() {for (var i = 0; i <10 ; i++) {console.log(i)}console.log(i)//問題：這里的i仍然可以使用}ES6新特性 let關鍵字 解決局部變量沖突問題
function f() {for (let i = 0; i <10 ; i++) {console.log(i)}console.log(i)//Uncaught ReferenceError: i is not defined}定義局部變量時盡量都使用let定義
常量 const
在ES6之前，這樣定義常量：只要用大寫字母定義的就是常量，建議不要修改這樣的值
在ES6之后，引入const關鍵字定義常量
3.3.方法
方法就是把函數放到對象里面，對象只有兩個東西：屬性和方法
let person = {name: "張筱楓",birth: 1998,age:function () {let now = new Date().getFullYear();return now - this.birth;}} //調用屬性 person.name //調用方法，一定要加() person.age()將上述代碼拆開
function getAge() {let now = new Date().getFullYear();return now - this.birth;}let person = {name: "張筱楓",birth: 1998,age:getAge}
this是無法指向的，默認指向調用它的那個對象
apply
apply在js中可以控制this指向
function getAge() {let now = new Date().getFullYear();return now - this.birth;}let person = {name: "張筱楓",birth: 1998,age:getAge}getAge.apply(person,[]);4.內部對象
4.1 Date時間類
let date = new Date();//標準事件date.getFullYear();//年date.getMonth();//月date.getDate();//日date.getDay();//星期幾date.getHours();//時date.getMinutes();//分date.getSeconds();//秒date.getTime();//時間戳new Date(date.getTime());//時間戳轉為事件date.toLocaleDateString();//轉換為本地時間4.2.JSON
在JavaScript中，一切皆對象，任何js支持的類型都可以用json來表示
格式：
- 對象用{}
- 數組用[]
- 鍵值對用 key:value
5.面向對象編程
5.1.class繼承
1.定義一個類
class Student{constructor(name) {name = this.name;}hello(){alert("hello")}}let s1 = new Student("小明");s1.hello();2.繼承
class Student{constructor(name) {name = this.name;}hello(){alert("hello")}}class Student1 extends Student{constructor(name,age) {super(name);this.grade=age;}run(){alert("run..");}}let s1 = new Student("小明");let s2 = new Student1("小紅",2);s2.run();本質：查看對象原型
6.操作BOM對象（重點）
6.1.window
window代表瀏覽器窗口
window.innerHeight 754 window.outerHeight 824 window.innerWidth 507 window.outerWidth 15366.2.screen
screen代表屏幕
screen.width 1536 screen.height 8646.3.location
代表當前頁面的url信息
host: "www.baidu.com" href: "https://www.baidu.com/" protocol: "https:" reload: ? reload() //刷新網頁 //設置新的地址 location.assign("https://blog.csdn.net/qq_43601784")6.4.document
代表當前的頁面 HTML，文檔樹
document.title "百度一下，你就知道"獲取具體的文檔樹節點
<dl id="dd"><dd>1</dd><dd>2</dd><dd>3</dd></dl><script>let elementById = document.getElementById("dd");</script>
獲取cookie
6.5.history
代表瀏覽器的歷史記錄
history.back() //后退 history.forward() //前進7.操作DOM對象（重點）
7.1.核心
瀏覽器網頁就是一個Dom樹形結構。
- 更新：更新Dom節點
- 遍歷：得到Dom節點
- 刪除：刪除Dom節點
- 添加：添加Dom節點
要操作Dom節點，需要先獲得這個Dom節點
7.2.獲得Dom節點
<body><div id="father"><h1>標題</h1><p1 id="p1">1</p1><p2 class="p2">2</p2></div><script>let father = document.getElementById("father");let h1 = document.getElementsByTagName("h1");let p2 = document.getElementsByClassName("p2");let p1 = document.getElementById("p1");let children = father.children; // 獲取父節點下的所有子節點// father.firstChild;// father.lastChild;</script> </body>7.3.更新節點
<div id = "div"></div><script>let div = document.getElementById("div");</script>操作文本的值
div.innerText='123'div.innerHTML='<strong>123</strong>'操作js
div.style.color='red'div.style.fontSize='200px'div.style.padding = '2em'7.4.刪除節點
刪除節點步驟：先找到要刪除節點的父節點，再通過父節點刪除自己
<div id="father"><h1>標題</h1><p1 id="p1">1</p1><p2 class="p2">2</p2></div><script>let p1 = document.getElementById("p1");let father = p1.parentElement;father.removeChild(p1);//刪除是一個動態的過程father.removeChild(father.children[0]);</script>注意：在刪除節點時，children的節點是不斷變化的、
7.4.插入節點
追加插入節點
<p id="js">JavaScript</p><div id="list"><p id="javase">javase</p><p id="javaee">javaee</p><p id="javame">javame</p></div><script>let js = document.getElementById("js");let list = document.getElementById("list");list.appendChild(js);</script>
通過js創建一個新的標簽
insert插入
<script>let js = document.getElementById("js");//已經存在的節點let javase = document.getElementById("javase");let list = document.getElementById("list");list.insertBefore(js,javase);//insertBefore(newNode,targetNode)</script>8.操作表單（重要）
判斷輸入內容是否為空
<body> <script>let name = document.getElementById('name');function x(x) {if (x.textContent==null||x.textContent.replace(/^ +| +$/g, '') == '') {alert("不能為空")}} </script> <form action=""><span id="name_tip">用戶名</span><input onblur="x(name)" type="text" id="name"><span id="test" style="color: red"></span> </form> </body>9.jQuery
jQuery里存在大量的JavaScript函數
jQuery文檔
鏈接: https://www.runoob.com/jquery/jquery-tutorial.html
9.1.jQuery初步使用
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>${selector}.事件(function(){
})
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <body> <a href="" id="test-jQuery">點我</a> <script>$('#test-jQuery').click(function () {alert("hello,jQuery");}) </script> </body> </html>9.2.選擇器
$('.class')//類選擇器$('#id')//id選擇器$('p')//標簽選擇器9.3.事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style>#divMove{width: 500px;height: 500px;border: 1px solid red;} </style> <!--獲取當前鼠標的坐標--> <body> mouse : <span id="mouseMove"></span> 移動鼠標 <div id="divMove"></div> <script>//當網頁加載完成后，響應事件$(function () {$('#divMove').onmousemove(function (e) {$('#mouseMove').text("x:"+e.pageX + "y:"+e.pageY)})});</script> </body> </html>9.4.操作DOM
節點文本操作
$('#test-ul li[name=python]').text();//獲得值$('#test-ul li[name=python]').text("PYTHON");//設置值css操作
$('#test-ul li[name=python]').css("color","red");顯示和隱藏
$('#test-ul li[name=python]').show();//顯示$('#test-ul li[name=python]').hidden();//隱藏總結
以上是生活随笔為你收集整理的JavaScript快速上手入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java.lang.ClassNotFo
- 下一篇： Spring Security实现登录权