day51
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 += " 类名"; // 添加类名
day51的更多相关文章
- day51——对象、BOM对象、DOM对象
day51 JSON对象 var a = {'name':'太白','age':89}; 序列化:var b = JSON.stringify(a); 反序列化:var c = JSON.parse( ...
- day51作业
利用无名有名分组加反向解析完成用户数据的编辑和删除功能 目录结构 day51: app01 day51 static templates manage.py 功能截图 代码实现 day51/urls. ...
- 我只是不甘心-------Day51
回放假回家一天,完全断网,天气也很给力配合.水蓝色的天空.白云,抬眼,我没有看到刺目的光芒,但仍眼眼睛刺痛.已经缩小眼,我试图打开眼睛,就像眼泪都流出来了,它不会擦到沙,这是很多其他的没地方. 哥哥去 ...
- day51 JS基础
复习 1.字体图标 用i标签, 设置类名, 与第三方字体图标库进行图标匹配 <link rel="stylesheet" href="font-awesome-4. ...
- Python:Day51 web框架
from wsgiref.simple_server import make_server def application(environ, start_response): start_respon ...
- Day5-1 面向对象和面向过程
摘要: 类的定义 类的增删改查 对象的增删改查 对象的查找和绑定 面向对象和面向过程的区别: 1.面向过程就像是工厂的流水线,按部就班的有序的工作. 优点:把复杂的问题简单化 缺点:可扩展性差.一个步 ...
- day51 django第二天 django初识
一.模块渲染 jinja2 实现简单的字符串替换(动态页面) 1.下载 pip install jinja2 示例 : html文件中 <!DOCTYPE html> <html ...
- python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)
昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...
- 前端基础之JavaScript day51
前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...
- 页面练习my blog day51
html端: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
随机推荐
- js-ES6学习笔记-Symbol
1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null.布尔值(Boolean).字符串(String ...
- JS写的二级导航栏(利用冒泡原理)
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...
- 【读书笔记】iOS-网络-测试与操纵网络流量
一,观测网络流量. 观测网络流量的行为叫做嗅探或数据包分析. 1,嗅探硬件. 从iOS模拟器捕获数据包不需要做特别的硬件或网络配置.如果需要捕获这些数据包,那么可以使用嗅探软件来监听回送设备或是用于连 ...
- springboot No Java compiler available for configuration options compilerClassName: [null] and compil
今天使用eclipse创建springboot整合jsp出现一个问题,在idea中并没有遇到这个问题.最后发现是需要在eclipse中添加一个eclipse依赖,依赖如下: <dependenc ...
- 防范跨站脚本攻击(XXS)的关键手段
1:加强对提交信息和页面显示信息的过滤,让非法提交内容无处施展: 2:让存储在cookie中的sessionid 无法被js 读取到. 如今的xss 相比网上很多资料中,在技术上已经发生了很大变化.由 ...
- memset初始化数组的问题
今天才搞清楚,memset用于初始化数组,仅能初始化为0值,而不能初始化一个特定的值,这怎么能模糊了呢??? 因此,如果对申请的一段存放数组的内存进行初始化,每个数组元素均初始化为特定的值,必须使用循 ...
- Loadrunner脚本优化-参数化之关联MySQL数据库获取数据
脚本优化-参数化之关联MySQL数据库获取数据 by:授客 QQ:1033553122 测试环境: Loadrunner 11 Win7 64位 实操: 1. 安装MySQL ODBC驱动程序 O ...
- Windows Win7建立wifi热点,手机共享WIFI上网
Win7建立wifi热点,手机共享wifi上网 by:授客 QQ:1033553122 1.以管理员身份运行命令提示符:快捷键win+R→输入cmd→回车 2.启用并设定虚拟WiFi网卡:运行命令:n ...
- Android系统执行Java jar程序 -- dalvik运行dex Java工程
本文仅针对纯java工程执行进行诠释,一般在PC平台作为jar包形式存在,在Android平台则以dex包形式存在. Java属于高级程序语言,Java程序需要运行在特定的虚拟机中,虚拟机将Java字 ...
- ubantu 16.4 Hadoop 完全分布式搭建
一个虚拟机 1.以 NAT网卡模式 装载虚拟机 2.最好将几个用到的虚拟机修改主机名,静态IP /etc/network/interface,这里 是 s101 s102 s103 三 ...