【web】js基础知识点小结（1）

最新推荐文章于 2024-09-11 15:33:18 发布

爱吃锅包又

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量253

点赞数 1

文章标签： javascript 前端 html 开发语言

本文链接：https://blog.csdn.net/m0_66112222/article/details/127395716

版权

本文详细解读了JavaScript中的算数、比较、逻辑运算符，以及if、else、switch、三元运算符等判断结构，包括if-else-if-else和数组操作，适合初学者理解JavaScript核心逻辑

摘要由CSDN通过智能技术生成

一、运算符

1、算数运算符

算数运算符：+ - * / %（取余）

<script>	
	var num1=10,num2=10
 console.log(num1+num2)
 console.log(num1-num2)
 console.log(num1*num2)
 console.log(num1/num2)
 console.log(num1%num2)
</script>

2、比较运算符

比较运算符：>（大于）、 >= （大于等于）、 <（小于）、 <= （小于等于）、 != （不等于）、 ==（等于）、 ===（绝对等于）。

==等于：值相等就可以；===绝对等于：数据类型和值都相等。
<script>	
	console.log(num1>num2);
 console.log(num1>=num2);
 console.log(num1<num2);
 console.log(num1<=num2);
 console.log(num1!=num2);
</script>
结果是布尔值（false或true）

3、逻辑运算符

逻辑运算符 &&（且：所有条件都满足才为真）

||（或：只要有一个条件满足就为真）

！（非：取反）
<script>	
	var person={height:'1m',like:'羊',age:18}
    if(!(person.height=='11m'||person.like=='羊肉'||person.age==8)){
        alert("lala")
    }
</script>

二、判断语句

1、if语句

if(条件){符合条件执行代码}

<script>	
	var num=20
 if(num<5){
     alert("满足条件")
 }
</script>

2、if-else语句

if(条件){符合条件执行代码}else{不符合条件执行代码}

<script>	
	var num=20
 if(num<0){
     alert("符合条件")
 }
 else{
     alert("不符合条件")
 }
</script>

3、if-else if-else else语句

if( ){ }else if( ){ }else if( ){ }else{ }

只要有一个满足条件，停止执行

<script>	
	var score=5
 if(score>90){
     alert("非常优秀")
 }
 else if(score>80){
     alert("优秀")
 }
 else if(score>70){
     alert("nice")
 }
 else if(score>60){
     alert("及格")
 }
 else{
     alert("革命尚未胜利，同志还需努力")
 }
</script>

4、switch-case语句

switch-case 一般用来判断一个值

<script>
	var num=10
	switch (num) {
     case 9:
         alert(9)
         break;  //结束本次的语句
     case 10:
         alert(10)
         break;
     case 11:
         alert(11)
         break;
     default:   //不满足条件
         alert("默认")
         break;
 }
</script>

5、三目运算符（三元运算符）

条件？符合条件执行代码：符合条件执行代码
<script>	
	var num=20
 num>5?alert("okok"):alert("nono")
</script>

三、循环语句

1、while循环

符合条件就一直循环,循环多少次不固定

while (条件) {符合条件执行代码}

x–(先执行后减) --x(先减后执行) x++ ++x
<script>	
	var x=10
 while (x>5) {
     x--;  //10,9,8,7,6
     console.log("符合条件一直循环");
 }
</script>

2、do while循环

不管是否符合条件,先执行一次然后符合条件就一直循环,循环多少次不固定.

do{符合条件执行代码}while（条件）循环次数不固定
<script>	
	do {
     console.log("符合条件执行代码");
     x--;
 } while (x>1);  //9 8 7 6 5 4 3 2
</script>

3、for循环

一般配合数组使用，循环次数固定

for(循环条件){执行代码}
<script>	
	var arr=[9,5,3,6,7,11,22]
 console.log(arr);
 for(var i=0;i<arr.length;i++){
     console.log(arr[i]+10);
 }
</script>

continue:跳出本次循环 break：跳出整个循环

<script>	
	for(var i=0;i<10;i++){
     if(i==5){
         break
     }
     console.log(i)
 }
