Javascript + Dom知识点总结

1.用Javascript声明数组和字典的方式

// 数组声明

var arr = new Array();

arr["0"] = "1";

arr["1"] = "2";

arr["2"] = "3";

arr["3"] = "4";

// 简化的声明方式

]; // 普通数组,用中括号隔开

};

alert(arr2["hello"]); // 推荐用这种索引器的方式访问

alert(arr2.hello); // 不推荐

2.Windows对象

window.history.back();

// 阻止打开新的地址事件的发生

window.event.returnValue = false;

3.自动提交表单

<selectonchange="document.getElementById('form1').submit()">

<option>北京</option>

<option>上海</option>

<option>广州</option>

</select>

4.获取所有的标签

var links=document.getElementsByTagName("a");

5.鼠标悬停高亮显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">

function initEvent() {

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

var trs = tableMain.getElementsByTagName("tr");

; i < trs.length; i++) {

var tr = trs[i];

//tr.onclick = trOnClick;

tr.onmouseover = trOnClick;

tr.style.cursor = "pointer";

}

}

function trOnClick() {

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

var trs = tableMain.getElementsByTagName("tr");

; i < trs.length; i++) {

var tr = trs[i];

if (tr == this) {//遍历tr,判断当然tr==点击的tr时,背景色就变为黄色

tr.style.background = "yellow";

}

else {

tr.style.background = "white";

}

}

}

</script>

</head>

<body onload="initEvent()">

<table id="tableMain">

</td></tr>

</td></tr>

</td></tr>

</td></tr>

</td></tr>

</table>

</body>

</html>

6.功表格隔行高亮显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>隔行变色</title>

<script type="text/javascript">

function showIt() {

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

var trs = tableMain.getElementsByTagName("tr");

; i < trs.length; i++) {

) {

var tr = trs[i];

tr.style.background = "yellow";

}

}

}

</script>

</head>

<body onload="showIt()">

<table id="tableMain">

</td></tr>

</td></tr>

</td></tr>

</td></tr>

</td></tr>

</table>

<input type="button" value="Click Me" onclick="showIt()" />

</body>

</html>

7.监听Focus事件

<script type="text/javascript">

function initEvent() {

var inputs = document.getElementsByTagName("input");

; i < inputs.length; i++) {

var input = inputs[i];

//只监听文本框,不监听button

if (input.type == "text") {

input.onfocus = inputOnFocus;//此处可用匿名函数实现

input.onblur = inputOnBlur;

}

}

}

function inputOnFocus() {

this.style.background = "yellow";

}

function inputOnBlur() {

this.style.background = "white";

}

</script>

8.开关灯效果

<style type="text/css">

.day

{

background-color:White;

}

.night

{

background-color:Black;

}

</style>

<script type="text/javascript">

function switchLight() {

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

if (document.body.className == "day") {

document.body.className = "night";

btnSwitch.value = "开灯";

}

else {

document.body.className = "day";

btnSwitch.value = "关灯";

}

}

</script>

9.文本框onblur事件

<script type="text/javascript">

function initEvent() {

var inputs = document.getElementsByTagName("input");

; i < inputs.length; i++) {

var input = inputs[i];

input.onblur = inputOnBlur; //设置inputOnBlur函数为input标签的onblur事件的响应函数

}

}

function inputOnBlur() {//inputOnBlur是onblur的响应函数,而不是被响应函数调用的函数,所以可以用this来取得发生事件的控件对象

){

this.style.background = "red";

}

else{

this.style.background = "white";

}

}

</script>

10.实现Div的隐藏与展示

<a href="http://www.baidu.com"onmouseout="document.getElementById('tipsDiv').style.display='none'"
onmouseover="document.getElementById('tipsDiv').style.display=''">百度</a>

11.同上,切换Div的显示

<htm>

<head>

<title>切换div</title>

<scripttype="text/javascript">

function toggleDiv(cb) {

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

if (cb.checked) {

//如果勾上了check

div1.style.display = '';//清空表示去掉div的none属性

}

else {

div1.style.display = "none";//没选中,隐藏div

}

}

</script>

</head>

<body>

<inputtype="checkbox"id="cbShow"onclick="toggleDiv(this)"/><labelfor="cbShow">显示高级选项</label>

<divid="div1"style="display:none;">这里是一些高级选项值

百度是<fontcolor="red">李彦宏</font>创建的一个中文搜索引擎,网址是<ahref="http://www.baidu.com/">百度</a>baidu.com<br/>

