JavaScript精粹（二）- 属性&循环

本文链接：https://blog.csdn.net/qq1808814025/article/details/138901295

在JavaScript中，循环是一种控制结构，用于重复执行某段代码块，直到满足特定的条件为止。循环的作用主要体现在以下几个方面：

处理数组和集合：当需要遍历数组、对象或其他可迭代数据结构中的所有元素时，循环结构特别有用。例如，你可能想要对数组中的每个元素执行某个操作，或者查找满足特定条件的元素。
减少冗余代码：通过循环，我们可以避免编写重复的、几乎相同的代码行。相反，我们可以将重复的代码块放入循环体中，并通过改变循环变量来多次执行它。
提高代码可读性：使用循环可以使代码更加简洁和结构化，从而提高其可读性。通过清晰地定义循环的初始条件、终止条件和迭代步骤，我们可以更容易地理解代码的功能和目的。
处理大量数据：在处理大量数据时，循环可以显著提高效率。通过循环，我们可以一次处理一个数据项，而不是一次性处理整个数据集，这有助于减少内存使用并提高执行速度。
实现复杂逻辑：循环结构可以与其他控制结构（如条件语句和函数）结合使用，以实现更复杂的逻辑和算法。例如，我们可以使用嵌套的循环来遍历二维数组或处理复杂的计算任务。

总之，循环在JavaScript编程中发挥着至关重要的作用，它使我们能够高效、简洁地处理数据和实现复杂逻辑。

五、操作样式

1.1 操作行内样式

在js里面我们通常是操作行内样式，那么，现在我们就来学习一下如何操作行内样式：
语法：对象.style.css属性 = "值";
如果有“-”就要用驼峰命名（把减号去掉，减号后面的第一个字母大写，如backgroundColor）

var oBox = document.getElementById('box');
oBox.onmouseover = function(){
	this.innerText = '<p>大家好，我是Daniel。</p>';
	this.style.backgroundColor = '#cc00ff';
};
oBox.onmouseout = function(){
	this.innerText = '';
	this.style.backgroundColor = '#999';
};

1.2 float 浮动

在我们的前端里面我们都知道兼容很恼火，这里的浮动就有一个兼容问题
首先，在js里面我们不能直接这样子写

oBox.style.float = "right"

因为flaot是关键字，虽然在谷歌里面这样写也可以这样子写，但是，我们也不能这样子写，比如c++里面是代表浮点型，所以我们用其他的代替，还有我们的class也是保留字要用className代替。

那这个时候就有兼容问题了。
在谷歌里面

oBox.style.cssFloat = 'right';

在ie低版本里面

oBox.style.styleFloat = 'right';

因此我们通常两个都要写上
在编写程序的时候，两个都写上，防止浏览器不兼容，如果不报错就不需要判断
类名则为

oBox.style.className = 'on';

六、标签属性

标签属性：通俗的说，就是写在我们标签里面的有等号的那种属性

1.1 读取标签属性

如上面的img标签里面,的src alt id width ，就是标签属性。当然不是说就只有我们写的这些
在js里面，我们可以通过点的方式得到这些属性值，并且，可读可写

可读：可以读取
可写：可以改变

var oBox = document.getElementById('box');
console.log(oBox.id);
console.log(oBox.src);
console.log(oBox.alt);

这里我们还需要注意一个问题,虽然改变了id值，但是如果你在id改变以前获取了这个div，在赋值给一个变量，那么，当你改变以后，这个变量还是这个div，就好比名字改变了没关系，这个人还是这个人。

oBox.onclick = function () {
    this.id = "goudan";
    console.log(this.id);
    oBox.style.width = "300px";
}

1.2 自定义标签属性

在js中，只有合法的属性才能打点调用，如title,href,src等等，自定义标签属性就需要通过以下三个方法定义，设置，删除；

1.2.1 getAttribute() 获取自定义属性

