JavaScript基础操作

一、分支结构

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均未被匹配时执行
// 5.表达式与值进行的是全等于(===),值与类型都要相等
// 6.多个case可以共用逻辑代码块
switch (表达式) {
case 值1:
case 值2:
case 值3:代码块2; break; case 值4:case 值5: case 值6: case 值7:{
alert('31天');
break;
};
default: 代码块3;
}
// 多个case共用逻辑代码块,两种写法,同行写case | 分行写case,前者后面要用{}

二、循环结构

1、for循环

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

2、while循环

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 (v of iter) {
console.log(v)
}
// 1.用于遍历可迭代对象:遍历结果为value
// 2.ES6新增,可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等

6、break,continue关键词

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

三、异常处理

try {
易错代码块;
} catch (err) {
异常处理代码块;
} finally {
必须逻辑代码块;
}
// 1.err为存储错误信息的变量
// 2.finally分支在异常出现与否都会被执行
throw "自定义异常"
// 必要的时候抛出自定义异常,要结合对应的try...catch使用
<script type="text/javascript">
while (1) {
var num1 = + prompt("请输入第一个数字:");
var num2 = + prompt("请输入第二个数字:"); var res = num1 + num2; try {
if (isNaN(res)) throw "计算有误!";
alert(res);
break;
} catch (err) {
console.log("异常:" + err);
} finally {
console.log('该语句一定会被执行,一次try逻辑执行一次');
}
} </script>

四、函数初级

1、函数的定义

  • ES5
function 函数名 (参数列表) {
函数体;
} var 函数名 = function (参数列表) {
函数体;
}
  • ES6
let 函数名 = (参数列表) => {
函数体;
}
  • 匿名函数
(function (参数列表) {
函数体;
}) // 匿名函数定义后无法使用,所以只能自调用
(function (参数列表) {
函数体;
})(参数列表);

2、函数的调用

  • 函数名(参数列表)

3、函数的参数

  • 个数不需要统一,实参和形参的个数不需要相等
// 当实参个数小于形参的个数,调用函数,没有实参对应的实参,输出undefined
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.函数最多只能拥有一个返回值

五、事件初级

  1. 事件需要绑定具体执行函数
  2. 事件满足的条件触发绑定的函数
  3. 函数完成具体功能
  • onload:页面加载完毕事件,只附属于window对象
  • onclick:鼠标点击时间
  • onmouseover:鼠标悬浮事件
  • onmouseout:鼠标移开事件
  • onfocus:表单元素获取焦点
  • onblur:表单元素失去焦点
<!-- 1.直接将js代码块书写在行间事件中, 不提倡 -->
<div id='div' onclick='div.style.color="red";'></div> <!-- 2.在行间式时间中调用函数,不提倡 -->
<div id='div' onclick='func()'></div> <div id='div'></div>
<script> window.onload=function(){
div.style.color='red';
} // 3.为目标时间绑定事件方法,内部可以用this绑定对象本身
div.onmouseover=function(){
this.style.color='blue';
}
</script>

六、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对象 ([])
<script type="text/javascript">
// 1.直接可以通过id名,确定页面元素对象(id一定要唯一)
d.style.color = "cyan"; // 2.getElement方式
// document:所有标签都存在于文档中,所有通过document对象就可以找到指定的页面元素对象 // (1)id,id是唯一的,所以只能获取唯一满足条件的页面元素
// 注:只有getElementById只能由document调用
var d1 = document.getElementById('d');
d1.style.backgroundColor = "pink"; // (2)class,获取所有满足条件的页面元素
var d2 = document.getElementsByClassName('dd');
console.log(d2); // HTMLCollection 类数组类型
console.log(d2[0].style);
d2[0].style.backgroundColor = "cyan";
d2[1].style.backgroundColor = "blue"; // (3)tagName,获取所有满足条件的页面元素
var d3 = document.getElementsByTagName('div');
d3[1].style.backgroundColor = "#333"; var body = document.getElementsByTagName('body')[0];
body.style.backgroundColor = "#eee";
var d4 = body.getElementsByClassName('dd')[0];
d4.style.backgroundColor = "orange";
var d5 = body.getElementsByTagName('div')[1];
d5.style.backgroundColor = "brown"; </script>

2、querySelect系列

// 1.获取第一个匹配到的页面元素
document.querySelector('css语法选择器');
// 该方法可以由document及任意页面对象调用 // 2.获取所有匹配到的页面元素
document.querySelectorAll('css语法选择器');
// 该方法可以由document及任意页面对象调用
// 返回值为NodeList (一个类数组结果的对象,使用方式同数组)
// 没有匹配到任何结果返回空NodeList对象 ([])
<script type="text/javascript">

	// document.querySelector('css语法选择器')找满足条件的第一个