<imgalt="Baidu"src="../mm/00_09.jpg"/><br/>

</div>

</body>

</html>

12.动态创建层Div

<html>

<head>

<title></title>

<styletype="text/css">

.tooltips

{

background-color:Yellow;

border-style:solid;

border-width:1px;

border-color:Red;

}

</style>

<scripttype="text/javascript">

function initEvent() {

var links = document.getElementsByTagName("a");

//遍历所有的a

; i < links.length; i++) {

var link = links[i];

link.onmousemove = linkOnMouseOver;

link.onmouseout = linkOnMouseOut;

}

}

function linkOnMouseOver() {

var div = document.createElement("div");//动态创建层

div.style.position = "absolute"; //设置div属性

div.className = "tooltips";

div.style.top = window.event.clientY;

div.style.left = window.event.clientX;

div.innerHTML = "abcdefghijkjl<font color='red'>111222333</font>";

document.body.appendChild(div); //createElement只是创建了一个内存模型,只有appendChild到一个可视元素上才会被显示出来

}

function linkOnMouseOut() {

var divs = document.getElementsByTagName("div");

; i < divs.length; i++) {

var div = divs[i];

if (div.className == "tooltips") {

//document.body.removeChild(div);

div.style.display = "none";//隐藏的层会造成内存泄露

}

}

}

</script>

</head>

<bodyonload="initEvent()">

<ahref="#"title="新浪网">新浪网</a><br/><br/><br/>

<ahref="#"title="百度网">百度网</a><br/><br/><br/>

<ahref="#"title="搜狐网">搜狐网</a><br/><br/><br/>

</body>

</html>

13.加法计算器

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>加法计算器</title>

<scripttype="text/javascript">

function calcClick() {

var value1 = document.getElementById("txt1").value;

var value2 = document.getElementById("txt2").value;

);

);

document.getElementById("txtResult").value = value1 + value2;

}

</script>

</head>

<body>

<inputtype="text"id="txt1"/> + <inputtype="text"id="txt2"/>

<inputtype="button"value=" = "onclick="calcClick()"/>

<inputtype="text"id="txtResult"readonly="readonly"/>

</body>

</html>

14.点谁谁呜呜

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>getElementsByTagName点谁谁哭!</title>

<scripttype="text/javascript">

function initEvent() {

var inputs = document.getElementsByTagName("input");

; i < inputs.length; i++) {

var input = inputs[i];

input.onclick = btnClick;// 注意,不加括号,表示动态添加事件给onclick事件

}

}

function btnClick() {

var inputs = document.getElementsByTagName("input");

; i < inputs.length; i++) {

var input = inputs[i];

//window.event.srcElement, 取得引发事件的控件

if (input == window.event.srcElement) {

input.value = "呜呜";

}

else {

input.value = "哈哈";

}

}

}

</script>

</head>

<bodyonload="initEvent()">

<inputtype="button"value="哈哈"/>

<inputtype="button"value="哈哈"/>

<inputtype="button"value="哈哈"/>

<inputtype="button"value="哈哈"/>

<inputtype="button"value="哈哈"/>

</body>

</html>

15.美女时钟

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>自制美女时钟</title>

<scripttype="text/javascript">

function switchLight() {

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

if (document.body.className == "day") {

document.body.className = "night";

btnSwitch.value = "开灯";

}

else {

document.body.className = "day";

btnSwitch.value = "关灯";

}

}

) {

return"0" + i;

}

else {

return i;

}

}

function Refresh() {

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

if (!imgMM) {//未加载

return;

}

// 利用小时_秒来拼接图片的文件名

var now = new Date();

var filename = fill2Len(now.getHours()) + "_" + fill2Len(now.getSeconds()) + ".jpg";

imgMM.src = "../mm/" + filename;

}

);

</script>

<styletype="text/css">

#imgMM

{

margin-left:300px;

margin-top:100px;

}

body

{

background:black;

}

.day

{

background-color:White;

}

.night

{

background-color:Black;

}

</style>

</head>

<bodyonload="Refresh()"class="night">

<inputtype="button"id="btnSwitch"value="开灯"onclick="switchLight()"/>

<imgid="imgMM"src=""alt="每一秒都有一位美女告诉你现在是几点"/>

</body>

</html>

16.强制阅读注册页面

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>注册</title>

<scripttype="text/javascript">

