js中的Dom事件模型以及表格方面等内容

1、实现评论页面的制作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside{
width: 1000px;
margin: 0 auto;
border: 1px solid #E7EAEE;
overflow: hidden;
padding-bottom: 15px;
}

#outside h3{
width: 95%;
margin: 15px auto;
padding-bottom: 10px;
border-bottom: 1px solid #E7EAEE;
font-family: "宋体",sans-serif;
}

#outside .comment1{
width: 95%;
margin: 10px auto;
color: #BBBBBB;
font-size: 12px;
border-bottom: 1px dashed #E7EAEE;
font-family: "宋体",sans-serif;
}

#outside .comment1 time{
float: right;
}

#outside .comment1 span{
color: #5979B2;
margin-left: 5px;
font-weight: bold;
}

#outside .comment1 p{
font-size: 16px;
color: black;
}

#outside h4{
width: 95%;
margin: 15px auto;
color: #404E73;
font-size: 16px;
font-weight: bold;
font-family: "宋体",sans-serif;
}

#outside #addComment{
width: 95%;
margin: 0 auto;
font-size: 12px;
color: #BBBBBB;
}

#outside #name{
width: 200px;
border: 1px solid #D9E2EF;
}

#outside #comContent{
width: 800px;
height: 100px;
resize: none;
border: 1px solid #D9E2EF;
vertical-align: text-top;
}

#outside button{
width: 100px;
height: 30px;
background-color: #2D46A3;
color: white;
border: hidden;
float: right;
margin: 15px 100px;
}
</style>
</head>

<body>

<div id="outside">
<h3>最新评论</h3>

<div id="comment">
<div id="comment1" class="comment1">
腾讯网友
<span>陈二狗的妖孽人生</span>
<time>2010年10月5日 19:21:12</time>
<p>
厉害了 我的哥！！
</p>
</div>
</div>

<h4>发表评论</h4>

<div id="addComment">
昵&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" id="name" />
<br /><br />
评论内容:<textarea id="comContent"></textarea>

<button onclick="addComment()">提交评论</button>
</div>
</div>

</body>

<script type="text/javascript">
var idNum = 1;
function addComment(){
idNum++;
var inputValue = document.getElementById("name").value;
var textValue = document.getElementById("comContent").value;

if(inputValue==""||textValue==""){
alert("昵称和评论内容不能为空！！");
return;
}

var comContent1 = document.getElementById("comment1");
var newComment = comContent1.cloneNode(true);
newComment.setAttribute("id","comment"+idNum);
newComment.getElementsByTagName("span")[0].innerText = inputValue;
newComment.getElementsByTagName("p")[0].innerText = textValue;

var commentDiv = document.getElementById("comment");
commentDiv.appendChild(newComment);

document.getElementById("name").value = "";
document.getElementById("comContent").value = "";

}

</script>

</html>

2、模仿删除修改用户

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#table{
width: 500px;
border-collapse: collapse;
}
#table td,th{
border: 1px solid #BCBCBC;
height: 30px;
}
#table th{
color: white;
background-color: #95B3D7;
}
#table td{
color:#3F3F3F;
font-size: 12px;
}
#table td:first-child{
text-align: center;
}
#table td:last-child{
text-align: center;
color: #0662AE;
}
</style>

<script type="text/javascript">

function deleteRow(num){
var table = document.getElementById("table");
var row = table.rows[num];
var isDel = confirm("确定要删除吗？");
if(!isDel){
alert("取消删除！");
return;
}

for (var i=0;i<row.cells.length;i++) {
row.cells[i].style.cssText = "text-decoration: line-through;color:#929292;"
}

row.cells[row.cells.length-1].lastElementChild.removeAttribute("onclick");
row.cells[row.cells.length-1].firstElementChild.removeAttribute("onclick");
row.lastElementChild.firstElementChild.innerHTML = "修改";
row.setAttribute("contenteditable","false");
}

function updateRow(num){
var table = document.getElementById("table");
var row = table.rows[num];
var spanText = row.cells[row.cells.length-1].firstElementChild;

if(spanText.innerText=="修改"){
spanText.innerText="完成";

for (var i=0;i<row.cells.length-1;i++) {
row.cells[i].setAttribute("contenteditable","true");
}

}else{
spanText.innerText="修改";
for (var i=0;i<row.cells.length-1;i++) {
row.cells[i].setAttribute("contenteditable","false");
}
}
}
var isAlt = 0;
var isEnt = 0;
document.onkeydown = function(e){
if(e.keyCode==18){
isAlt = 1;
}
if(e.keyCode==13){
isEnt = 1;
}
var table = document.getElementById("table");
var rows = table.rows;
if(isEnt==1&&isAlt==0){
for (var i=1;i<rows.length;i++) {
for (var j=0;j<rows[i].cells.length-1;j++) {
rows[i].cells[j].setAttribute("contenteditable","false");
}
rows[i].lastElementChild.firstElementChild.innerText
="修改";
}
}else if(isEnt==1&&isAlt==1){
document.activeElement.innerHTML = document.activeElement.innerHTML+"<br/>";
}
}

