JavaScript实战笔记

最新推荐文章于 2024-12-26 09:15:00 发布

原创最新推荐文章于 2024-12-26 09:15:00 发布 · 246 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文探讨了前端开发中常见的样式切换与事件处理技术，包括条件语句、for循环、鼠标事件、显示隐藏功能及密码输入控制。通过具体代码示例，详细解释了如何利用JavaScript动态更改CSS样式，实现网页样式的灵活切换，以及如何处理用户交互事件，如鼠标移入移出和按钮点击，来增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.this.index == oBtn.length - 1 && (oDiv.style.cssText = “”);

&&的条件操作符功能，cssText获取行间样式，该段代码等价于：
if(this.index==oBtn.lenght-1){
oDiv.style.cssText="";
} 其中oDiv.style.cssText="";表示重置

2,.oLink[‘href‘] = this.id + “.css”;

oLink[‘href’]是指获取oLink对象的href属性，id是this对象的一个属性值，**

与".css"做拼串操作，可以修改css文件的路径

**，从而达到通过改变css文件路径而改变网页样式的目的，改变href的值就是改变路径，同时也就是改变网页样式

3.for-in

for(var i=0 ; i<oSkin.length ; i++){
		oSkin[i].onclick=function(){**加粗样式**
			for(var j in oSkin ){
				oSkin[j].className="";
			} 
			this.className="current";
			oLink.href="css/" + this.id + ".css";
		}
	}

for-in语句是一种精准的迭代语句，可以用来枚举对象的属性，那上面就是把oSkin这个对象存在的属性名赋值给变量j，这里的oSkin是一个数组对象，HTMLCollection 对象的行为和只读数组一样，所以可以使用 JavaScript 的方括号，通过编号或名称索引一个 HTMLCollection 对象
注意：for(p in oSkin) ，如果oSkin是数组，那么p就是索引；如果oSkin是对象，那么p就是属性

问题：为什么上面代码里的this.className和this.id里面的this不可以写成oSkin[j]呢？求大神解答

4.鼠标移入/移出改变样式方法

function change(){
		var oDiv=document.getElementById("demo");
		oDiv.onmouseover=function(){
			oDiv.className="hover";
		}
		oDiv.onmouseout=function(){
			oDiv.className="";
		}
	}

#demo.hover{
	border: 10px solid red;
	background: #fff;
	color: red;
}

通过在onmousebover和onmouseout方法里面利用 对象.属性名="hover"来为对象添加提前设置好的hover样式，从而实现鼠标的移入/移出改变元素样式操作

5.style.display=style.display == “block” ? “none” : “block”;

var style=oIme.style;
	oBtn.onclick=function(){
		style.display=style.display == "block" ? "none" : "block";
	};
	oClose.onclick=function(){
		style.display="none";
	};

这是一个判断语句，=后边的语句是执行判断功能，等价于：
if(style.display==“block”){
style.display=“none”;
}else{
style.display=“block”;
}
最后把右边判断返回的结果赋值给右边的style.display

6.parseInt() 函数

parseInt() 函数可解析一个字符串，并返回一个整数。
语法：parseInt(string, radix)

string 必需。要被解析的字符串。
radix

可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。

如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

7.for循环中的this

for( var i=0; i<oLi.length ; i++){
      oLi[i].index = i ;        //对每个li添加一个自定义index属性
      oLi[i].onclick =  function(){
          for(var i=0; i<len ;i++){    //这里i不用换j,是因为这个for循环被点击函数包起来了
               oLi[i].className = '';
          }
          oLi[this.index].className = 'active';   //this.index指的就是当前li上的值,例如<li index=‘1’></li>
      }

这的this.index就指的是当前li上的下标值

8.实现显示/隐藏密码功能，及算法

这是界面显示以下是代码块及算法

<script type="text/javascript">
		window.onload=function(){
			var eye=document.getElementById("eye");
			var pwd=document.getElementById("pwd");
			var flag=0;//设置一个flag用于变换
			eye.onclick=function(){
				if(flag==0){ 
					/*
					如果flag=0，显示密码，同时改变flag的值为1，否则flag一直
					等于0，界面不会有变化； 同时改变图片路径为闭眼图片
					*/
					pwd.type="text";
					eye.src="images/open.png"
					flag=1;
				}else{
					/*
					如果flag！=0，显示密码，同时改变flag的值为0，否则flag一直
					等于1，界面不会有变化； 同时改变图片路径为睁眼图片
					*/
					pwd.type="password";
					eye.src="images/close.png"
					flag=0;
				}
			}
		}
	</script>