;// 全局变量

function countDown() {

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

var intervalID;

if (btnReg) { //如果控件可用,进行下面的操作。必须添加判断,如果网速非常慢的话,可能定时器运行的时候,控件还没有加载。

) {

btnReg.value = "同意";

btnReg.disabled = ""; //btn可用| btnReg.disabled = false;

clearInterval(intervalID);// 停止计时器

}

else {

btnReg.value = "请仔细阅读注册协议(还剩" + leftSeconds + "秒!)";

leftSeconds--;

}

}

}

);

</script>

</head>

<body>

<textarearows="*"cols="30"></textarea>

<inputtype="button"value="同意"id="btnReg"disabled="disabled"/>

</body>

</html>

17.动态创建元素

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>createLink</title>

<scripttype="text/javascript">

function createLink() {

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

var link = document.createElement("a");

link.href = "http://www.baidu.com";

link.innerText = "百度"; // 不是value

divMain.appendChild(link);

var link = document.createElement("<a href='http://www.163.com'>163</a>");

link.innerHTML = "163";

document.body.appendChild(link);

var label = document.createElement("label");

label.setAttribute("for", "username");

//设置Dom元素的特殊属性,label for 等,还可以设置自定义HTML属性,虽然没用,但是可以

label.setAttribute("xuehao","123456");

label.innerHTML = "userName";

document.body.appendChild(label);

}

</script>

</head>

<body>

<divid="divMain"></div>

<inputtype="button"value="Create"onclick="createLink()"/>

<inputtype="text"id="username"/>

</body>

</html>

18.动态添加一个input

<scripttype="text/javascript">

function createInput() {

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

divMain.innerHTML = "<input type='button' value='我是新来的' />";

}

</script>

19.动态创建button

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>动态创建Dom</title>

<scripttype="text/javascript">

function btnClick() {

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

var input = document.createElement("input"); // 创建一个标签名然后设置标签的属性

//var input = document.createElement("<input type='button' value='Hello' />");

//根据HTML代码创建元素,省的一个一个的属性赋值,比较粗犷的方式

input.type = "button";

input.value = "我是动态创建的按钮";

divMain.appendChild(input);// 添加到div中

}

</script>

</head>

<body>

<divid="divMain"></div>

<inputtype="button"value="Click Me"onclick="btnClick()"/>

</body>

</html>

20.动态创建Table

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>动态创建表格</title>

<scripttype="text/javascript">

function loadKey() {

var data = {

"百度": "http://www.baidu.com",

"163": "http://www.163.com",

"腾讯": "http://www.qq.com",

"博客园": "http://www.cnblogs.com"

};

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

// 遍历dictory ,取出数据

for (var key in data) {

var value = data[key]; //通过key取value,key是前面的,value是后面的

/*var tr = tableLinks.insertRow(-1); //FF必须要-1这个参数

var td1 = tr.insertCell(-1);

td1.innerText = key;

var td2 = tr.insertCell(-1);

td2.innerHTML = "<a href='" + value + "'>" + key + "</a>";*/

var tr = document.createElement("tr");

var td1 = document.createElement("td");

//td1.innerText = key;// FF不支持innerText

td1.innerHTML = key;

tr.appendChild(td1);

var td2 = document.createElement("td");

td2.innerHTML = "<a href='" + value + "'>" + key + "</a>";

tr.appendChild(td2);

].appendChild(tr);

}

}

function loadValue() {

var data = {

"百度": "http://www.baidu.com",

"163": "http://www.163.com",

"腾讯": "http://www.qq.com",

"博客园": "http://www.cnblogs.com"

};

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

for (var key in data) {

var value = data[key]; // value is the name of site

);

); // -1表示插入单元格的位置,-1表示最后

td1.innerHTML = key; //FF does not surport innerText!!!

);

td2.innerHTML = "<a href='" + value + "'>"+ value +"</a>";//也可以用createElement做

}

}

</script>

</head>

<body>

<tableid="tableLinks"><tbody></tbody></table>

<tableid="tableLinks2"></table>

<inputtype="button"value="加载数据"onclick="loadKey()"/>

<inputtype="button"value="加载数据2"onclick="loadValue()"/>

</body>

</html>

21.无刷新评论

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无刷新评论</title>

<scripttype="text/javascript">

