学完前端基本知识的感想

相关概念-HTML CSS JS
HTML：内容层—表示某个标签在页面中是什么角色
CSS：样式层—表示某个标签在页面中呈现什么样式
JavaScript：行为层—页面与用户的交互行为
Html只负责文档的结构，他描述了页面的内容和结构。
内容的呈现则由Css控制，他描述了页面的表现与展示效果。JavaScript则是负责网页的功能与行为，如与用户的交互。

接下来我将展示一些自己写的代码与效果。

这个是点击变换以及移动UL的子类以及添加UL子类。
window.οnlοad=function(){
//点击改变div的名字
var divs = document.getElementsByTagName(“div”);
for(var i=0;i<divs.length;i++){
divs[i].οnclick=function(){
this.innerText=“你真帅啊朋友！”;
this.id=new Date();
}
}
//删除ul的子节点
var ul = document.getElementsByClassName(“ul”)[0];
var childs = ul.getElementsByTagName(“li”);
for(var j=0;j<childs.length;j++){
childs[j].οnclick=function(){
this.remove();
}
}
//移动
var move = document.getElementById(“move”);
move.οnclick=function(){
var li = document.getElementsByTagName(“li”)[0];
ul.appendChild(li);
}

			var add = document.getElementById("add");
			add.onclick=function(){
				//弹窗 输入名字
				var alue = prompt("请输入名称：");
				//创建节点
				var li = document.createElement("li");
				//li添加事件
				li.onclick=function(){
					this.remove();
				}
				//设置节点名字
				li.innerText=alue;
				//添加到ul作为子节点
				ul.appendChild(li);
			}
		}

这个是鼠标点击变颜色以及鼠标放图片是图片变大弹出。
//点击改变背景颜色
var a = document.getElementById(“a”);
a.οnclick=function(){
var old = this.id;
if(old==“a”){
this.id=“b”;
}else{
this.id=“a”;
}
}
//获取所有图片
var imgs = document.getElementsByClassName(“img”);
//为每一张图增事件
for(var i=0;i<imgs.length;i++){
//获取隐藏的img
var hid = document.getElementById(“hid”);
//悬浮事件
imgs[i].οnmοuseοver=function(){
//获取当前img的src
var src = this.getAttribute(“src”);
//吧隐藏的img的src换为获取的src
hid.setAttribute(“src”,src);
//改变样式
hid.className=“dis”;
this.οnmοusemοve=function(e){
//获取鼠标坐标
var x = e.clientX+10;
var y = e.clientY+10;
hid.style=“left:”+x+“px;top:”+y+“px”;
}
}
//鼠标移开的效果
imgs[i].οnmοuseοut=function(){
//让应该隐藏的img隐藏
hid.className=“hid”;
}

最后一个是鼠标点击互相交换名字。
//获取父类
var beauty = document.getElementsByClassName(“beauty”)[0];
//获取子类
var childs = beauty.getElementsByTagName(“li”);
var node;
//与上同
var ugly = document.getElementsByClassName(“ugly”)[0];
var childs1 = ugly.getElementsByTagName(“li”);
var node1;
var i = 0;
for(var j = 0; j < childs.length; j++) {
childs[j].onclick = function() {
//点击选中就克隆
node = this.cloneNode(true);
var test;
var test1;
//循环找到选中的ID
for(var k = 0; k < childs.length; k++) {
if(node.isEqualNode(childs[k]) == true) {
i = k;
//找到ID后，根据ID获取子类的内容
test = document.createTextNode(childs[k].innerText);
test1 = document.createTextNode(childs1[k].innerText);
}
}
//最后相互替换
childs[i].replaceChild(test1, childs[i].childNodes[0]);
childs1[i].replaceChild(test, childs1[i].childNodes[0]);
}
}
以上是学习的最基本内容，更多内容等待学习，更多新天地等待进入。