<div id="box" title='Daniel' dachui='大锤'></div>

console.log(oBox.dachui);  //未定义，为什么未定义呢？就是因为他不是合法的字符，不能打点调用
console.log(oBox.getAttribute("dachui"));  //获取自定义的属性

1.2.2 setAttribute() 设置自定义属性

oBox.setAttribute("dachui","王大锤");

将大锤改为王大锤（设置自定义的属性值）

console.log(oBox.getAttribute("dachui"));

再次console dachui的时候就变成了王大锤

1.2.3 removeAttribute() 删除自定义属性

oBox.removeAttribute("dachui"); //删除dachui属性

1.3 设置css样式的替代方法

这个时候，我们想做一个小案例，点击按钮，让盒子变换一些属性，再点击，回到之前的状态，这时候，我们可能会这样子写：

oBox.onclick = function(){
    this.style.background = "deeppink";
    this.style.cssFlaot = "right";
    this.style.styleFlaot = "right";
    this.style.border = "1px solid purple";
};
oBtn.onclick = function(){
    oBox.style.background = "orangered";
    oBox.style.cssFlaot = "left";
   oBox.style.styleFlaot = "left";
   oBox.style.border = "none";
};

这个时候会造成什么呢，代码太长太冗余，那么，这时候我们可以这样子，把css代码放在一个类里面，然后给元素添加删除类名。

<style>
    #box.on{
        background:deeppink;
        float:right;
        border:10px solid purple;
    }
</style>
<script>
    oBox.onclick = function(){
        this.className = 'on';
    };
    oBtn.onclick = function(){
        oBox.className = '';
    };
</script>

1.4 cssText 拼接

我们想要给一个盒子设置样式

oBox.style.width = '150px';
oBox.style.height = '150px';
oBox.style.background = '#cc00ff';

但是，太冗余了,这个时候我们有一个属性可以直接把所有的css样式写在一起，注意，这是改变的行内样式。

.oBox.style.cssText = "width:150px; height:150px; background:#c0f;"

但是，如果之前有行内样式，这时候就会被覆盖掉，那么我们怎么才能不被覆盖掉呢，我们就可以用到字符串的拼接。

oBox.style.cssText += 'width:150px; height:150px; background:#c0f;';

七、获取元素的其他方式

和选择器一样，我们要给某个标签添加样式，或者操作这个标签，我们首先要获取到这个标签

1.1 通过id名获取

我们都知道id名不能重复，所以获取到的元素只是一个

var oBox = document.getElementById("box"); //括号里面写id名

1.2 通过class类名获取元素

document.getElementsByClassName("类名");

我们都知道class类名可以重复，因此，获取到的不想id一样只是一个可以直接拿来用，这里是一个类数组，我们要用就要选择到类数组中的某一个。因此我们需要加上下标(需要注意的是，数组下标是以0开头的)，并且我们可以发现getElementsByClassName中也加了个s,表示负数的意思

<div id="wrap">
    <div class="daniel">Daniel</div>
    <div class="daniel">Daniel</div>
    <div class="daniel">Daniel</div>
</div>

var obj = document.getElementsByClassName('daniel');  //获取到的是一个类数组
obj[1].style.color = 'red'; //选择到这个类数组中的下标为1的第二个元素

兼容性：不兼容IE8以及以下

1.3 通过标签名获取元素

通过元素的标签名获取元素，同样的同名的标签有很多，所以获取到的也是一个类数组

document.getElementsByTagName("元素名");

在这里，我们要注意的是，无论你的标签有几个，永远都要以类数组的方式去使用

<div id="wrap">
    <p>Daniel</p>
</div>

document.getElementsByTagName("p");
obj[0].style.color = 'red';

如果我们想要获取wrap里面的p标签

  var oWrap = document.getElementById('wrap');
  var aP= oWrap.getElementsByTagName('p');
  aP[0].style.color = 'red';