function addComment() {

var nickname = document.getElementById("nickname").value;

var comment = document.getElementById("comment").value;

//alert(nickname); alert(comment);

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

var tr = document.createElement("tr");//创建tr

var tdNickName = document.createElement("td");

tdNickName.innerText = nickname;

tr.appendChild(tdNickName); //把tdNickName附加到tr上

var tdComment = document.createElement("td");

tdComment.innerText = comment;

tr.appendChild(tdComment);

].appendChild(tr);

}

</script>

</head>

<body>

1.我一直觉的没有目的,没有归期的旅行才是最率性的旅行。跟着自己的心走,

美名曰一个人独自私奔。就这样一直走。跟着自己的心走,走遍千山万水,或许才是旅行的意义。<br/><br/>

2.有天苏东坡和佛印辩论。他问佛印:"你看我像什么?"佛印回:"像佛"。苏东坡又说:"你知道你在我眼中像什么?你看起来像堆牛粪!"

佛印笑而不答。苏东坡很是得意,回家告诉苏小妹:"今天我终于辩赢佛印。"

苏小妹听完后说:"佛印因为心中有佛,所以他看你像佛。你心中有牛粪,所以看别人像牛粪!

<p>评论区</p>

<tableid="tableComment">

<tbody>

<tr><td>老虎:</td><td>Yes.沙发!!!</td></tr>

</tbody>

</table>

<p></p>

昵称:<inputtype="text"id="nickname"/><br/>

<textareacols="*"rows="*"id="comment"></textarea><br/>

<inputtype="button"value="我要评论"onclick="addComment()"/>

</body>

</html>

22.走马灯效果MarqueeDemo

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>终于完成了一个跑马灯效果啊</title>

<scripttype="text/javascript">

function scrollLeft() {

var title = document.title;

//第一个字符

);

//剩下的字符

, title.length);

document.title = leftChar + firstChar;

}

function scrollRight() {

var title1 = document.title;

//最后一个字符

);

//剩下的字符

);

document.title = lastChar + leftChar;

}

</script>

</head>

<body>

<inputtype="button"value="向左滚动"onclick="timeID=setInterval('scrollLeft()', 500)"/>

<inputtype="button"value="向右滚动"onclick="timeID=setInterval('scrollRight()', 500)"/>

<inputtype="button"value="Stop"onclick="clearInterval(timeID)"/>

</body>

</html>

23.复制到粘贴板(仅IE有效)

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>UrlToClipBoard</title>

<scripttype="text/javascript">

function urlToClipboard() {

clipboardData.setData("Text", "我发现了一个好玩网页,很黄很暴力!你懂得!" + location.href);

alert("已经将网址复制到剪贴板中!Ctrl+V分享给好友吧!");

}

</script>

</head>

<body>

<inputtype="button"value="分享此文章给好友"onclick="urlToClipboard()"/>

</body>

</html>

24.单位取值、设值

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>单位问题</title>

<scripttype="text/javascript">

function incWidth() {

var oldWidth = document.getElementById("div1").style.width;

); //将字符串转化为数字

个px

oldWidth = oldWidth + "px";//把数字拼接成字符串

document.getElementById("div1").style.width = oldWidth;

}

</script>

</head>

<body>

<inputtype="button"value="单位1"style="width:50%;"/>

<divid="div1"style="width:50px; height:50px; border-style:solid; border-width:1px; border-color:Red;">

We respect your privacy and send this welcome e-mail only to our valued members. If you have not registered with mail.com,

please ignore this e-mail.

Now enter the world of mail.com where e-mailing is easier and more fun than ever. Take advantage of our many smart

and convenient

features - all free of charge! Because at mail.com, it's all about YOU!

</div>

<inputtype="button"value="取值"onclick="alert(document.getElementById('div1').style.width)"/>

<inputtype="button"value="设值"onclick="document.getElementById('div1').style.width='100px'"/>

<inputtype="button"value="自动加宽50px"onclick="incWidth()"/>

</body>

</html>

25.模拟登陆—弹出登陆对话框

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>模拟登陆</title>

<scripttype="text/javascript">

function showLogin() {

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

loginDiv.style.display = '';

}

function hideLogin() {

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

loginDiv.style.display = 'none';

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

imgClose.style.cursor = "pointer";

}

</script>

</head>

<body>

<ahref="javascript:showLogin()">登陆</a>

<divid="loginDiv"style="position:absolute; top:200px; left:200px; border-style:solid;

border-color:Blue; border-width:thin; display:none; width:400px;">