// 可以被document调用,也可以被普通对象调用
var e1 = document.querySelector('#e1'); // id为e1的标签,唯一一个
e1.style.backgroundColor = "#f7f"; var e2 = document.querySelector('body .ee'); // body标签下的class为ee的 第一个标签
e2.style.backgroundColor = "#ff6700"; var e3 = document.querySelector('body .ee:nth-of-type(5)');
console.log(e3)
e3.style.backgroundColor = "#ff6700"; // document.querySelectorAll('css语法选择器')找满足条件的所有
var es = document.querySelectorAll('.ee');
console.log(es); // NodeList,类数组结果的对象
es[1].style.backgroundColor = "tomato"; </script>

3、id名

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

七、JS操作页面内容

  • innerText:普通标签内容(自身文本与所有子标签文本)
  • innerHTML:包含标签在内的内容(自身文本及子标签的所有)
  • value:表单标签的内容
  • outerHTML:包含自身标签在内的内容(自身标签及往下的所有)
<body>
<div class="sup">
sup的文本
<div class="sub">sub的文本</div>
</div>
<form action="">
<input class="input" type="text" />
<button class="btn" type="button">获取</button>
</form>
</body> <script type="text/javascript">
// 通过js获取页面需要操作的元素对象
var sup = document.querySelector('.sup');
var sub = sup.querySelector('.sub'); // 获取 // 自身及所有子级的文本
console.log(">>>>>" + sup.innerText); // sup的文本 \n sub的文本
console.log(">>>>>" + sub.innerText); // sub的文本 // 自身文本及所有子级的所有(包含标签的所有信息:标签名,id名,class名,样式,事件,文本...)
console.log(">>>>>" + sup.innerHTML); // <div class="sub">sub的文本</div>
console.log(">>>>>" + sub.innerHTML); // sub的文本 // 赋值
sub.innerText = "<b>修改的sub文本</b>";
sub.innerHTML = "<b style='color: red'>修改的sub文本</b>";
// Text不解析标签语法,原样作为文本赋值给目标对象
// HTML可以解析标签语法 console.log(sub.innerHTML); // <b style='color: red'>修改的sub文本</b>
console.log(sub.outerHTML); // <div class="sub"><b style='color: red'>修改的sub文本</b></div> var btn = document.querySelector('.btn');
var ipt = document.querySelector('.input');
btn.onclick = function () {
// 获取表单元素的文本值 // 获取文本
var v = ipt.value;
console.log(v); // 清空文本
ipt.value = ""; // 赋值空文本
} </script>

八、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.该方式依旧可以获取行间式样式 (获取逻辑最后的样式)

注意:

1. js操作的就是行间式
2. 行间式优先级高于任何css选择器,一旦行间式修改了样式,那么不管外联式还是内联式都无法修改样式
3. 行间式优先级低于 !important 。如果内联式或外联式有!important,会使用important的样式
4. ele.style.样式只能获取行间式样式,如果没有行间式,那么 ele.style.样式 就无法获取样式
5. getComputedStyle(页面元素对象, 伪类).getPropertyValue('background-color')。计算后样式,不仅可以获取行间式,还可以获取内联式和外联式的样式
6. 颜色在计算后的样式中全部为 rgb(a,b,c) 的形式
<head>
<meta charset="UTF-8">
<title>js操作页面样式</title>
<style type="text/css">
div#div.div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="div" class="div"></div>
<button class="btn">切换</button>
</body>
<script type="text/javascript">
var div = document.querySelector('.div'); // 需求:切换背景颜色 红 <=> 黄
// 1.获取原来的颜色
// 2.判断颜色
// 3.修改颜色 // 获取计算后样式
// getComputedStyle参数: 页面对象 伪类
// getPropertyValue参数: css语法的样式字符串
// var bgColor = getComputedStyle(div, null).getPropertyValue('background-color');
var bgColor = getComputedStyle(div, null).backgroundColor;
console.log(bgColor); // rgb(255, 0, 0) var btn = document.querySelector('.btn');
// 点击一下
btn.onclick = function () {
// 获取当前颜色一次,只读不能改
bgColor = getComputedStyle(div, null).backgroundColor;
console.log(bgColor);
// 判断并修改
if (bgColor == 'rgb(255, 0, 0)') {
div.style.backgroundColor = 'orange';
} else {
div.style.backgroundColor = 'red';
}
} </script>
</html>
  • 结合 css 操作样式
页面元素对象.className = "";  // 清除类名
页面元素对象.className = "类名"; // 设置类名
页面元素对象.className += " 类名"; // 添加类名
<head>
<meta charset="UTF-8">
<title>js操作类名</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
.show {
width: 200px;
height: 200px;
background-color: red;
display: block;
}
.hidden {
display: none;
}
.border {
border: 1px solid black;
}
</style>
</head>
<body>
<button class="btn1">显示</button>
<button class="btn2">加边框</button>
<button class="btn3">改颜色</button>
<button class="btn4">加文本</button>
<button class="btn5">隐藏</button>
<div class="div"></div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div');
var b1 = document.querySelector('.btn1');
var b5 = document.querySelector('.btn5');
var b2 = document.querySelector('.btn2');
var b4 = document.querySelector('.btn4'); b1.onclick = function () {
div.className = 'show';
}
b5.onclick = function () {
div.className = 'hidden';
}
b2.onclick = function () {
div.className += ' border';
}
b4.onclick = function () {
div.innerText += "文本";
} </script>