</script>

四、获取元素

1、通过id名获取

通过id名获取获取的是单个元素

document.getElementById(‘id名’)

<body>
 <button id="btn">注册</button>
</body> 
<script>	
	var btn=document.getElementById('btn')
 console.log(btn);
 btn.onclick=function(){
     console.log("注册");
 }
</script>

2、通过标签名获取

通过标签名获取获取的是数组

document.getElementsByTagName('标签名)[索引值]

<body>
 <button>注册</button>
 <button>登录</button>
</body> 
<script>	
	var btns=document.getElementsByTagName('button')[1]
 console.log(btns);
 btns.onclick=function(){
     console.log("www");
 }
</script>

3、通过class名获取

通过class名获取元素获取数组

document.getElementsByClassName(‘class名’)

<body>
 <span class="span">静夜思</span>
 <span class="span">李白</span>
</body> 
<script>	
	var spans=document.getElementsByClassName('span')
 console.log(spans);
 spans[1].onclick=function(){
     console.log(lala);
 }
</script>

4、通过name属性获取

通过name属性获取获取的是数组

document.getElementsByName(‘name名’)表单
<body>
 <input type="text" name="user">
 <input type="password" name="user">
</body> 
<script>	
	var inps=document.getElementsByName('user')
</script>

5、通过选择器获取

5.1、通过选择器获取单个元素

document.querySelector(‘选择器’)

获取该选择器的第一个元素

<body>
 <button>获取表单内容</button>
 <p class="p1">您输入的用户名是:</p>
</body> 
<script>	
	var p1=document.querySelector('.p1')
 console.log(p1);
</script>

5.2、通过选择器获取数组

document.querySelectorAll(‘选择器’)

获取拥有此选择器的元素

<body>
 <button>获取表单内容</button>
 <p class="p1">您输入的用户名是:</p>
</body> 
<script>	
	var button=document.querySelectorAll('button')[2]
 console.log(button);
</script>

6、补充

只有通过id和标签名获取元素没有兼容，其他都不兼容低版本ie.
获取多个元素的，获取的都是数组.
不只是通过document对象获取元素，也可以通过父元素获取子元素.
通过父元素获取子元素
<body>
 <div class="father">
     <p style="background-color: green;">daer</p>
 </div>
</body> 
<script>	
	var father=document.querySelector('.father')
 var daer=father.getElementsByTagName('p')[0]
</script>
js如何获取或者设置标签的属性（只能获取或者设置行间属性）
<body>
 <div class="father">
     <p style="background-color: green;">daer</p>
 </div>
</body> 
<script>	
	var father=document.querySelector('.father')
 var daer=father.getElementsByTagName('p')[0]
 father.onclick=function(){
     //js如何获取或者设置标签的属性（只能获取或者设置行间属性）
     //获取：元素.属性名
     //设置：元素.属性名=属性值
     console.log(daer.style.backgroundColor);
     daer.style.backgroundColor='pink'
 }
</script>
设置属性:元素.属性名=属性值

获取属性:元素.属性名

设置样式的本质和设置属性相同,设置样式就是设置style属性

获取元素，绑定事件

<body>
 <button id="btn">注册</button>
 <button>登录</button>
 <br>
 <input type="text" name="user">
 <input type="password" name="user">
 <br>
 <button>获取表单内容</button>
 <p class="p1">您输入的用户名是:</p>
 <div class="father">
     <p style="background-color: green;">daer</p>
 </div>
</body>
<script>	
	var input=document.getElementsByTagName('input')[0]
 var btn=document.getElementsByTagName('button')[2]
 var p=document.getElementsByClassName('p1')[0]
 console.log(input,btn,p);

 //绑定事件
 btn.onclick=function(){
     //点击事件执行代码
     //将表单内容赋值为p标签
     //1.获取表单内容
     var v=input.value
     //value 获取或者设置表单的内容
     //innerHTML 获取或者设置其他标签
     console.log(p.innerHTML);
     p.innerHTML="您输入的用户名是:"+input.value
 }
</script>