程序员的知识教程库

网站首页 > 教程分享 正文

javaScript-第三章（js第三章上机）

henian88 2024-10-12 03:48:34 教程分享 2 ℃ 0 评论

一、认识DOM对象模型

DOM：Document Object Model（文档对象模型）

节点与节点的关系


1、访问节点，使用getElement系列方法访问指定节点

getElementById()、 getElementsByName()、

getElementsByTagName()；

2、根据层次关系访问节点：

属性名称 描述

parentNode 返回节点的父节点

childNodes 返回子节点集合，childNodes[i]

firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild 返回节点的最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点


elment属性：

属性名称 描述

firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastElementChild 返回节点的最后一个子节点

nextElementSibling 下一个节点

previousElementSibling 上一个节点


节点信息表示：

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型


操作节点的属性：

getAttribute("属性名")

setAttribute("属性名","属性值")


创建和插入节点：

名称 描述

createElement( tagName)创建一个标签名为tagName的新元素节点

A.appendChild( B)把B节点追加至A节点的末尾

insertBefore( A,B )把A节点插入到B节点之前

cloneNode(boolean)复制(克隆)某个指定的节点



删除和替换节点：

名称描述

removeChild( node)删除指定的节点

replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点


操作节点样式：

改变样式的属性

style属性

HTML元素.style.样式属性＝"值"；


className属性

HTML元素.className="样式名称"；


二、示例展示

1.轮播图示例

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>轮播图显示</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}


#outer {

width: 300px;

margin: 50px auto;

padding: 10px;

background-color: greenyellow;

text-align: center;

}


#outer>img {

width: 300px;

height: 300px;

}

</style>

<script>

window.onload = function () {

// 点击按钮切换图片

var prev = document.getElementById("prev");

var next = document.getElementById("next");

// 要切换图片就要修改img标签的src属性

var img = document.getElementsByTagName("img")[0];

var imgArr = ["img/tou01.jpg", "img/tou02.jpg", "img/tou03.jpg", "img/tou04.jpg"];

// 创建一个变量，来保存当前正在显示的图片的索引

var index = 0;

// 设置提示文字

var info=document.getElementById("info");


// 分别为两个按钮绑定单机响应函数 上一张函数


prev.onclick = function () {

index--;

// 判断index是否小于0

if (index < 0) {

index=imgArr.length-1;

}

img.src = imgArr[index];

info.innerHTML="共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

// 下一张函数

next.onclick = function () {

index++;

if (index > imgArr.length - 1) {

index = 0;

}

img.src = imgArr[index];

// 当我在点击按钮以后在重新执行一遍

info.innerHTML="一共"+imgArr.length+"张图片"+"当前是第"+(index+1)+"张";

}

}


</script>


<body>

<div id="outer">

<p id="info">一共4张图片当前是第1张</p>

<img src="img/tou01.jpg" alt="" />


<button id="prev"><上一张</button>

<button id="next">下一张></button>

</div>


</body>


</html>


2.论坛发帖示例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>制作课工场论坛发贴</title>

</head>

<style>

*{margin: 0; padding: 0; font-family: "Arial", "微软雅黑";}

ul,li{list-style: none;}

.bbs{margin: 0 auto; width: 600px; position: relative;}

header{padding: 5px 0; border-bottom: 1px solid #cecece;}

header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}

.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}

.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}

.post select{width: 200px; height: 30px;}

.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}

.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}


.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;

overflow: hidden;}

.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}

.bbs section ul li div img{ border-radius:50%; width: 60px;}

.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}

.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }

.bbs section ul li p span{padding-right:20px;}

</style>

<body>

<div class="bbs">

<header><span onclick="showDiv();">我要发帖</span></header>

<section>

<ul id="showContent"></ul>

</section>

<div class="post" id="showSubmit">

<input class="title" placeholder="请输入标题（1-50个字符）" id="title">所属版块：

<select id="section">

<option>请选择版块</option>

<option value="电子书籍">电子书籍</option>

<option value="新课来了">新课来了</option>

<option value="新手报到">新手报到</option>

<option value="职业规划">职业规划</option>

</select>

<textarea class="content" id="content"></textarea>

<input class="btn" value="发布" onclick="publish();">

</div>

</div>

</body>

<script src="js/bbs.js"></script>

</html>

// 全局对象

var imgs = new Array("tou01.jpg", "tou02.jpg", "tou03.jpg", "tou04.jpg");

// 显示发帖div

function showDiv() {

document.getElementById("showSubmit").style.display = "block";

}


// 点击发布添加内容到Li


function publish() {

// 获得随机头像的数组下标

var index = Math.floor(Math.random() * 4);

// 创建li节点

var tvLi = document.createElement("li");

// 创建div节点

var tvDiv = document.createElement("div");

// 创建img图片节点

var tvImg = document.createElement("img");


// 设置图片节点src属性

tvImg.setAttribute("src", "../threeClass/img/" + imgs[index]);


// div添加图片为子节点

tvDiv.appendChild(tvImg);

// 创建h1标签节点


var tvh1 = document.createElement("h1");

// 取得发布div框里填充的标题的值填充到h1标签

var tvTitle = document.getElementById("title").value;

tvh1.innerText = tvTitle;

// 创建一个P标签节点

var tvP = document.createElement("p");

// 创建两个span标签节点

var tvSpanOne = document.createElement("span");

var tvSpanTwo = document.createElement("span");


// 第一个span标签取填充div里的下拉列表框所选的值

var tvSelect = document.getElementById("section").value;

tvSpanOne.innerText = "板块：" + tvSelect;


// 第二个span标签取当前系统时间

var date = new Date();

var str = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate() + "" + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

tvSpanTwo.innerText = "时间是：" + str;


// 两个span标签追加到p标签节点里

tvP.appendChild(tvSpanOne);

tvP.appendChild(tvSpanTwo);


// 把div、h1、p 、标签追加到li里


tvLi.appendChild(tvDiv);

tvLi.appendChild(tvh1);

tvLi.appendChild(tvP);


// 把添加好的li在插入到ul标签节点里

var oldUL = document.getElementById("showContent");

// 把新添加的li节点插入到捞的li节点之前

oldUL.insertBefore(tvLi, oldUL.firstChild);


// 清除div里填充过的内容，如标题和内容部分

document.getElementById("title").value = "";

document.getElementById("content").value = "";


// 设置发布div隐藏

document.getElementById("showSubmit").style.display = "none";

}


效果图展示：file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

file:///D:/ruanjian/VS/JS/threeClass/lunbotu.html

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表