<imgonclick="hideLogin()"id="imgClose"alt=""src="http://hiphotos.baidu.com/fanyong511/abpic/item/7ca4760d46cacfb87acbe151.jpg"style="float:right;"/>

<table>

<tr><td><labelfor="username">用户名:</label></td><td><inputtype="text"id="username"/></td></tr>

<tr><td><labelfor="password">密码:</label></td><td><inputtype="password"id="password"/></td></tr>

</table>

</div>

</body>

</html>

26.复制文章自动添加出处(仅IE有效)

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>剪贴板处理Demo</title>

<scripttype="text/javascript">

function modifyClipboard() {

//首先取粘贴板中内容

var txt = clipboardData.getData("Text");

//接着修改剪贴板中内容,附加上版权声明

txt = txt + "。本文章来自于樊勇的博客。转载请注明出处:" + location.href;

//最后将内容设置会粘贴板中。

clipboardData.setData('Text',txt);

}

</script>

</head>

<body oncopy="setTimeout('modifyClipboard()',100)">

某人上课睡觉,老师怒了,就叫他到黑板上解题,准备当众羞辱他。才站起来,老师就开始酸他:"成绩那么差,还敢上课睡觉,

不知羞耻,就会睡觉..."结果某人漂亮的把题解出来了。老师顿时有点下不来台。

结果他自己走回座位,坐下淡淡的说:"我先睡一下,你待会还有不会的再问我。。。"太特么潇洒了!

</body>

</html>

27.动态放大层

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>动态放大层</title>

<styletype="text/css">

#div1

{

background-color:Yellow;

border:1px solid Red;

}

</style>

<scripttype="text/javascript">

var showIntervalID;

function showDiv() {

);

}

function incDiv() {

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

var oldWidth = div1.style.width;

进制的数字

);

var oldHeight = div1.style.height;

);

) {

//停止计时器

clearInterval(showIntervalID);

}

;

;

div1.style.width = oldWidth + "px";

div1.style.height = oldHeight + "px";

}

</script>

</head>

<body>

<divid="div1"style="width:20px;height:100px;">

冷笑话精选(@lengxiaohua) 一个大腹便便的中年男人对着起步的公交车猛喊,"师傅,师傅,等等我,等等我啊!"突然,

公交车一个人把头申出窗外喊到"悟空,别追了,回花果山去吧!"

http://t1.qpic.cn/

http://t.qq.com/p/

</div>

<inputtype="button"value="动态放大"onclick="showDiv()"/>

</body>

</html>

28.美女时钟—每一秒都有一位美女告诉你时间

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>美女时钟</title>

<scripttype="text/javascript">

function switchLight() {

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

if (document.body.className == "day") {

document.body.className = "night";

btnSwitch.value = "开灯";

}

else {

document.body.className = "day";

btnSwitch.value = "关灯";

}

}

位,即小时

) {

return"0" + i;

}

else {

return i;

}

}

function Refresh() {

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

if (!imgMM) {//未加载

return;

}

// 利用小时_秒来拼接图片的文件名,因为文件的格式为10_45.jpg

var now = new Date();

// 为测试方便,按秒来计算,实际运用中可替换为分钟

var filename = fill2Len(now.getHours()) + "_" + fill2Len(now.getSeconds()) + ".jpg";

imgMM.src = "../mm/" + filename;

}

秒刷新一次

);

</script>

<styletype="text/css">

#imgMM

{

margin-left:auto;

margin-right:auto;

}

body

{

background:black;

width:100%;

margin: 20 auto;

}

.day

{

background-color:White;

}

.night

{

background-color:Black;

}

</style>

</head>

<bodyonload="Refresh()"class="night">

<inputtype="button"id="btnSwitch"value="开灯"onclick="switchLight()"/>

<imgid="imgMM"src=""alt="每一秒都有一位美女告诉你现在是几点"/>

</body>

</html>

29.数据展示—隔行高亮显示

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>球队选择</title>

<scripttype="text/javascript">

function initEvent() {

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

var lis = document.getElementsByTagName("li");

; i < lis.length; i++) {

var li = lis[i];

li.onmouseover = function () {

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

var lis = document.getElementsByTagName("li");

; i < lis.length; i++) {

var li = lis[i];

li.style.cursor = "pointer";

if (li == this) {

li.style.background = "Yellow";

}

else {

li.style.background = "White";

}

}

};