document.onkeyup = function(e){
if(e.keyCode==13){
isEnt = 0;
}else if(e.keyCode==18){
isAlt = 0;
}
}
/*
*【JS中的DOM0事件模型】
* 1、内容模型：直接将函数名作为HTML标签的某个事件属性的属性值;
* rg:<button onlick="func()">按钮</button>
*2、脚本模型：在JS脚本中通过事件属性进行绑定 ；
* eg：window.onlead = function（）{}
* 局限性：同一个节点只能绑定一个同类型事件
*
* 【JS中的DOM2事件模型】
* 1、添加事件绑定：btn1.addEvent（"onlick"函数）
* 其他浏览器：btn1btn1.addEventListener（"click"函数 ，true/false）；
* 参数三：false（默认）;表示事件冒泡，true:表示事件捕获
* 兼容写法：if（btn1btn1.addchEvent）{
* btn1.btn1.addchEvent
* }else{
* btn1.btn1.addEventListener（）
* }
* 优点：同意节点，可以添加多个同类型事件的监听器
*
* 2、取消事件绑定：
* 注 如果取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，二不能使用匿名函数，
* 因为在取消事件绑定时，需传入函数名
* removeEventListener（“click，函数名）
* detachEvent("onclick"函数名)
*
* 3、阻断事件冒泡 :
* （1） IE浏览器中将e.canceBubble属性设为true
* 其他浏览器：调用e.stopPropagetion（）;方法
* 兼容写法：function myParagraphEventHandler(e) {
* e = e || window.event;
* if (e.stopPropagation) {
* e.stopPropagation(); //IE以外
* } else {
* e.cancelBubble = true; //IE
* }
* }
* （2） 阻止默认事件：
* IE浏览器中：将e.returnValue属性设为false；
* 其他浏览器：调用e.preventDefault();方法
* 兼容写法：function eventHandler(e) {
* e = e || window.event;
* // 防止默认行为
* if (e.preventDefault) {
* e.preventDefault(); //IE以外
* } else {
* e.returnValue = false; //IE
* }
* }
*
*
*
* */
window.onlead = function(){
var btn1 = document.getAnonymousElementById("btn1");
console.log(btn1.attachEvent)
console.log(btn1.addEventListener);
}

window.onlead = function(){
var btn1 = document.getElementById("btn1")
btn1.addEventListener("click",function(){
alert(1);
false})

}
window.onlead = function(){
alert(2);
}

</script>

</head>
<body>
<button id="btn1">点击我弹个窗</button>
<button id="btn1">点击我就是不让它弹</button>
/*
【JS中的事件流】
1、元素冒泡：当某DOM元素触发 某事件是时 会从当前DOM元素开始，逐个触发其祖先元素的同类事件，指导DOM根节点
DOM模型 均为冒泡事件
IE中使用，attachEvent（）添加的事件 均为冒泡
其他浏览器，.addEventListener添加事件 ，当三个事件参数为false时 为冒泡
2、事件捕获 ：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，知道触发到当前元素为止
只能使用.addEventListener添加事件，并设置四三个参数为ture时，才能进行捕获当前元素

冒泡：当前元素---根节点 捕获：根节点---当前元素

*/
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

<body>

<table id="table">
<tr>
<th>用户ID</th>
<th>用户名</th>
<th>手机号码</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr>
<td>zhangsan</td>
<td>张三</td>
<td>13888888888</td>
<td>可用</td>
<td>
<span onclick="updateRow(1)">修改</span>
<span onclick="deleteRow(1)">删除</span>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>张三</td>
<td>13888888888</td>
<td>可用</td>
<td>
<span onclick="updateRow(2)">修改</span>
<span onclick="deleteRow(2)">删除</span>
</td>
</tr>
<tr>
<td>zhangsan</td>
<td>张三</td>
<td>13888888888</td>
<td>可用</td>
<td>
<span onclick="updateRow(3)">修改</span>
<span onclick="deleteRow(3)">删除</span>
</td>
</tr>
</table>

</body>
</html>

3、投票网页的制作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
text-decoration: none;
}
#vote{
margin: 50px;
border: 2px solid #80ABD7;
font-size: 12px;
padding-bottom: 20px;
}
#vote .top{
line-height: 30px;
background-color: #80ABD7;
color: white;
padding-left: 10px;
}
#vote #bottom{
margin-left: 60px;
padding: 15px 0px 15px 0px;
}
#vote #button{
margin-left: 60px;
}
#vote #button button{
padding: 3px 13px;
background-color: #4A6991;
color: white;
font-weight: bold;
border: none;
border-radius: 4px;
}
#vote #button a{
font-size: 12px;
margin-left: 10px;
}
#vote #bottom .div{
margin-top: 15px;
}

