欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript操作

程序员文章站 2022-07-02 15:55:12
JS基础操作 一、分支结构 1、if语句 if 基础语法 if 复杂语法 if 嵌套 2、switch语句 二、循环结构 1、for循环 2、while循环 3、do...while循环 4、for...in循环 5、for...of循环 6、break,continue关键词 break:结束本层 ......

js基础操作

一、分支结构

1、if语句

  • if 基础语法
if (条件表达式) {
    代码块;
}
// 当条件表达式结果为true,会执行代码块;反之不执行
// 条件表达式可以为普通表达式
// 0、undefined、null、""、nan为假,其他均为真
  • if 复杂语法
// 1.双分支
if (表达式1) {
    代码块1;
} else {
    代码块2;
}

// 2.多分支
if (表达式1) {
    
} else if (表达式2) {
    
} 
...
else if (表达式2) {
    
} else {
    
}
  • if 嵌套
if (表达式1) {
    if (表达式2) {
        
    }...
}...

2、switch语句

switch (表达式) {
    case 值1: 代码块1; break;
    case 值2: 代码块2; break;
    default: 代码块3;
}
// 1.表达式可以为 整数表达式 或 字符串表达式
// 2.值可以为 整数 或 字符串
// 3.break可以省略
// 4.default为默认代码块,需要出现在所有case最下方,在所有case均未被匹配时执行

二、循环结构

1、for循环

for (循环变量①; 条件表达式②; 循环变量增量③) {
    代码块④;
}
// 1.循环变量可以在外、在内声明
// 2.执行逻辑 ① ②④③ ... ②④③ ②,入口为①,出口为②,②④③个数为[0, n]

2、while循环

while (条件表达式) {
    代码块;
}

3、do...while循环

do {
    代码块;
} while (条件表达式);

4、for...in循环

obj = {"name": "zero", "age": 8}
for (k in obj) {
    console.log(k, obj[k])
}
// 用于遍历对象:遍历的结果为key,通过[]语法访问对应的value

5、for...of循环

iter = ['a', 'b', 'c'];
for (i of iter) {
    console.log(iter[i])
}
// 1.用于遍历可迭代对象:遍历结果为index,通过[]语法访问对应的value
// 2.es6新增,可迭代对象有 字符串、数组、map、set、anguments、nodelist等

6、break,continue关键词

  • break:结束本层循环
  • continue:结束本次循环进入下一次循环

三、异常处理

try {
    易错代码块;
} catch (err) {
    异常处理代码块;
} finally {
    必须逻辑代码块;
}
// 1.err为存储错误信息的变量
// 2.finally分支在异常出现与否都会被执行
throw "自定义异常"
// 必要的时候抛出自定义异常,要结合对应的try...catch使用

四、函数初级

1、函数的定义

  • es5
function 函数名 (参数列表) {
    函数体;
}

var 函数名 = function (参数列表) {
    函数体;
}
  • es6
let 函数名 = (参数列表) => {
    函数体;
}
  • 匿名函数
(function (参数列表) {
    函数体;
})

// 匿名函数需要自调用
(function (参数列表) {
    函数体;
})(参数列表);

2、函数的调用

  • 函数名(参数列表)

3、函数的参数

  • 个数不需要统一
function fn (a, b, c) {
    console.log(a, b, c)  // 100 undefined undefined
}
fn(100)

function fn (a) {
    console.log(a)  // 100
}
fn(100, 200, 300)  // 200,300被丢弃
  • 可以任意位置具有默认值
function fn (a, b=20, c, d=40) {
    console.log(a, b, c, d)  // 100 200 300 40
}
fn(100, 200, 300)
  • 通过...语法接收多个值
function fn (a, ...b) {
    console.log(a, b)  // 100 [200 300]
}
fn(100, 200, 300)
// ...变量必须出现在参数列表最后

4、返回值

function fn () {
    return 返回值;
}
// 1.可以空return操作,用来结束函数
// 2.返回值可以为任意js类型数据
// 3.函数最多只能拥有一个返回值

五、事件初级

  • onload:页面加载完毕事件,只附属于window对象
  • onclick:鼠标点击时间
  • onmouseover:鼠标悬浮事件
  • onmouseout:鼠标移开事件
  • onfocus:表单元素获取焦点
  • onblur:表单元素失去焦点

六、js选择器

1、getelement系列

// 1.通过id名获取唯一满足条件的页面元素
document.getelementbyid('id名');
// 该方法只能由document调用

// 2、通过class名获取所有满足条件的页面元素
document.getelementsbyclassname('class名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为htmlcollection (一个类数组结果的对象,使用方式同数组)
// 没有匹配到任何结果返回空htmlcollection对象 ([])

// 3.通过tag名获取所有满足条件的页面元素
document.getelementsbytagname('tag名');
// 该方法可以由document及任意页面元素对象调用
// 返回值为htmlcollection (一个类数组结果的对象,使用方式同数组)
// 没有匹配到任何结果返回空htmlcollection对象 ([])

2、queryselect系列

// 1.获取第一个匹配到的页面元素
document.queryselector('css语法选择器');
// 该方法可以由document及任意页面对象调用

// 2.获取所有匹配到的页面元素
document.queryselectorall('css语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为nodelist (一个类数组结果的对象,使用方式同数组)
// 没有匹配到任何结果返回空nodelist对象 ([])

3、id名

  • 可以通过id名直接获取对应的页面元素对象,但是不建议使用

七、js操作页面内容

  • innertext:普通标签内容(自身文本与所有子标签文本)
  • innerhtml:包含标签在内的内容(自身文本及子标签的所有)
  • value:表单标签的内容
  • outerhtml:包含自身标签在内的内容(自身标签及往下的所有)

八、js操作页面样式

  • 读写 style属性 样式
div.style.backgroundcolor = 'red';
// 1.操作的为行间式
// 2.可读可写
// 3.具体属性名采用小驼峰命名法
  • 只读 计算后 样式
// eg: 背景颜色
// 推荐
getcomputedstyle(页面元素对象, 伪类).getpropertyvalue('background-color');
// 不推荐
getcomputedstyle(页面元素对象, 伪类).backgroundcolor;

// ie9以下
页面元素对象.currentstyle.getattribute('background-color');
页面元素对象.currentstyle.backgroundcolor;

// 1.页面元素对象由js选择器获取
// 2.伪类没有的情况下用null填充
// 3.计算后样式为只读
// 4.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)
  • 结合 css 操作样式
页面元素对象.classname = "";  // 清除类名
页面元素对象.classname = "类名";  // 设置类名
页面元素对象.classname += " 类名";  // 添加类名