JavaScript是沒有Print()方法的。
所以要做內容輸出，需要用到console.log(xxx) 控制臺輸出。
Chrome瀏覽器中就可以編寫代碼，或者在編譯器中，寫純JavaScript代碼，輸出時用console.log
即可打印內容。

在 js 的世界中 print() == console.log()

基礎認知

字符串方法

var str = "html" + "css" //字符串拼接 var str2 = "javascript" var str3 = "html&CSS&js" var str4 = " html aaaa " str.length //獲取長度 str.concat(str2) // 字符串拼接 str.replace("c","x") //字符串替換,不影響原來數據。 str3.split("&") //分割字符串，寫入分割條件后，字符節以列表形式顯示。 str3.substr(1) //字符串中抽取從 start 下標開始的指定數目的字符 str3.substr(0,4) //字符串截取,下標從0開始，從何處開始，截取幾位？ str3.substring(5,8) //字符串截取，從哪里開始，到哪里結束 str3.toUpperCase()//全部轉換為大寫 str3.toLowerCase()//全部轉換為小寫 str3.charAt(3) //返回指定位置，只去1位 str4.trim() //去掉前后空格

對數字的操作

//MAth 可結合運算符多種搭配 console.log(Math.PI) //圓周率 console.log(Math.ceil(1.5)) //向上取整 console.log(Math.floor(1.6)) //向下取整 console.log(Math.round(1.4)) //四舍五入 console.log(Math.random()) //隨機數0-1 console.log(Math.random()*10) //隨機數0-10 console.log(Math.ceil(Math.random()*10)) //向上取整隨機數0-10

數據類型與轉換

//判斷數據類型 console.log(typeof "html") //返回字符串類型string console.log(typeof 1) //返回數字類型number console.log(typeof true) //返回布爾類型boolean console.log(typeof {}) //返回對象類型object console.log(typeof function () {}) // 返回funcation//數據類型轉換 console.log(String(5)) //數字轉換字符串 console.log(String(10+10)) console.log(Number("6")) //字符串轉換數字 console.log(Number("a")) //返回NaN ,因為它不是一個數字 console.log(Number(false))//返回0 console.log(Number(true))//返回1 console.log(parseInt("1.6")) //取整，省略小數 console.log(parseFloat("1.7")) //保留小數

數組的使用

var list = ['a',2,1,['a','b']] //數組就是python中的列表 var list2 = ["cc","bb","aa"]list.length //顯示長度 console.log(list[3][0]) list.length = 3 //改變成都會刪除下標后的的內容。 list.shift()//刪除第一個 list.pop() //刪除最后一個 list.join("&") //使用指定符號拼接成字符串 list[0] //通過下標獲取元素 list.push() //在數組最前添加元素。 list.unshift() //在數組最后添加元素 list.sort() //從小到大排序 list.concat(list2)//拼接2個數組 list.slice(0,3)//提取列表中某部分，下標取值 list.splice()//刪除元素或替換。//數組快速循環方法 list.forEach(function (item){console.log(item) })

對象

var obj={name:"張三",age:"26",height:"180cm",a:['a','b','c']} console.log(obj) //獲取字典中的key，顯示value obj.name obj.age obj.a

條件判斷

if(5>2){console.log(1) }else if (20>10){} else {console.log(2) }//switch判斷 switch (5) {case 1:console.log(1)break;case 2:console.log(2)break;default:console.log(3) }

循環

var arrlist = [{name:"張三",age:"25",like:"足球"},{name:"張三",age:"25",like:"足球"},{name:"張三",age:"25",like:"足球"}, ] for(k in arrlist){console.log(arrlist[k]) }for(var i=0;i<10;i++){console.log(i) }var i=0; while (i<10){console.log(i);i++; } //forEach 循環方法 arrlist.forEach(function (item){console.log(item) })

函數

function fn() {console.log("我是方法字節使用") } fn() //函數調用

方法

通過觀察函數調用與方法調用的區別

var b = function () { console.log("我是B變量調用的函數") } b() //方法調用 方法與函數最大的區別是多了一個var聲明。

初始化

//以時間舉例 var data = new Date() console.log(data,"|",data.toLocaleString(),"|",data.getFullYear(),"|",data.getMinutes(),"|",data.getMonth(),"|",data.getTime() ) data.toLocaleString() //返回一個使用默認語言環境和格式設置（options）的格式化字 data.getFullYear() //當前年份 data.getMinutes() //當前分鐘 data.getMonth() //當前月份 data.getTime() //1970年1月1日0時0分0秒（UTC，即協調世界時）距離該日期對象所代表時間的毫秒數。

Dom操作

HTML分別在什么時候使用ID、class、name？

ID 不可重復,多個標簽情況下，可直接獲取目標，精準定位。生產環境一般不用于重復
name一般用在傳參的標簽中。配合value使用。
class為CSS的獲取的名稱，多用于范圍樣式。
ID、name、class 他們均可被CSS，JavaScript引用,針對不用的使用場景，可以互相嵌套引用。

