前端基础之JavaScript
JS代码可以直接在浏览器的控制台执行,获取相关信息
<html> <head> <title></title> </head> <body> <script> JS语句可以直接写在此标签内,也可引入 </script> </body> </html>
JavaScript严格区分大小写
变量的定义:var 变量名 = "值"
网页弹窗:alert("内容")
控制台输出:console.log()
转义字符:字符前加\ \t \n
模板字符串:${变量名}
字符串长度:.length方法
字符下标:.indexOf()方法
判断语句:
<script> if(){ 代码块 } else{ 代码块 } </script> 结果为布尔值
符号:
=:赋值
==:值相等,类型可以不一样
===:值和类型都相同
&&:且
||:或
!:取反
数组:[1,2,3]
删除数组末尾元素:.pop()
获取下标:.indexOf()
在末尾加入元素:.push()
在头部加入元素:.unshift()
删除头部元素:.shift()
排序:.sort(正序) .reverse(反序)
拼接数组后返回新数组:.concat()
使用特定符号打印拼接数组:.join("@")
函数:
function 名称(){ 代码块 } 或 var 名称 = function(形参){ 代码块 } 调用:名称(实参)
循环:
while():当循环
for(var i;i<10;i++){} for循环
对象:
var 对象名 ={ 属性名:属性值, name:"abc", //不限制属性值类型 age:function(){代码块} //函数放在对象内为方法 } 调用:对象名.属性名 修改:对象名.属性名 = "" 删除:delete 对象名.属性名 添加:对象名.新属性名="" 判断存在性:"值" in 对象名
面向对象编程
操作BOM对象:
location:当前URL信息
主机域名location.host: 主机网址location.href: 主机协议:location.protocol: 设置新地址:location.assign("") //常用
操作DOM对象:
document:表示当前页面,HTML DOM文档树
document.title:获取title history.back():历史记录回退 history.froward():历史记录前进
获取DOM节点
例:操作如下JS的内容 <h1>标题</h1> <p id = "p1">p1</p> <p class = "p2">p2</p> 方法步骤: var h1 = document.getElementsByTagName("h1")[0];//获取标签,返回数组类型 var p1 = document.getElementById("p1");//获取ID块 var p2 = document.getElementsByClassName("p2")[0];//获取类块,返回数组类型 修改元素内容 document.getElementsByTagName("h1").innerHTML="123" ;//变更内容 document.getElementById("p1").innerHTML="<h1>标签</h1>"; //写入JS代码 document.getElementsByClassName("p2")[1].innerHTML="<p style='color:red'>123</p>";//写入 拓展: .style.color="red" //变更颜色 .style.fontsize="40px" //变更大小 删除DOM节点: 先获取父节点,再删除自己 document.getElementById("father").removeChild(p1)