li.onclick = function () {

var lis = document.getElementsByTagName("li");

; i < lis.length; i++) {

var li = lis[i];

if (li == this) {

;

}

else {

;

}

}

};

}

}

</script>

</head>

<bodyonload="initEvent()">

<ulid="football">

<li>曼联</li>

<li>国足</li>

<li>朝鲜队</li>

<li>韩国队</li>

<li>日本鬼子</li>

</ul>

</body>

</html>

30.歌曲选择

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>歌曲选择</title>

<scripttype="text/javascript">

//全选

function selectAll() {

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

var inputs = playlist.getElementsByTagName("input");

; i < inputs.length; i++) {

var input = inputs[i];

if (input.type == "checkbox") { //只处理checkbox

input.checked = "checked";//全选

}

}

}

//全不选

function selectNone() {

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

var inputs = playlist.getElementsByTagName("input");

; i < inputs.length; i++) {

var input = inputs[i];

if (input.type == "checkbox") { //只处理checkbox

input.checked = "";//全不选

}

}

}

//反选

function reverseSelect() {

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

var inputs = playlist.getElementsByTagName("input");

; i < inputs.length; i++) {

var input = inputs[i];

if (input.type == "checkbox") { //只处理checkbox

//if (input.checked == "checked") {//以为被选中就是"checked",但是很不幸,经调试发现是true

if (input.checked == true) {

input.checked = "";

}

else {

input.checked = "checked";

}

}

}

}

</script>

</head>

<body>

<divid="playlist">

<inputtype="checkbox"id="p1"/><labelfor="p1">【梦中的额吉】</label>

<inputtype="checkbox"id="p2"/><labelfor="p2">【加勒比海盗】</label>

<inputtype="checkbox"id="p3"/><labelfor="p3">【幸福恋人】</label>

<p>

<inputtype="button"value="全选"onclick="selectAll()"/>

<inputtype="button"value="全不选"onclick="selectNone()"/>

<inputtype="button"value="反选"onclick="reverseSelect()"/>

</p>

</div>

</body>

</html>

31.权限选择

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>权限选择</title>

<scripttype="text/javascript">

//移动单个元素

function moveSelected(selectSrc, selectDest) { //源,目的地

//for (var i = 0; i < selectSrc.childNodes.length; i++) {

//注意删除的顺序,如果是从前往后会引起bug,必须从后往前删

; i--) {

var option = selectSrc.childNodes[i];

if (option.selected == true) {

selectSrc.removeChild(option);//从src中移除元素

option.selected = false;

selectDest.appendChild(option);//在dest中加入元素

}

}

}

//移动所有元素

function moveAll(selectSrc, selectDest) {

; i--) {

var option = selectSrc.childNodes[i];

selectSrc.removeChild(option);

selectDest.appendChild(option);

}

}

</script>

</head>

<body>

<selectid="select1"style="float:left; width:100px; height:120px;"multiple="multiple">

<option>添加</option>

<option>删除</option>

<option>修改</option>

<option>查询</option>

<option>打印</option>

</select>

<divstyle="float:left; width:5%;">

<inputtype="button"value=">"style="float:left; width:100%;"onclick="moveSelected(document.getElementById('select1'), document.getElementById('select2'))"/>

<inputtype="button"value="<"style="float:left; width:100%;"onclick="moveSelected(document.getElementById('select2'), document.getElementById('select1'))"/>

<inputtype="button"value=">>"style="float:left; width:100%;"onclick="moveAll(document.getElementById('select1'), document.getElementById('select2'))"/>

<inputtype="button"value="<<"style="float:left; width:100%;"onclick="moveAll(document.getElementById('select2'), document.getElementById('select1'))"/>

</div>

<selectid="select2"style="float:left; width:100px; height:120px;"multiple="multiple"></select>

</body>

</html>

32.省份选择—级联选择

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>省市选择</title>

<scripttype="text/javascript">

//模拟后台传过来的数据

var data = {

"山东": ["济南", "青岛", "烟台"],

"河南": ["洛阳", "郑州", "安阳"],

"河北": ["邯郸", "保定", "石家庄"],

"北京": ["朝阳区", "新城区", "西城区"],

"上海": ["浦东区", "徐汇区", "闵行区"]

};

//页面开始时加载省份数据

function loadProv() {

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

for (var key in data) {

var option = document.createElement("option");

option.value = key;

option.innerText = key;

prov.appendChild(option);

}

}

//切换省份加载城市名