</style>
</head>
<body>
<section id="vote">
<p class="top">添加新投票</p>
<div id="bottom">
<span>投票内容：</span>
<input type="text" name="content" id="content" value="" />
<br /><br />
<span>投票类型：</span>
<input type="radio" name="radio" id="radio1" value="1" checked="checked"/>单选
<input type="radio" name="radio" id="radio2" value="" />多选
<div id="div1" class="div">
<span id="span1">投票选项：</span>
<input type="text" name="input1" id="input1" value="" />
</div>
<div id="div2" class="div">
<span id="span2">　　　　　</span><input type="text" name="input1" id="input2" value="" />
</div>
<!--<br /><br />
　　　　　<input type="text" name="input1" id="input3" value="" /> <a href="#">删除</a>
<br /><br />
　　　　　<input type="text" name="input1" id="input4" value="" /> <a href="#">删除</a>-->

</div>
<div id="button">
<button>确定<button>
<a href="#" style="text-decoration: underline;" id="big" onclick="more()">增加选项</a>
<a href="#" id="small" onclick="close()">取消操作</a>
</div>
<section>
</body>
<script type="text/javascript">
var div2=document.getElementById("div2");
var voteBottom=document.getElementById("bottom");
var idNum=2;
function more(){
idNum++;
var divNew=div2.cloneNode("div2");
divNew.setAttribute("id","div"+idNum);
var divNewHTML=divNew.innerHTML;
divNew.innerHTML=divNewHTML+"<span id=‘shanchu‘ style=‘color:blue;‘ onclick=‘delate("+idNum+")‘>删除</span>";
voteBottom.appendChild(divNew);
}

function delate(num){
var divDelate=document.getElementById("div"+num);
divDelate.style.display="none";

}

function close(){
window.closed;
}

console.log(document.styleSheets);

</script>
<html>

时间： 2024-10-17 12:15:04

js中的Dom事件模型以及表格方面等内容的相关文章

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

js中的DOM事件与对象

概念图 document.getElementById("bb"); 根据id找到bb,只能找一个哦 var aa = document.getElementById("bb"); 设一个变量aa,getElemenById,根据id找到bb,并赋值给aa: var div2 = document.getElementsByClassName("bb")[0]; 根据classname寻找到bb,并赋值给变量div2:找到的是一个数组哦: var

JS中的DOM操作和事件

[DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点: 可以使用getElement系列方法,取到元素节点. [查看元素节点] 1.getElementById:通过id取到唯一节点.如果ID重名,只能取到第一个. getElementsByName(): 通过name属性   getElementsByTagName(): 通过标签名   getElementsByClassName()

DOM事件模型学习笔记

下面的内容属于阅读笔记,其中涉及大量内容来自于PPK的博客的内容,如果你要跟随我的脚步领略大家风采,那么就从Introduction to Events开始阅读吧. 现代的前端开发应该是会严格遵守 html 展示文档内容构成,css 渲染页面效果,javascript 提供交互 浏览器提供交互行为可以追溯到Netscape公司在其第二个版本中支持javascript语言,随后其与微软之间的浏览器大战,以及w3c标准制定的落后,导致至今一直被诟病的浏览器兼容问题,而这些不兼容中关于DOM事件模型的

【JS】DOM事件模型

DOM事件模型主要包含4个方面的内容,分别是: 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下: 首先,什么是DOM?文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API).一般的,支持Javascript的所有浏览器都支持DOM. 在DOM眼中,HTML跟XML一样是一种树形结构的文档,<html>是根(root)节点,<head>.<title>.<body>是<

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端求职面试经历,其中提到了面试官会考察手写一个简单的事件模型: "如果上述都ok的话,那么极有可能要求让你[实现事件模型],即写一个类或是一个模块,有两个函数,一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数." 如果了解观察者模式,那么事件模型应该不算太难.本着深入钻研的精神,我试着来

DOM事件模型

DOM 首先,DOM全称是Document Object Model,即文档对象模型.DOM是W3C的标准,定义了访问 HTML 和 XML 文档的标准. “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” DOM事件 DOM使Javascript有能力对HTML上的事件做出反应.这些事件包括鼠标键盘的点击事件.移动事件以及页面中内容的变化等.HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要

javascript的IE事件和DOM事件模型

通用的事件模型: 1.是在HTML页面绑定 <button id="button" onclick="function();">按钮</button> 2.在javascript脚本文件中绑定事件处理 document.getElementById('button').onclick = function; IE中的事件模型 1.使用script for绑定(这个绑定很少用) <script for="btn1" e

【javascript总结】javascript的IE事件和DOM事件模型

通用的事件模型 1.是在HTML页面绑定 <button id="button" onclick="function();">按钮</button> 2.在javascript脚本文件中绑定事件处理 document.getElementById('button').onclick = function; IE中的事件模型 1.使用script for绑定(这个绑定很少用) <script for="btn1" ev