Javascript + Dom知识点总结

最新推荐文章于 2024-04-24 09:22:16 发布

weixin_34334744

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量222

点赞数

文章标签： javascript xhtml 数据结构与算法 ViewUI

Javascript + Dom知识点总结

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

// 数组声明

var arr = new Array();

arr["0"] = "1";

arr["1"] = "2";

arr["2"] = "3";

arr["3"] = "4";

// 简化的声明方式

var arr1 = [1, 2, 3, 4, 5, 6]; // 普通数组，用中括号隔开

var arr2 = { "hello": 10, "world": 90, "yes": 76 };

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

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

2．Windows对象

window.history.back();

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

window.event.returnValue = false;

3．自动提交表单

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

</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">

<head>

function initEvent() {

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

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

for (var i = 0; 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");

for (var i = 0; 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>

</table>

</body>

</html>

6．功表格隔行高亮显示

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

<head>

function showIt() {

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

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

for (var i = 0; i < trs.length; i++) {

if (i % 2 == 0) {

var tr = trs[i];

tr.style.background = "yellow";

}

</script>

</head>

</table>

</body>

</html>

7．监听Focus事件

function initEvent() {

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

for (var i = 0; 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．开关灯效果

.day

{

background-color:White;

}

.night

{

background-color:Black;

}

</style>

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事件

function initEvent() {

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

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

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

}

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

if(this.value.length<=0){

this.style.background = "red";

}

else{

this.style.background = "white";

}

</script>

10．实现Div的隐藏与展示

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>

<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

for (var i = 0; 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");

for (var i = 0; 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;

value1 = parseInt(value1, 10);

value2 = parseInt(value2, 10);

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");

for (var i = 0; i < inputs.length; i++) {

var input = inputs[i];

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

}

function btnClick() {

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

for (var i = 0; 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="哈哈"/>

</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 = "关灯";

}

function fill2Len(i) { // 填充描述为2位

if (i < 10) {

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;

}

setInterval("Refresh()", 1000);

</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>

<scripttype="text/javascript">

var leftSeconds = 10;// 全局变量

function countDown() {

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

var intervalID;

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

if (leftSeconds <= 0) {

btnReg.value = "同意";

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

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

}

else {

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

leftSeconds--;

}

intervalID = setInterval("countDown()", 1000);

</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);

tableLinks.tBodies[0].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

var tr = tableLinks2.insertRow(-1);

var td1 = tr.insertCell(-1); // -1表示插入单元格的位置，-1表示最后

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

var td2 = tr.insertCell(-1);

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);

tableComment.tBodies[0].appendChild(tr);

}

</script>

</head>

<body>

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

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

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

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

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

<tableid="tableComment">

<tbody>

</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;

//第一个字符

var firstChar = title.charAt(0);

//剩下的字符

var leftChar = title.substring(1, title.length);

document.title = leftChar + firstChar;

}

function scrollRight() {

var title1 = document.title;

//最后一个字符

var lastChar = title1.charAt(title1.length - 1);

//剩下的字符

var leftChar = title1.substring(0, title1.length - 1);

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>

<scripttype="text/javascript">

function incWidth() {

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

oldWidth = parseInt(oldWidth, 10); //将字符串转化为数字

oldWidth += 50;//每次增加50个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>

<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>

</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>

</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() {

showIntervalID = setInterval("incDiv()", 100);

}

function incDiv() {

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

var oldWidth = div1.style.width;

//转化为10进制的数字

oldWidth = parseInt(oldWidth, 10);

var oldHeight = div1.style.height;

oldHeight = parseInt(oldHeight, 10);

if (oldHeight >= 240) {

//停止计时器

clearInterval(showIntervalID);

}

oldWidth += 10;

oldHeight += 10;

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>

<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 = "关灯";

}

function fill2Len(i) { // 填充描述为2位,即小时

if (i < 10) {

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;

}

//每个1秒刷新一次

setInterval("Refresh()", 1000);

</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>

<scripttype="text/javascript">

function initEvent() {

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

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

for (var i = 0; i < lis.length; i++) {

var li = lis[i];

li.onmouseover = function () {

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

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

for (var i = 0; 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");

for (var i = 0; i < lis.length; i++) {

var li = lis[i];

if (li == this) {

li.style.fontSize = 30;

}

else {

li.style.fontSize = 16;

}

};

}

</script>

</head>

<bodyonload="initEvent()">

<ulid="football">

</ul>

</body>

</html>

30．歌曲选择

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

<head>

<scripttype="text/javascript">

//全选

function selectAll() {

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

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

for (var i = 0; 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");

for (var i = 0; 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");

for (var i = 0; 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>

<scripttype="text/javascript">

//移动单个元素

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

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

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

for (var i = selectSrc.childNodes.length - 1; i >= 0; 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) {

for (var i = selectSrc.childNodes.length - 1; i >= 0; 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">

</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>

<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;//这样可以

//从后往前删

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

var option = city.childNodes[i];

city.removeChild(option);

}

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

var provName = prov.value;

if (provName == "none") {

return;//不添加

}

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

for (var i = 0; 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) {

if (keyword.value.length <= 0) {

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>

<scripttype="text/javascript">

function initEvent() {

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

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

for (var i = 0; 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变成黑色的

for (var i = 0; i <= index; i++) {

tds[i].innerHTML = "★";

}

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

for (var i = index + 1; i < tds.length; i++){

tds[i].innerHTML = "☆";

}

};

}

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

function indexOf(arr,element) {

for (var i = 0; i < arr.length; i++) {

if (arr[i] == element) {

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

}

return -1;

}

</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>

<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"/>

</div>

</body>

</html>

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

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

<head>

<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.setAttribute("a1", data[smallImgPath][0]);

smallImg.setAttribute("a2", data[smallImgPath][1]);

smallImg.setAttribute("a3", data[smallImgPath][2]);

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>

</div>

</body>

</html>

weixin_34334744

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript + Dom知识点总结

Javascript + Dom知识点总结1．用Javascript声明数组和字典的方式// 数组声明var arr = new Array(); arr["0"] = "1"; arr["1"] = "2"; arr["2"] = "3"; arr["3"] = "4"; // 简化的声明方式var
复制链接

扫一扫