JavaScript 学习笔记（二）

最新推荐文章于 2024-03-30 14:55:53 发布

竹溪点点

最新推荐文章于 2024-03-30 14:55:53 发布

阅读量82

点赞数 1

本文链接：https://blog.csdn.net/m0_45309627/article/details/117691535

版权

一、JavaScript语法应用方式

1、内嵌式：JavaScript直接写在标签内。

2、内部式：在body标签内用<script></script>写JavaScript。

3、外部式：单独写一个JavaScript文件，后缀名.js，再用<script></script>引入.js文件。

二、JavaScript 程序流程控制

1、分支结构：if结构、switch-case结构

if结构：

if(表达式1){ 语句1; }else if(表达式2){ 语句2; }else{ 语句n; }

switch-case结构：

switch(表达式){
case 常量表达式1：
执行代码块1;
break; //跳出
case 常量表达式2：
执行代码块2;
break;
case 常量表达式3：
执行代码块3;
break;
default:
执行代码块 n+1;
}

2、循环结构：for循环、while循环、do-while循环

循环的四要素：

循环的初始化条件
循环的初始化条件
迭代条件
循环体

for循环：

for(变量=初始值;变量<=结束值;变量=变量加步长){

循环语句；

}

while循环：

while(条件){

循环体语句；

}

do-while循环：

do{

循环语句；

}while(条件)

break与continue：

break:跳出循环

continue:终止本次循环

三、JavaScript 数组

1、数组创建

var array11 = new Array(); //空数组
var array12 = new Array(5); //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
var array14=[]; //空数组，语法糖
var array15=[1,2,3,"x","y"]; //定义并赋值2、

2、访问与修改

array12[8]="hello array12"; //赋值或修改
console.log(array12[8]); //取值
//遍历
for (var i = 0; i < array13.length; i++) {
console.log("arrayl3["+i+"]="+array13[i]);
}
//枚举
for(var i in array15){
console.log(i+"="+array15[i]); //此处的i是下标
}

3、截取：

var array51=[1,2,3,4,5,6];
var array52=[7,8,9,0,"a","b","c"];
//截取，切片
var array53=array51.slice(2); //从第3个元素开始截取到最后
console.log("被截取："+array53+"——"+array51);
var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
console.log("被截取："+array54+"——"+array51);
//合并
var array55=array51.concat(array52,["d","e"],"f","g");
console.log("合并后："+array55);

四、JavaScript 的DOM操作

1、获取dom元素的方法：

document.getElementById() 方法
document.getElementsByName() 方法
document.getElementsByTagName() 方法
document.getElementsByClassName() 方法

2、dom树：

3、dom示例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom</title>
    <style>
        #box{
            width:180px;
            height:180px;
            background-color:#a81414;
            border:1px  dashed white;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="btn">按钮</button>
    <script>
        /*dom操作：*/
        /*dom查询*/
        /*dom修改*/
        /*dom删除*/
        var btn=document.getElementById("btn");
        console.log(btn);
        btn.onclick=function(){
            /*找到id=box的元素 */
            var box=document.getElementById("box");
            /*给box元素改变背景颜色的样式 */
            box.style.backgroundcolor="blue";
            /*改变box元素的长宽样式 */
            box.style.width=400+"px";
            box.style.height=400+"px";
            /* 删除*/
            box.parentNode.removechild();
        }
    </script>
</body>
</html>

竹溪点点

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 学习笔记（二）

一、JavaScript语法应用方式1、内嵌式：JavaScript直接写在标签内。<button onclick="alert('你好 JS');">点我</button> 2、内部式：在body标签内用<script></script>写JavaScript。
复制链接

扫一扫