JS DOM编程
DOM(Document Object Model)编程是通过JavaScript对HTML中的dom节点进行操作,DOM是有规范的,DOM规范是W3C制定的。
选择HTML节点/标签
1.switch case 的效率问题
case后面是常量时,效率高于if...else
2.不要强行用switch
3.函数名的命名规则:
小-驼峰式 aaBbCc(除了第一个单词首字母小写,其余单词大写)
4.switch...case
break是可选的
for 循环**
for(let i = 0 ; i < 10 ; i++){
//循环体
}
for循环执行流程
let i = 0 ; 初始化条件 i= 0 时循环开始 只执行一次
i < 10;判断条件,会和初始化条件配合的执行
循环体 循环重复
i++ 循环条件 每次循环体执行完毕,可以让i产生变化
注意事项:
a:i 是局部变量
b:循环条件可以根据实际情况更改
c:当修改循环条件是,要确保循环可以朝着结束的方向改变
d:在开发中,尽量避免死循环
for循环的特殊写法
for(let i = 0 ; i < 10){} 死循环(不报错) 没有自增
for(let i = 0 ; ; i ++){} 死循环(不报错)没有上限
for (let i = 0 ; ; ) {} 死循环
for ( ; ; ) {} 死循环
i:index 索引下标
面试题:for循环的啊执行步骤
数组:
属性arr.length数组的长度
数组下标:从0开始
数组长度:从1开始
取出数组中最后一个元素:
console.log(arr[arr.length - 1]);
将数组中每个元素都操作一遍,数组的遍历(迭代)
练习
找出数组中的最大值
判断一个数在数组中是否存在,如果存在返回下标,如果不存在返回-1
注:当变量的作用域重叠时,不要出现重名的情况(尤其是全局变量和局部变量)
# for in 语句
for(let a in arr){}
只能进行遍历操作,不需要再利用索引
a可以理解为a时arr数组的下标通过映射给a的
# while循环 do while循环
while(条件表达式){}
true运行 false不允许
while循环的执行流程:
let a =10; 初始化条件
while(a<100){ 循环判断条件
console.log(a); 循环体
a++; 循环条件
}
while对比for
while | 对比 | for |
初始化条件不好控制 | 初始化条件都是隔离自定 | |
循环条件不好控制 | a++都是隔离的 | |
写函数时,返回值便于管理 |
练习
今年是2022年
今天我们公司有是十人,每年公司会以百分之十的比重招人
问:哪一年公司人数突破一百人
do...while循环
let a = 10;
do{
console.log(a);
a++
}while(a>100);
do...while和while的区别:
do...while先执行一次在判断条件,无论条件是否成立他都至少执行一次
while如果条件不成立,不执行
选择HTML节点/标签
给节点添加内容
InnerText -----> 在节点中添加文本内容(不能识别HTML代码)
InnerHtml ----> 在节点中添加内容(能识别HTML代码)
JS中常用事件
(1)blur失去焦点
(2)change下拉列表选中项改变,或文本框内容改变
(3)click鼠标单击
(4)dblclick鼠标双击
(5)focus获得焦点
(6)keydown键盘按下
(7)keyup键盘弹起
(8)load页面加载完毕
(9)mousedown鼠标按下
(10)mouseover鼠标经过
(11)mousemove鼠标移动
(12)mouseout鼠标离开
(13)mouseup鼠标弹起
(14)reset表单重置
(15)select文本被选定
(16)submit表单提交
JS注册事件的两种方式
(1)在标签中使用事件句柄的方式注册事件
<!-- 给表单控件按钮添加click事件 -->
<input type="button" value="提交" οnclick="fun()">
<script>
function fun(){
window.confirm("确认提交么?");
}
</script>
(2)在页面加载完毕后使用JS代码给元素绑定事件
<!-- 被选择的标签 -->
<input type="button" value="提交">
<script>
//获取这个表单控件按钮
let btnEle = document.querySelector("input");
//给这个按钮添加click事件
btnEle.onclick = function(){
window.confirm("确认提交么?");
}
函数
js内置函数:
Array 数组:
concat()链接
join() 设置分隔符连接数组为字符串 let a = arr.join(",")
arr.pop() 删除最后一个元素
sort() 排序 从小到大排序
Global
isNaN(); | 判断一个值是不是数字 |
parseFloat(); | 把一个整数变成小数 |
parseInt() ; | 把一个小数变成整数(取整) |
number(); | 把一个值转换成number类型 |
string(); | 把其他类型转换成字符串 |
String
charAt() ; | 取出指定位置的字符 |
indexOf(); | 判断指定字符是否存在,如果存在返回下标,如果不存在返回-1 |
lastIndexOf(); | 从后往前找 |
replace(); | 替换字符串 replace(‘a','b'); |
split(‘-’); | 根据横线去拆分字符串,得到数组 |
substring(1,6); | 字符串的截取 从下标为1 的位置,截取到下标为6的位置 |
Math
ceil(); | 向上取整 |
floor(); | 向下取整 |
round(); | 四舍五入 |
random(); | 随机 生成一个0-1的随机数 |
生成1-100的随机数 | Math.random()*100 + 1 |
特殊 | E = 2.71 PI = 3.14 |
Date
new Date(); | 获取系统当前时间 |
getDate(); | 返回日期的日1-31 |
getHours(); | 返回时间中的时0-23 |
getMinutes(); | 返回时间中的分 |
getSecong(); | 返回时间中的秒 |
getTime(); | 获取系统当前时间 时分秒 |
元素节点
let divs = document.getElementsByClassName('aaa');
let divs1 = document.getElementsByTagName('aaa');
let div = document.getElementById('div1');