js list添加元素_JS基础与常用函数

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基础与常用函数相关推荐

数字化方法基础_常用函数
数字化方法基础_常用函数 1. 叉乘 2. 单位化矢量 3. 矩阵乘法4×4 × 4×1 4. 矩阵乘法 4×4 × 4×4 1. 叉乘 void crossproject(float vec1[3] ...
Arduino基础与常用函数
文章目录 1. Arduino语言 2. Arduino代码结构 1.类似于C的头文件包含,变量定义等 2.void setup() 3.void loop() 3.串口常用函数 1.串口收发函数 S ...
js src 变量_Js基础学习笔记（一）
Js的书写位置 1.内联写在标签的属性内行为执行只能通过行为主动触发,不方便使用 2.内部 script包裹js代码,双标签跟随页面的加载,按照顺序执行 3.外部 script的src属性引入 ...
[转载] python 语言基础 - 字符串常用函数及操作
参考链接: Python字符串| ljust rjust center python为字符串操作提供了很多常用的内建函数,让我们在操作字符串时能够更加简单方便. 下面以某个字符串为例来一一介绍一下现 ...
js进阶高级与ES6，常用函数方法
ES6与高级 2021.9.11 class类的使用类的本质就是function函数在ES6中声明类用class关键字 ES6中类没有变量提升,所以必须先定义类,才能实例化对象类里面的共有属性和 ...
JS基本语法-JavaScript中的常用函数2：判断数字类型，isNaN和isFinite的使用
简介: 使用isNaN和isFinite可以判断数字的类型. 举例: . isNaN()--检测一个值是否为NaN,隐式转为数字型,是NaN返回true,不是返回false: . isFinite() ...
Arduino编程基础与常用函数（详细）解析
Arduino编程基础关键字: if.if-else.for.switch.case.while.do-while.break.continue.return.goto. 语法符号:每条语句以&qu ...
arg是什么函数_怎么实现边听歌边搜图？线程初体验：常用函数
图控大叔构图传递思想阅读从未如此简单!!! 01 前言今天我们来认识一下线程及其常用函数.当你今天看到我在写推文时,你可能会说: 02 目录总览 2-1 什么是线程2-2 常用函数速览2-3 各 ...
数据分析之numpy基础/matplotlib绘图/numpy常用函数/杂项功能
文章目录数据分析 numpy概述 numpy`历史` numpy的核心:多维数组 numpy基础 ndarray数组内存中的ndarray对象 ndarray数组对象的特点 ndarray数组对象 ...