function provChange() {

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

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

//首先清除旧内容--市列表

//city.options.length = 0;//这样可以

/*从前往后删,option元素会自动排序,删除不干净,有漏网之鱼!

for (var i = 0; i < city.childNodes.length; i++) {//遍历select所有子节点

var option = city.childNodes[i];

city.removeChild(option);

}

*/

//首先清除旧内容--市列表

//city.options.length = 0;//这样可以

//从后往前删

; i--) {//遍历select所有子节点

var option = city.childNodes[i];

city.removeChild(option);

}

//添加新的内容--城市名

var provName = prov.value;

if (provName == "none") {

return;//不添加

}

var cities = data[provName]; //根据省份名字取出城市名字,如["济南", "青岛", "烟台"]

; i < cities.length; i++) {

var option = document.createElement("option"); //创建city的option

option.value = cities[i];

option.innerText = cities[i];

city.appendChild(option);

}

}

</script>

</head>

<bodyonload="loadProv()">

<selectid="prov"onchange="provChange()"style="margin-right:30px;">

<optionvalue="none">请选择省</option>

</select>

<selectid="city"></select>

</body>

</html>

33.微软风格搜索框

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>微软风格搜索框</title>

<scripttype="text/javascript">

function inputBlur(keyword) {

) {

keyword.value = '输入搜索关键词';

keyword.style.color = 'Gray';

}

}

function inputFocus(keyword) {

//var keyword = document.getElementById("keyword");

if (keyword.value == '输入搜索关键词') {

keyword.value = '';

keyword.style.color = 'Black';

}

}

</script>

</head>

<body>

<inputtype="text"id="keyword"value="输入搜索关键词"style="color:Gray;"onblur="inputBlur(this)"onfocus="inputFocus(this)"/>

<inputtype="button"value="搜索一下"/>

</body>

</html>

34.评分控件

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>评分控件</title>

<scripttype="text/javascript">

function initEvent() {

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

var tds = document.getElementsByTagName("td");

; i < tds.length; i++) {

var td = tds[i];

td.style.cursor = "pointer";

td.onmouseover = function () {

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

var tds = document.getElementsByTagName("td");

var index = indexOf(tds, this);

//点击的加上之前的td变成黑色的

; i <= index; i++) {

tds[i].innerHTML = "★";

}

//点击的td之后的td都设置成白色的

; i < tds.length; i++){

tds[i].innerHTML = "☆";

}

};

}

}

//返回一个元素在数组中的顺序

function indexOf(arr,element) {

; i < arr.length; i++) {

if (arr[i] == element) {

return i;//返回相同元素的序号

}

}

;

}

</script>

</head>

<bodyonload="initEvent()">

<tableid="rating"><tr><td></td><td></td><td></td><td></td><td></td></tr></table>

</body>

</html>

35.点击小图显示详细信息V1

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<scripttype="text/javascript">

function showDetails() {

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

details.style.display = '';

details.style.left = window.event.clientX;

details.style.top = window.event.clientY;

}

function hideDetails() {

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

details.style.display = 'none';

}

</script>

</head>

<body>

<imgalt=""src="http://hiphotos.baidu.com/fanyong511/pic/item/8a80199621421a7a7af48051.jpg"onmouseover="showDetails()"onmouseout="hideDetails()"/>

<divid="details"style="position:absolute; display:none;">

<imgalt=""src="http://hiphotos.baidu.com/fanyong511/pic/item/97768601a08bbc7d4afb5144.jpg"/>

<p>身高:180cm</p>

<p>姓名:小甜甜</p>

</div>

</body>

</html>

36.点击小图显示详细信息V2

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<scripttype="text/javascript">

//模拟后台传来的数据

var data = {

"http://hiphotos.baidu.com/fanyong511/pic/item/8a80199621421a7a7af48051.jpg": ["http://hiphotos.baidu.com/fanyong511/pic/item/97768601a08bbc7d4afb5144.jpg", "小甜甜", "180cm"],

"http://hiphotos.baidu.com/fanyong511/pic/item/87a166d3c03a89fda1ec9c51.jpg": ["http://hiphotos.baidu.com/fanyong511/pic/item/1655532f23e6b19e8b139951.jpg", "布兰妮", "175cm"],

"http://hiphotos.baidu.com/fanyong511/pic/item/a79069210c7338d64723e851.jpg": ["http://hiphotos.baidu.com/fanyong511/pic/item/c2115ded03544d89b3fb9551.jpg", "黑妞", "165cm"]

};

