jslist添加元素_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 //获取长度
sort函数 jsstr3.split("&") //分割字符串，写⼊分割条件后，字符节以列表形式显⽰。
str3.substr(1)  //字符串中抽取从 start 下标开始的指定数⽬的字符
str3.substr(0,4) //字符串截取，下标从0开始，从何处开始，截取⼏位？
str3.substring(5,8) //字符串截取，从哪⾥开始，到哪⾥结束
str3.charAt(3) //返回指定位置，只去1位
对数字的操作
//MAth 可结合运算符多种搭配
console.log(Math.PI) //圆周率
console.il(1.5)) //向上取整
console.log(Math.floor(1.6)) //向下取整
console.und(1.4)) //四舍五⼊
console.log(Math.random()) //随机数0-1
console.log(Math.random()*10) //随机数0-10
console.il(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.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,"|",
)
HTML分别在什么时候使⽤ID、class、name？
ID 不可重复，多个标签情况下，可直接获取⽬标，精准定位。⽣产环境⼀般不⽤于重复
name⼀般⽤在传参的标签中。配合value使⽤。
class为CSS的获取的名称，多⽤于范围样式。
ID、name、class 他们均可被CSS，JavaScript引⽤，针对不⽤的使⽤场景，可以互相嵌套引⽤。节点导航（获取）
为根，同级别为兄弟，上级别为⽗
var ipt = ElementById("kw") //定位节点
ipt.parentNode //获取节点的⽗节点
var span = ipt.parentNode  //创建⽗节点
span.childNodes //获取奔DOM全部节点
span.firstChild //第⼀个
span.lastChild  //最后⼀个
span.previousSibling //返回当前节点的前⼀个兄弟节点，没有则返回null.
改变元素
改变元素现有属性
添加⾃定义的属性值
改变样式
创建HTML元素
var script = ateElement("script")  //创建⼀个名为"script"的标签变量
script.src="//so.exeye.run/alert"; //为标签添加属性
添加HTML元素
替换HTML标签
var ipt = ateElement("input") //新建⼀个标签
写⼊新的HTML
document.write("<h1>11111</h1>") //清空当前⽂档的内容，写⼊新的HTML
为元素添加⼀个事件
alert(1)
}
事件名可修改。
onclick //点击时触发
onchange //域的内容改变时发⽣
onmouseover //⿏标移动到某个元素之上
onmousedown //⿏标被按下
onmousemove //⿏标被移动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。