前端基本功—javascript 第四天

两个小循环

循环   for(初始化; 条件; 增量){}

while()  当       do {}  while()

while(条件)  { 语句 }

do while  至少执行一次     while 不一定

多分支语句 switch

switch  跟 if else if  else if else   几乎一样的  但是switch效率更好。

作用其实就是 : 多选1     从多个里面选1个 。

语法格式:

switch(参数)

{

case 参数1:

语句;

break;    退出的意思

case 参数2:

语句;

break;    退出的意思

........

default:  默认的

语句;

}

下拉菜单的事件  onchange

sele.onchange = function(){}

当改变的时候  事件

数组常用方法

 添加 数组

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

push 推进去   放

var arr =[1,3,5]   →  arr.push(7)  → 结果变成 :  [1,3,5,7];

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度

var arr = [1,3,5]  →  arr.unshift(0) →  结果变成 [0,1,3,5]

注意

删除数组内容

pop()  移除最后一个元素

返回值 是 返回最后一个值

var  arr = [1,3,5]   →  arr.pop()  →  结果   [1,3]

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

var  arr = [1,3,5]   →  arr.shift()  →  结果   [3,5]

连接两个数组

concat()

该方法用于连接两个或多个数组。它不会改变现有的数组,而仅仅会返回被连接数组的一个副本

join() 把数组转换为字符串

join()

作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。

语法

arrayObject.join(separator)

数组名.join(符号)

数组转换为字符串

把字符串转换为数组  split()

join   <=>   split

split() 方法用于把一个字符串分割成字符串数组

语法

stringObject.split(separator,howmany)

参数 separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

howmany 可选。该参数可指定返回的数组的最大长度

DOM (重点)

文档对象模型(DOM)  学习的重点

处理网页内容的方法和接口

浏览器对象模型(BOM)    了解一下

与浏览器交互的方法和接口

DOM 树

节点

标签   标记    元素    节点

访问节点

getElementById()   id 访问节点

getElementsByTagName()    标签访问节点

getElementsByClassName()   类名    有兼容性问题

主流浏览器支持     ie 67 8  不认识

怎么办? 我们自己封装自己的 类 。

封装自己class类

访问关系


dom 的节点操作 

新建节点   插入节点   删除节点   克隆节点 等等

创建节点

上面的意思就是 生成一个新的  li 标签

插入节点

appendChild();    添加孩子     append 添加的意思

意思:  添加孩子   放到盒子的 最后面。

insertBefore(插入的节点,参照节点)   子节点  添加孩子

写满两个参数

放到了第一个孩子的前面

如果第二个参数  为 null  则 默认这新生成的盒子放到最后面。

移除节点

removeChild()    孩子节点

克隆节点

cloneNode();

复制节点

括号里面可以跟参数  , 如果 里面是 true  深层复制, 除了复制本盒子,还复制子节点

如果为 false  浅层复制   只复制   本节点  不复制 子节点。

时间: 2025-01-14 22:42:47

前端基本功—javascript 第四天的相关文章

前端基本功—javascript 第三天

数组 array 声明数组 使用数组 使用的方法:    数组名[索引值];               函数名(); 索引号是从0开始的.   0 1 2 3 4 5 ... 数组的长度 数组名.length; 遍历数组 想到了for  遍历 数组 字符相连 + 数值相加  字符相连 所有的input  取过来的值  是  字符型. 三元运算符  三目运算符 一元:  a++  b++    +a  -a 二元:   a+b   a>=b 三元:   表达式 ? 结果1 : 结果2    等价

前端基本功—javascript 第六天

按钮不可用 button  不可以用       disabled  不可用的意思 btn.disabled = “disabled”     ||   btn.disabled = true; 灰色 注意: 因为 button是个双标签  所以要更改他的值, 使用 innerHTML 的,不是value. 关闭定时器   clearInterval(定时器名称);    定时器不再进行 定时器之  setTimeout() setInterval(fn,5000);      每隔 5秒钟,就

前端基本功—javascript 第五天

设置节点属性 获取节点属性 getAttribute(属性)      获取属性 通过这个方法,可以得到 某些元素的  某些属性 设置节点属性 setAttribute(“属性”,”值”); 比如说,我们想要把 一个 类名  改为   demo div.setAttribute(“class”,”demo”); 删除某个属性 removeAttribute(“属性”); demo.removeAttribute(“title”) 这个盒子就没有title  属性  给删掉了. 日期函数  ( D

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常

web前端入坑第四篇:你还在用 jQuery?

web前端入坑第四篇:你还在用 jQuery? 大妈都这么努力,我们有几个人回家还看书的? 先来补齐[web前端入坑系列]前三篇的连接web前端入坑系列:点击标题进入第一篇: web 前端入坑第一篇:web前端到底是什么?有前途吗第二篇: web前端入坑第二篇:web前端到底怎么学?干货资料!第三篇:web前端入坑第三篇 | 一条"不归路" - 学习路线! 再说这个话题之前,我们先来扫盲普及一下 [jquery] 到底是什么以及它火爆将近十年的重要原因. [ 重新认识 - Jquery

好程序员前端教程-javascript的面向对象

好程序员前端教程-javascript的面向对象一.什么是面向对象?1.面向对象就是把构成问题是无分解成多个对象,建立对象不是为了完成某个步骤,而是描述某个事物在这个解决问题的步骤中的行为.2.面向对象是一种思维方法.3·面向对象是一种编程方法.4·面向对象并不只针对某一种编程语言.二.面向对象和面向过程的区别和联系?1.面向过程侧重整个问题的解决步骤,着眼局部或者具体.2·面向对象侧重具体的功能,让某个对象具有这样的功能,更侧重整体.面向过程的优点:1.流程化使得编程任务明确,在开发之前基本考

web前端之JavaScript正则表达式

web前端之JavaScript正则表达式 后面有代码: \d 表示数字 \d? ?表示0个或者一个 \d+ +表示一个或者多个 \d{3} 表示三个 \d{3,5} 表示三到五个 \d{3,} 表示至少出现3次 \d* *表示0到任意个 \b 表示单词边界 \B 表示非单词边界 \bis\b 表示查找" is "的 . 表示任意字符 \ 表示转译 http:(\/\/.+\.jpg) 用()进行分组 $1 获取其内部东西 []表示或 ^表示开头 $表示结尾 g表示全局 \d{4}[/

javascript第四章总结

变量: javascript变量可以用来保存两种类型的值:基本类型和引用类型. 基本类型包括:Undefined,Null,Boolean,Number(用于所有的数值包括整数和浮点型) 和String. 这两者的特点是: 1.基本类型值在内存中占用固定大小的空间,一次被保存到栈的内存中: 2.从一个变量向里一个变量复制基本类型的值,会创建这个值的副本: 3.引用类型的值是对象,保存在堆得内存中: 4.包含引用类型的值得变量的实际上并不包含对象本身,而是一个指向该对象的指针: 5.从一个变量向另

前端之JavaScript基础

前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C-minus-minus(C-)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本