JavaScript添加变量

case具体情况,实例

default默认

break跳出循环

switch(表达式){

case n:

执行代码1

break;

case m:

执行代码2

break;

default默认:

默认执行模块

}

switch条件语句的全等型判断

default和case后面用冒号

每一个条件执行完都有一个break如果没有用就是遇到下一个继续循环.

for(初始值;条件;步长){

打印

}

while:在期间在过程中 

while(条件){

要执行的代码块

}

do ....while....循环

do{

执行语句

}while(循环的条件)

continue;结束当前循环继续向下循环

break;立即结束循环

标签名:{代码块}取标签时

2.continue 标签名 结束时

 laber:for(var i=1;i<=10;i++){

            for(var j=1;j<=10;j++){

                 console.log(`外层${i}内层${j}`);

                if(i==6&&j==4){

                break laber

             }

            }

        }

函数的作用:可以调用一段重复执行调用的代码;

用到的关键词:function

函数创建:

命名函数 :可以提前调用

function   函数声明(参数){

要执行的代码;

}

匿名函数 :不可以提前调用,会报错

var 变量名=function   函数声明(形参){

要执行的代码;

}

形参:用来存储函数调用时传进来的数据,相当于函数独有的变量

函数调用:函数或变量名

fn1()

fn2(实参)

实参:用来给函数传入具体的数值

把结果返回给调用者同时跳出执行函数

return---返回值

function fun (a,b){

return a+b

}

alert(fun1(10,20))

return返回值

1.必须写在执行的代码后面执行到return后面的代码不会执行

 2. 一个函数里面可以有多个return(多分支语句每个条件判断都有一个return)

递归

函数在运行过程中不断调用自己

从上到倒下的方法叫递归:先传递最后总结

创建:一般用var在函数外面是全局作用域

如果在函数里面会成为局部作用域

在js里的任何位置不声明直接赋值都会成为全局作用域

数组的作用:用于在单一的变量中储存多个数据,同时是一组有序数据的集合.

创建数组

let arr=[];

每个数组的索引号是从0开始编号的

数组长度

关键词:length

用法:arr.length

注意:索引号和长度数值算法不一样。

索引号:0.1.2.3.4.5

长度:1.2.3.4.5.6

语法:var obj={

属性名:属性值,

属性名:属性值,

},

多个键值对用逗号隔开.

对象-便利对象

语法:(变量名可任意取,常用k或key)

for(变量名 in 对象名){

// 对此对象属性中的每个键执行的代码

}

常用的对象:数字内置对象(Math)

时间内置对象(Date)

数组内置对象(Array)

字符串内置对象(string)

  // floor 地板 Math.floor 向小的取整(向下取整)

      var a= Math.floor(-5.6)

        console.log(a);

        // ceil 天花板 Math.ceil 向大的取整(向大的取整)

        var c= Math.ceil(4.6)

        console.log(c);

        // round 取四舍五入取整

        var d= Math.round(5.6)

        console.log(d);

创建当前时间

new    创建

Date   时间

用法: var time = new Date()

        console.log(time);

在创建时间的对象里面传入对应的参数

new Date (2023,9,20,11,12,40)

用法:

 var time = new Date(2023,4,1,12,00,00)//2023,5,1

        console.log(time);

国外是从0-11月

要展示12月转入11

setlnterval--间隔固定时间执行一次

(set设置,lnterval时间间隔)

语法:setlnterval(执行函数,间隔时间)

注意:时间设置是以毫秒单位如1秒写1000

DOM是文档模型:Document Object Model的缩写

DOM的三个基础关键词

文档(document):一个页面就是一个文档

元素Element:页面中的所有标签都是元素

节点node:网页中的所有内容的节点(标签,属性,文本,注释等)

<script>

        // html 获取根元素的方法

        var h=document.documentElement

        console.log(h);

        // 获取头部元素的方法

        var s=document.head

        console.log(s);

        // 获取身体部分元素节点的方法

        var d=document.head

        console.log(d);

    </script>

querySelector():返回指定选择器元素的第一个

querySelectorAll():返回指定选择器所有元素的对象集合(数组)

1.如果取结合的时候只想拿其中一个用索引号如果是想拿到全部就遍历

for (var i=0;i<div.length;i++){

            console.log(div[i]);

        }

基础事件

1.事件源

2.事件类型

3.事件处理函数

<button οnclick="">

        徐志摩

    </button>

    <script>

        var button=document.querySelector("button")

        // console.log(button);

        button.οnclick=function (){

            alert("再别康桥")

        }

获取页面文本和修改

innerhtml

语法:元素.innerhtml   可以获取到标签

修改:元素.innerhtml   可以识别标签替换标签

元素原生属性获取

node(元素节点).属性名

二元素原生属性设置(修改)

node(元素节点).属性名=“新的值”

行内样式

获取:元素节点style.样式名

设置:元素节点style.样式名=样式值

注意:样式名中间有划线的需要把下划线去掉改为驼峰命名

通过this可以获取绑定事件源的元素

 img[1].οnclick=function(){

            console.log(this);

            var x=img[1].src

            n.style.backgroundImage=`url(${x})`

            }

 for(var i=0;i<list.length;i++){

            list[i].οnclick=function(){

                var r=this.src

                box.style.backgroundImage=`url(${r})`

            }

        }

节点

 <script>

        var span=document.querySelector("span")

        // 关系节点获取 父节点的作用

        var par= span.parentNode

        console.log(par);

        // 2.获取子节点

        var chid= span.children

        console.log(chid);

        // next 下一个兄弟节点 nextElementSibling

       var next= span.nextElementSibling

        console.log(next);

        // previous 上一个兄弟节点 previousElementSibling

        var prev=span.previousElementSibling

        console.log(prev);

    </script>

<script>

        // 1.获取父节点

        var div=document.querySelector("div")

        //2.创建节点 两个步骤

        a.创建元素

        var span=document.createElement("span")

        console.log(span);

        span.innerHTML="新添加的span"

        // b.添加元素 appendChild(添加)

        div.appendChild(span)

        在父节点下面的指定元素前面添加一个元素

        语法父节点insertBefore(li,指定元素)

        insert插入,Before在什么之前

    </script>

节点.remove()直接把自己删除

列如img.remove

<body>

    <button>点击</button>

    <button οnclick="olickfn(this)">点击1</button>

    <button οnclick="olickfn(this)">点击2</button>

    <button οnclick="olickfn(this)">点击3</button>

    <button οnclick="olickfn(this)">点击4</button>

    <script>

        //行内this的用法的绑定事件

        //1.在行内标签的方法里面找一个叫this的进去

        //2.在js对应的方法里面不叫this的进去形参来接收

        // 3.在方法里面直接使用形参

        function olickfn(a){

            console.log(this);

        }

        var but=document.querySelector("button")

        // 事件源   事件类型  事件处理函数

        // 0级事件绑定

        but.οnclick=function(){

            alert("11")

        }

    </script>

</body>

字符串的截取

slice:提取字符串的一部分并返回新的字符串

语法:str.slice(起始,结束位置)

从第一个字符串0开始计算

可以传入负数,负数是从后面开始计算起,最后一位算起

截取的字符:包前不包后

第一个参数必须传入第二个参数可以选传(不写时默认截取到最后)

eval()将字符串转换为计算公式并得出计算结果

语法:var X=eval(str)

猜你喜欢

转载自blog.csdn.net/zhouzibo178/article/details/128896869