//载入图片

function loadImg() {

for (var smallImgPath in data) {

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

smallImg.src = smallImgPath;

]);

]);

]);

smallImg.onmouseover = function () {

var smallImgSrc = this.src;

var detailsData = data[smallImgSrc]; //smallImgSrc是key

document.getElementById("detailsImg").src = this.getAttribute("a1");

document.getElementById("detailsName").innerHTML = "身高:" + this.getAttribute("a2");

document.getElementById("detailsHeight").innerHTML = "姓名:" + this.getAttribute("a3");

//document.getElementById("detailsImg").src = data[0]; //赋值

//document.getElementById("detailsName").innerHTML = data[1]; //赋值

//document.getElementById("detailsHeight").innerHTML = data[2]; //赋值

//显示隐藏的层

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

details.style.display = '';

details.style.left = window.event.clientX;

details.style.top = window.event.clientY;

};

document.body.appendChild(smallImg);

}

}

//隐藏详细信息

function hideDetails() {

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

details.style.display = 'none';

}

</script>

</head>

<bodyonload="loadImg()">

<divid="details"style="position:absolute; display:none;">

<imgalt=""id="detailsImg"src=""/>

<pid="detailsHeight"></p>

<pid="detailsName"></p>

<p><inputtype="button"value="关闭"onclick="hideDetails()"/></p>

</div>

</body>

</html>

Javascript + Dom知识点总结的更多相关文章

  1. Javascript重要知识点梳理

    Javascript重要知识点梳理 一.Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for 二.Javas ...

  2. 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  3. JavaScript DOM详解

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52727448 本文出自:[余志强的博客] 一.DOM概述 D: Do ...

  4. JavaScript DOM 对象

    JavaScript DOM 对象   什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C ...

  5. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  6. JavaScript DOM 编程艺术

    最近把JavaScript DOM 编程艺术这本书看完了,觉得这本书很好 深入浅出地展示了渐进增强.平稳退化.结构和样式分离等编程思想,我对书中重要的知识进行了梳理总结. 一.网页 二.JavaScr ...

  7. 前端开发 JavaScript 干货知识点汇总

    很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...

  8. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  9. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

随机推荐

  1. 第二章 Base64与URLBase64

    2.1.算法基本规则: 加密的算法公开 加密的密钥不公开 Base64算法公开.密钥也公开的特性不符合基本算法规则,所以很容易被破解,所以一般不用于企业级的加密操作. 注意:具体的算法与密钥(对于Ba ...

  2. C++11 std::shared_ptr总结与使用

    最近看代码,智能指针用的比较多,自己平时用的少,周末自己总结总结.方便后续使用. std::shared_ptr大概总结有以下几点: (1) 智能指针主要的用途就是方便资源的管理,自动释放没有指针引用 ...

  3. 让Windows加入域的PowerShell

    $domain = "midrange.lab" $password = "MyPassword!" | ConvertTo-SecureString -asP ...

  4. ML&DL视频教程资源

    作者:Bruce链接:https://www.zhihu.com/question/49909565/answer/345894856来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  5. 多维数组分解----SVD在推荐系统中的应用-

    http://www.janscon.com/multiarray/rs_used_svd.html [声明]本文主要参考自论文<A SINGULAR VALUE DECOMPOSITION A ...

  6. 数据挖掘中 决策树算法实现——Bash

    数据挖掘中 决策树算法实现——Bash 博客分类: 数据挖掘 决策树 bash 非递归实现 标准信息熵 数据挖掘决策树bash非递归实现标准信息熵 一.决策树简介: 关于决策树,几乎是数据挖掘分类算法 ...

  7. Python3 使用 matplotlib 画折线图

    ChartUtil.py import matplotlib.pyplot as plt from pylab import mpl def plotLine(xData,yData,xLabel,c ...

  8. JPA(五):映射关联关系------映射单向多对一的关联关系

    映射单向多对一的关联关系 新建Customer.java: package com.dx.jpa.singlemanytoone; import java.util.Date; import java ...

  9. linux 查找文件或者服务

    [root@localhost ~]# whereis mysql mysql: /usr/bin/mysql /usr/lib/mysql /usr/share/mysql /usr/share/m ...

  10. C#.NET常见问题(FAQ)-如何判断两个类是否相同类型

    可以用is方法判断是否是一个类   更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123   我的在线论坛: http://csr ...