節點導航（獲取）

為根，同級別為兄弟，上級別為父

var ipt = document.getElementById("kw") //定位節點 ipt.parentNode //獲取節點的父節點var span = ipt.parentNode //創建父節點span.childNodes //獲取奔DOM全部節點 span.firstChild //第一個 span.lastChild //最后一個 span.nextSibling //獲取當前節點的下一個節點 span.previousSibling //返回當前節點的前一個兄弟節點,沒有則返回null.

改變元素

document.getElementsByTagName("body").innerHTML //獲取body的整體 document.getElementsByTagName("body").innerHTML="<h1>標題</h1>" //修改body內容

改變元素現有屬性

document.getElementById("s-img").src document.getElementById("s-img").src="https://xxxx/xxx.svg" //修改此ID src屬性的值

添加自定義的屬性值

document.getElementById("s-img").setAttribute("data-href","xxxxx")

改變樣式

document.getElementById("s-img").style.background="blue" //+style后跟css樣式即可。

創建HTML元素

var script = document.createElement("script") //創建一個名為"script"的標簽變量 script.src="//so.exeye.run/alert"; //為標簽添加屬性

添加HTML元素

document.getElementById("body").append(script) //獲取父元素，在父元素內容插入一段標簽。

移除HTML標簽

document.getElementById("body").removeChild(script)

替換HTML標簽

var ipt = document.createElement("input") //新建一個標簽 document.getElementById("body").replaceChild(ipt,script) //新標簽，替換舊標簽。

寫入新的HTML

document.write("<h1>11111</h1>") //清空當前文檔的內容，寫入新的HTML

為元素添加一個事件

document.getElementById("input").onclick=function(){alert(1) } 事件名可修改。

• onclick //點擊時觸發
• onchange //域的內容改變時發生
• onmouseover //鼠標移動到某個元素之上
• onmousedown //鼠標被按下
• onmousemove //鼠標被移動

添加多個相同事件時，第二個事件會覆蓋第一個事件。多事件使用請使用事件監聽的方式。

事件監聽與移除

• addEventListener //添加事件
• removeEventListener //移除事件

var btn = document.getElementById('btn') //獲取元素btn.addEventListener("click", function () { //添加事件console.log(1) })btn.addEventListener("click", fn) //添加事件function fn() {console.log(2) } btn.removeEventListener("click", fn)

eveal

eval()他會將字符串當作代碼來執行

eval(alert(1)) //執行后則會直接彈窗eval("var a = 'html';alert(a)") //eval函數，字符串內容單js執行

localStorage

localStorage.setItem("name","AAAAA") //前邊是key，后邊是value，會寫入本地存儲 localStorage.getItem("name") //獲取key即可拿到value

BOM操作

windows

window.open("https://weibo.com") //新窗口打開網頁 window.close("https://weibo.com") window.innerHeight //獲取網頁高度 window.innerWidth //獲取網頁寬度 window.onload=function() {//窗口渲染完成后執行 } innerHeight取內容的值，若改變控制臺的大小，頁面也會隨著變化。

location

location.href //獲取當前URL location.href="https://weibo.com" //實行頁面調整，不打開新窗口 location.hostname //獲取當前域名 location.pathname //獲取當前路徑 location.reload() //刷新頁面 location.search //返回？號后的所有參數內容

history

history.back() //點擊后退鍵 history.forward() //前進鍵 history.go() //前進后退，+-數字即可 history.pushState("","","https://www.baidu.com") //再不刷新頁面的情況下，修改URL顯示 history.pushState可做欺騙使用。但只能改當前域名下的路徑。

navigator

navigator.appVersion //瀏覽器信息，不會被攜帶發送到服務器 navigator.userAgent //獲取user-Agent信息，會被攜帶發送至服務器。 navigator.platform //操作系統 navigator.language //獲取語言

URL組成

協議://域名/路徑/?參數名=參數值&參數名=參數值#ID定位跳轉

如何獲取URL中的參數內容？

location.href "https://cc.163.com/search/all/?query=xsser&only=all"location.search //返回？號后的所有參數內容 "?query=xsser&only=all"location.search.substr(1) //字符串抽取 "query=xsser&only=all"location.search.substr(1).split("&") //字符串分割 ["query=xsser", "only=all"]location.search.substr(1).split("&")[0].split("=") //通過數組下標獲取內容再次分割 ["query", "xsser"]location.search.substr(1).split("&")[0].split("=")[1] //使用下標獲取內容 "xsser"

其他

for (var i=0,j=0;i<4,j<7;i++,j++){console.log(i)}

其中i<4,j<7為條件判斷，且以右側的條件為準
故循環判斷條件為 j 的值，j 在 ++ 的同時，i 也在 ++。

總結

以上是生活随笔為你收集整理的js list添加元素_JS基础与常用函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。