前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式的更多相关文章

  1. 十二. Python基础(12)--生成器

    十二. Python基础(12)--生成器 1 ● 可迭代对象(iterable) An object capable of returning its members one at a time. ...

  2. “全栈2019”Java第二十二章:控制流程语句中的决策语句if-else

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. 二十二. Python基础(22)--继承

    二十二. Python基础(22)--继承 ● 知识框架   ● 继承关系中self的指向 当一个对象调用一个方法时,这个方法的self形参会指向这个对象 class A:     def get(s ...

  4. Tensorflow深度学习之十二:基础图像处理之二

    Tensorflow深度学习之十二:基础图像处理之二 from:https://blog.csdn.net/davincil/article/details/76598474   首先放出原始图像: ...

  5. 前端开发之JavaScript基础篇二

    主要内容: 1.流程控制条件语句和switch语句 2.for循环和while循环 3.Break语句和Continue语句 4.数组和数组常用方法 5.函数 6.对象 一.流程控制条件语句和swit ...

  6. 前端学习 之 JavaScript基础

    一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...

  7. 3.前端笔记之JavaScript基础

    作者:刘耀 部分内容参考一下链接 参考: http://www.cnblogs.com/wupeiqi/articles/5369773.html http://javascript.ruanyife ...

  8. 前端开发之JavaScript基础篇一

    主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换   ...

  9. 前端(三):JavaScript基础

    JavaScript是一种属于网络的脚本语言,常用来为网页添加各式各样的动态功能,是一种动态类型.弱类型.基于原型的语言.它包括三个部分:ECMAScript.BOM和DOM.ECMAScript描述 ...

  10. 第十篇 javascript基础语法

    1)基本概念 a) 语句(statement)是为了完成某种任务而进行的操作,语句以分号结尾,一个分号就表示一个语句结束.:如:var a = 1; b) 表达式(expression),指一个为了得 ...

随机推荐

  1. jsp的 javascript中 嵌套 html 注释

    看到公司的代码,我也是蛋疼了,各种乱. 还发现有很多的jsp的 javascript中 嵌套 html 注释, 这个可行? 我之前可是没用过. 后面查找各种资料发现,这个也是可行的,主要是为了兼容不支 ...

  2. windows平台下基于VisualStudio的Clang安装和配置

    LLVM 是一个开源的编译器架构,它已经被成功应用到多个应用领域.Clang是 LLVM 的一个编译器前端,它目前支持 C, C++, Objective-C 以及 Objective-C++ 等编程 ...

  3. MongoDB的基本使用(二)

    上一个文档说明了如何搭建一个Windows端MongoDB服务器,下面将简单介绍MongoDB的基本操作命令. 1. show dbs : 显示所有数据库 2. use bochao : 使用boch ...

  4. ejs简单教程

    ejs learning nodejs的模板引擎有很多, ejs是比较简单和容易上手的.常用的一些语法: 用<%...%>包含js代码 用<%=...%>输出变量 变量若包含 ...

  5. 布隆过滤器(BoomFilter)

    1.原理:           a.解决的问题:                判断一个元素是否在一个集合中             b.Hash表的特点:                i.快速准确 ...

  6. 002-Apache Maven 构建生命周期

    Maven - 构建生命周期 什么是构建生命周期 构建生命周期是一组阶段的序列(sequence of phases),每个阶段定义了目标被执行的顺序.这里的阶段是生命周期的一部分. 举例说明,一个典 ...

  7. 第十六节,OpenCV(学习五)边缘检测

    边缘检测 边缘检测的目的是标识数字图像中亮度变化明显的点,边缘检测是特征提取的重要领域. 1.检测方法 边缘检测的方法大致分为两类:基于搜索和基于零交叉 基于搜索的边缘检测方法首先计算边缘强度,通常用 ...

  8. 第12月第2天 uiscrollview _adjustContentOffsetIfNecessary 圆角

    1. uiscrollview在调用setFrame,setBounds等方法的时候会默认调用稀有api: _adjustContentOffsetIfNecessary 这个方法会改变当前的cont ...

  9. 使你的WebService可以远程调试点击“调用”

    默认发布webservice时,只有在本机访问某个方法时可以点击调用,如果有参数时,也可以输入参数值,但是如果是远程访问时,点击进入一个服务时,是不显示“调用”和输入参数框的. 原来web.confi ...

  10. 原创Oracle数据泵导出/导入(expdp/impdp)

    //创建目录 create Or Replace directory dpdata1 as 'd:\test\dump'; //赋予读写权限 grant read,write on directory ...