兼容性：兼容所有浏览器
当然我们有跟好的方法：

1.4 querySelector() 和querySelectorAll()

通过选择器获取元素（支持所有css选择器和部分css3选择器）很特殊的是，兼容IE8及以上（包括IE8）

1.4.1 querySelector()

获取单个节点，如果选择器是类名或者标签名等，只会获取到第一个。(如果你在后面加上下标就会报错，找不到这个元素) 兼容IE8及以上
错误写法：

var oXiao= document.querySelector('#box .xiao');
oXiao[0].style.color = 'red';

正确写法：

var oXiao= document.querySelector('#box .xiao)';
oXiao.style.color = 'red';

1.4.2 querySelectorAll()

获取多个节点类数组

var aXiao = document.querySelectorAll('#box .xiao');

正确写法：

var aXiao = document.querySelectorAll('#box .xiao');
oXiao[0].style.color = 'red';

1.5 JavaScript静态和动态获取方法

1.5.1 静态获取方法

（1）通过id获取
当我们通过id获取到一个节点以后，他的id改变以后不会影响这个节点，就好比我选择到这个人，无论他叫什么名字，长什么样子都没关系。如下：

<p id='test'>Daniel真的帅！</p>

如下，我先获取到test，再改变id，然后再通过我之前获取的节点改变颜色，可以改变吗？

  var oTest = document.getElementById('test');
  oTest.style.color = 'red';
   oTest.id = 'testt';
   oTest.style.color = '#cc00ff';

很显然也是可以的。这就是我们的静态获取
（2）querySlectorAll和querySelector
除了id方式，用querySlectorAll获取也是一样的

    <div id="box">
        <p></p>
        <p></p>
        <p></p>
    </div>

var oBox = document.querySelector("#box");
    var aP = document.querySelectorAll("#box p");
    console.log(aP.length); //3
    oBox.innerHTML += "<p>大家好！</p>";
    console.log(aP.length); //3

1.5.2 动态获取方法

每当我们用到一次类数组的时候都会动态的获取一次

<div id="box">
    <p class='xiao1'>p1</p>
    <p class='xiao1'>p2</p>
    <p class='xiao1'>p3</p>
</div>

（1）getElementsByclassName方法

  var aXiao1 = document.getElementsByClassName('xiao1'); //获取到xiao1类数组
  console.log( aXiao1.length ); //先弹出长度 3
  aXiao.innerHTML += "<p class='xiao1'>p4</p>";
  console.log( aXiao1.length ); //4

（2）getElementsByTagName方法

    var oBox = document.querySelector("#box");
    var aP = document.getElementsByTagName('p');
    console.log(aP.length); //3
    oBox.innerHTML += "<p>哈哈</p>";
    console.log(aP.length);   //4

最后我们再来说一下获取了元素以后的简单的命名规范：

1.6 JavaScript获取的元素命名规范

s: 表示字符串String
b: 表示布尔Boolean
a: 表示数组Array
o: 表示对象Object
fn: 表示函数Function
re: 表示正则Regular Expression

如下：

var aPerson = []; // Array数组
var oBtn = document.getElementById('btn'); //Object对象
var aBtn = document.getElementByClassName('btn'); //Object对象
var fnName = function () {};  // function函数
var sName = "w3cplus"; // string字符串

八、控制语句

1.1 if 语句

表示满足条件执行，不满足条件就什么都不做

     if(条件){
          条件为真的时候执行的语句
      }

如：

     if(1<2){
     	console.log("Daniel不帅！");
     }

我们可以看出这个语句，首先会判断条件是否满足，满足则执行if里面的语句
我们可以看出在括号里面的条件都会强制性的被转换成Boolean值,那么，哪些可以强制转换为真，哪些为假呢？
在强制转换成布尔值时为假（false）：

0、false、' '、null、undefined、NaN(不是数字)

下面我们来看看一些简单的例子：

     if ( 1 == '1' ){
         console.log('等于，比较值');
     };
     if ('0'){
         console.log(“我是字符串”)
     };

1.2 if else 语句

满足条件执行if里面的语句其他情况执行else里面的语句

		if(条件){
		    条件为真的时候执行的语句
		}else{
		    条件以外的情况执行的语句
		}

如：

		if( 1<2 ){
		    console.log(“Daniel好帅！”);
		}else{
		    console.log(“Daniel好帅”)
		}

1.3 if else 简写

三目运算：在if else语句中，如果真假语句都只有一条的情况下，我们可以改写为三目运算，如下：

     if(1<2){
          console.log("Daniel很帅！");
      }else{
          console.log("Daniel不帅！");
      }

写为三目运算：

1<2 ? console.log("Daniel很帅！") : console.log("Daniel不帅！");

还可以这样：

	var a = "";
	if(1<2){
	  a = "Daniel好帅！";
	}else{
	  a = "Daniel不帅！";
	}

改为三目：

a = 1 < 2 ? "Daniel好帅！" : "Daniel不帅！";
console(a);
``
当条件为真或条件为假的语句只有一条的时候可以这样写
```js
    if(条件)条件为真的时候执行的语句
    	else 条件以外的情况执行的语句

   if(2<1)console.log("Daniel不帅！");
   	else console.log("Daniel好帅！")

1.4 if else if else 语句

      if (条件1){
          满足条件1执行的语句
      }else if ( 条件2 ){
          满足条件2执行的语句
      }else(其他情况){
          都不满足执行的语句
      };

判断会从第一个条件开始，依次向下执行判断
比如：

 	  var a = 2;
 	  if(a<3){
 	      console.log("a小于3");
 	  }else if(a === 3){
 	      console.log("a等于3");
 	  }else{
 	      console.log("a小于3");
 	  }

1.5 switch语句

switch语句和if没什么区别，能用if的就能用switch，能用switch的同样能用if，在switch里面注意的是一定要有break代表此段语句结束。

    switch( a ){
        case 'Daniel':
            alert('帅哥！');
            break;
        case '下雨天':
            alert('美女！');
            break;
        case '赵四':
            alert('霹雳火！');
            break;
       case '萌':
            alert('萌！');
            break;
       default:
            alert('你到底是谁！');
            break;
    }

九、循环语句

当我们重复的去做一件事情的时候，我们就可以通过for循环去帮我们实现

1.1 for循环

1.1.1 语法

    for ( 定义循环变量（1）; 判断条件（2） ; 变化量（4） ){
        一条或多条语句（3）
    };

1.1.2执行顺序

1 -> 2(条件为真) -> 3 -> 4
1 -> 2(条件为假) 结束循环

当判断条件为真的时候停止执行for里面的语句

for ( var i=0 ; i<4 ; i++ ) {
   alert( i );
};

当语句执行完毕以后，i的值为多少呢？

for ( var i=0 ; i<4 ; i++ ) {
   alert( i );
};
alert( i + '：最后一次的i' );

i的值为定值，是刚好不满足条件的那个值

1.1.3 跳出循环

（1）break
立即跳出当前循环

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

输出：0 1 2 3 4

（2）continue
跳过本次循环

for (var i=0;i<10;i++ ) {
        if ( i === 5 )
        {
            continue;
        }
        console.log(i);
    }

输出：0 1 2 3 4 6 7 8 9

1.2 while

和for循环类似，while也是有判断语句

while:
    var a = 1;
    while( a < 10 ){
        a++;
        console.log(a);
    }

当a < 10的时候console出a

do while
var a = 1;
    do{
        a++;
        console.log(a);
    }while( a < 10 )

do while 和while不同的是，先执行一遍再判断，也就是至少执行一遍。

【上一篇】JavaScript精粹（一）- 基础入门
【下一篇】JavaScript精粹（三）- 函数&作用域