WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改

WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改

  • 运算符
    • 算术运算符
    • 比较运算符
    • 赋值运算符
    • 逻辑运算符
    • 三元运算符(三目运算符)
  • 流程控制语句
    • if语句
    • if else语句
    • if.....else if......else语句
    • switch语句:多分支语句
  • 循环结构
    • while循环
    • do...while循环
    • for循环
    • for in循环
  • JS操作DOM
    • 什么是DOM?
    • DOM查找元素
      • 查找
      • 操作

运算符

  • 用于执行程序代码运算,会针对一个以上操作数来进行

算术运算符

+   -   *   /   %  ++  --
  • 字符串拼接使用“+”
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第1张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第2张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第3张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第4张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第5张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第6张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第7张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第8张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第9张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第10张图片

比较运算符

<
>
==
!=
<=
>=
=== 全等于:将数值以及数据类型一并比较
!==不全等于:将数值以及数据类型一并比较
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第11张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第12张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第13张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第14张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第15张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第16张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第17张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第18张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第19张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第20张图片

赋值运算符

=
+= 

-=
*=
/=
%=
a=a+2;==>a+=2
a=a-2;==>a-=2
a=a*2;==>a*=2
a=a/2;==>a/=2
a=a%2;==>a%=2
  • 在这里插入图片描述
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第21张图片

逻辑运算符

&&  全真为真
||  一个为真就是真
!  取反
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第22张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第23张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第24张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第25张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第26张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第27张图片

三元运算符(三目运算符)

表达式1?表达式2:表达式3
当我的表达式1成立时  执行表达式2  否则执行表达式3
var max = 2>1?'>':'<';
console.log(max);
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第28张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第29张图片

流程控制语句

if语句

if(条件){
函数体
}

WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第30张图片
WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第31张图片

if else语句

if(条件){
函数体1
}else{
函数体2
}
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第32张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第33张图片

if…else if…else语句

if(条件1){

}else if(条件2){

}else if(条件n){

}else{

}
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第34张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第35张图片

switch语句:多分支语句

switch(表达式) {
     case n:
        代码块
        break;
     case n:
        代码块
        break;
     default:
        默认代码块
} 
switch (new Date().getDay()) {
    case 6:
        text = "今天是周六";
        break; 
    case 0:
        text = "今天是周日";
        break; 
    default: 
        text = "期待周末~";
} 
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第36张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第37张图片

循环结构

while循环

  • 先判断条件 当条件成立 再执行
while(循环成立条件){
....
}
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第38张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第39张图片
  • 一直循环下去
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第40张图片
    在这里插入图片描述
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第41张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第42张图片

do…while循环

do...while循环:不论条件成不成立 先执行一遍 再判断
do{
.....
}while(循环成立条件)
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第43张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第44张图片

for循环

  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第45张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第46张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第47张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第48张图片

for in循环

continue:
跳过当前循环,直接进入循环的下一个步骤
break:
结束循环
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第49张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第50张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第51张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第52张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第53张图片

JS操作DOM

什么是DOM?

  • DOM(document object model)文档对象模型,是针对HTML和XML的一个API(应用程序接口)。DOM给我们描述了一个具有层次化特点的节点树,允许开发人员增删改查页面的某些部分。
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第54张图片
  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

DOM查找元素

  • document获取节点的基本方法
document.getElementById('id');  //通过id来获取元素,返回指定的唯一元素。
document.getElementsByName("name"); //通过name来获取元素,返回name='name'的集合。
.document.getElementsByClassName("classname")  //用classname来获取元素,返回的是一个class="classname"的集合(不兼容IE8及以下)。
document.getElementsByTagName('div'); //用元素的标签获取元素,返回所有标签=“div”的集合。
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第55张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第56张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第57张图片
  • 在这里插入图片描述
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第58张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第59张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第60张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第61张图片

查找

  • 直接查找
var obj = document.getElementById('id');
  • 间接查找
  • 文件内容操作
innerText 仅文本
innerHTML 全内容
value
input value 获取当前的值
select 获取选中的value的值 document.getElementById('s1').selectedIndex=1
Textarea 获取value的值

WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第62张图片
WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第63张图片
WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第64张图片

  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第65张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第66张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第67张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第68张图片
  • 可选择框
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第69张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第70张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第71张图片
  • 选定python
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第72张图片

操作

  • 样式操作
    className 列出样式 字符串
    classList 列出样式 返回数组
    classList.add 增加样式
    classList.remove 删除样式
obj.style.fontSize='16px';
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第73张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第74张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第75张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第76张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第77张图片
  • WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第78张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第79张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第80张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第81张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第82张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第83张图片
    WEB安全之javascript基础(五):运算符条件语句、循环流程终止、js操作DOMjs查找更改_第84张图片

你可能感兴趣的:(工作准备,javascript,前端,html)