05 JS基础DOM

JS的window对象定时器：

window下一些方法：

    <script>弹出window.alert('hello')返回布尔值var ret = window.confirm('hello lzy')console.log(ret)返回输入var ret1 = window.prompt('hello ///')console.log(ret1)转到新窗口open('http://www.baidu.com')</script>

View Code

显示时间：

    <head><meta charset="UTF-8"><title>Title</title><style>#id1{width: 200px;height: 200px;}</style></head><body><input type = 'text' id = 'id1' onclick = "begin()"><button onclick = "end()">停止</button><script>function showTime() {var current_time = new Date().toLocaleString();var ele = document.getElementById('id1');ele.value = current_time;}var clock1;function begin() {if (clock1 == undefined) {showTime();clock1 = setInterval(showTime, 1000)}}function end(){clearInterval(clock1);clock1=undefined}</script></body>

View Code

location://加载网址？

    <body><button onclick = "f()"></button><script>function f(){// location.assign("http://www.baidu.com")// location.reload()// location.replace("http://www.baidu.com")
        }</script></body>

View Code

DOM节点：DOM定义了访问HTML和XML文档的标准：是W3C（万维网联盟）
的标准
分为三个不同部分：
核心 DOM 针对任何结构化文档的标准模型
XML了DOM 针对XML文档的标准模型
HTML DOM 针对HTML文档的标准模型
基础属性：

    <body><div class = "div1"><p class = "p1">hello p</p><div class = "div2">hello div2</div></div><script>var ele = document.getElementsByClassName("p1")[0];console.log(ele.nodeName);console.log(ele.nodeType);console.log(ele.nodeValue);console.log(ele.innerHTML);ele.innerHTML = "hello world";var p_ele = ele.parentNode;console.log(p_ele.nodeName)var b_ele= ele.nextSibling;console.log(b_ele.nodeName)var b_ele2 = ele.nextElementSibling;console.log(b_ele2.nodeName)console.log(b_ele2.nodeName)</script></body>

View Code

查找：

ID NAME classname tagname；<body><div class = "div1"><p name = "littleP" class = "p1">hello p</p><div class = "div2">hello div2<div>div3</div><a href="">click</a></div><span>span111</span></div><span>spanspanspanspan</span><div>hhhhh</div><script>var ele4 = document.getElementsByName("littleP")[0]var ele5 = ele4.nextElementSibling;console.log(ele5.innerHTML);console.log(ele5.innerText);//局部查找var ele6=document.getElementsByClassName("div1")[0];var ele7=ele6.getElementsByTagName("span");console.log(ele7[0].innerHTML)</script></body>

View Code

Event（事件）：

    search：<input type = "text" id = "search" value = "请输入用户名" onfocus = "f1()"><script>var ele = document.getElementById("search")function f1(){if(ele.value == "请输入用户名"){ele.value ="";}}function f2(){if(!ele.value.trim()){ele.value = "请输入用户名";}}</script>load事件：<head><meta charset="UTF-8"><title>Title</title><script>function f(){var ele = document.getElementsByClassName("div1")[0]console.log(ele.innerHTML)}// ele.css("color","red")</script></head><body onload = "f()"><div class = "div1">hello div1</div></body>    事件绑定：<body><div class="v1"><div class="v2">dddd</div><div class="v2">dddd</div><div class="v2">dddd</div><div class="v2">dddd</div><div class="v2">dddd</div><p id="p1" onclick="func(this)">pppppp</p></div><script>function func(that) {console.log(that)console.log(that.previousElementSibling);console.log(that.parentNode);}//    var ele=document.getElementById("p1");//    ele.οnclick=function () {//        alert(123)//    };// 事件绑定2//    var ele2=document.getElementsByClassName("v2");//
           // for(var i=0;i<ele2.length;i++){//     ele2[i].οnclick=function () {//         alert(555)//     }// }//
        </script></body>onsubmit事件与组织事件拖延<body><form action = "" id = "form"><input type="text" name = "username"><input type="submit" value = "提交"></form><!--onsubmit提交时触发 如果验证失败 组织触发--><script>var ele = document.getElementById("form")ele.onsubmit = function (e) {alert(1234)// return false        //此处返回false 不提交// e.preventDefault()   //组织第二方式
            }//    Event里面一个参数 such as “e”   拿到此次事件状态信息</script></body>事件传播：（大概同上例子）<style>.outer{width: 300px;height: 300px;background-color: aqua;}.inner{width: 100px;height: 100px;background-color: black;}</style></head><body><div class = "outer" onclick="func2()"><div class = "inner" onclick="func1()"></div></div><script>var ele = document.getElementsByClassName("inner")[0]ele.onclick = function(e){alert("i am inner")e.stopPropagation()};// function func1() {//     alert("i am inner")// }function func2() {alert("i am outer")}</script></body>

View Code

增删改查：

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.div1,.div2,.div3,.div4{width: 300px;height: 300px;}.div1{background-color: aqua;}.div2{background-color: green;}.div3{background-color: red;}.div4{background-color: black;}</style></head><body><div class = "div1"><button onclick= "add()">add</button>hello div1</div><div class = "div2"><button  onclick="del()">del</button>hello div2</div><div class = "div3"><button  onclick="change()">change</button>hello div3</div><div class = "div4">hello div4</div><script>function change() {var img = document.createElement("img");// img.setAttribute("src","4.jgp");    //与下一条命令作用相同
            img.src = '4.jpg';var ele = document.getElementsByTagName("p")[0];var father = document.getElementsByClassName("div1")[0];father.replaceChild(img,ele)}function add(){var ele = document.createElement("p");ele.innerHTML = "hello p";//可除去内容// ele.innerHTML = "<h1>hello p</h1>";  #此两处显示区别// ele.innerText = "<h1>hello p</h1>";// ele.style.color = "red";         #CSS样式// ele.style.fontSize = "10px";var father = document.getElementsByClassName("div1")[0];father.appendChild(ele)}function del() {var father = document.getElementsByClassName("div1")[0];var son = father.getElementsByTagName("p")[0];father.removeChild(son)}</script></body></html>

View Code

模块对话框：

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.content{height: 1900px;background-color: aqua;}.shade{position: fixed;    //固定top:0;left:0;right:0;bottom:0;background-color: burlywood;opacity: 0.35;              //透明度}.model{width:200px;height: 200px;background-color: green;position: absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}.hide{display:none;}</style></head><body><div class = "content"><button onclick="show()">show</button>hello</div><div class = "shade hide">hehehe</div><div class = "model hide"><button onclick = "cancel()">cancle</button></div><script>function show(){var ele_shade = document.getElementsByClassName("shade")[0];var ele_model = document.getElementsByClassName("model")[0];ele_model.classList.remove("hide");ele_shade.classList.remove("hide")}</script></body></html>

View Code

表格框之正反选：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button onclick = "selectALL()">全选</button>
<button onclick="Cancle()">取消</button>
<button onclick="reverse()">反选</button>
<hr>
<table><tr><td><input type = "checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type = "checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type = "checkbox"></td><td>111</td><td>222</td><td>333</td></tr>
</table><script>function selectALL() {var inputs = document.getElementsByTagName("input");for (var i = 0;i < inputs.length;i++){input = inputs[i];input.checked = true;}}function Cancle() {var inputs = document.getElementsByTagName("input");for (var i = 0;i < inputs.length;i++){input = inputs[i];input.checked = false;}}function reverse() {var inputs = document.getElementsByTagName("input");for (var i = 0;i < inputs.length;i++){input = inputs[i];input.checked = !input.checked;}}
</script></body>
</html>

View Code

二级联动：（省份和市的选择）例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<select id = "province"><option value = "">请选择省份</option>
</select>
<select name = "" id  = "citys"><option value = "">请选择城市</option>
</select><script>data = {"河北省":["石家庄",'廊坊'],"山西省":['大同','太原'],"陕西省":['西安','延安']}// console.log(data);// console.log(typeof data);// console.log(data['河北省'])var pro_ele = document.getElementById("province")var city_ele = document.getElementById("citys")for (var i in data){var ele= document.createElement("option");ele.innerHTML = i;console.log("hello")pro_ele.appendChild(ele)}pro_ele.onchange = function(){console.log(this.selectedIndex)console.log(this.options[this.selectedIndex])var citys = data[this.options[this.selectedIndex].innerHTML];city_ele.options.length = 1;for (var i=0;i<citys.length;i++){var ele = document.createElement("option");ele.innerHTML = citys[i];city_ele.appendChild(ele)}}</script></body>
</html>

View Code

posted on 2019-04-06 21:45 TTNTONZES 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/louzhiyuan/p/10663027.html

05 JS基础DOM相关推荐

JS基础篇--HTML DOM classList 属性
页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
JQuery-学习笔记03【基础——DOM操作】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
Web3D编程入门总结——WebGL与Three.js基础介绍
1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成"webgl与three.js基础介绍"."面向对象的基础3D场景框架编写".&quo ...
【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象
01 复习函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了函数作用:代码重用函数的参数: 1.形参:函数定义的时候,函数名字后面的小括号里的变量 2.实参:函数调 ...
【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构
复习 JavaScript简称为JS JavaScript是什么? 是一门脚本语言:不需要编译,直接运行是一门解释性的语言:遇到一样代码就解释一行代码 C#语言是一门面向对象的语言,也是编译语言,是 ...
Node.js（一、Node.js基础、模块加载机制、包等）
Node.js(一.Node.js基础.模块加载机制.包等) 1.Node.js基础 1.1.Node是什么 1.2.Node环境安装失败解决方法 1.2.1.Node环境搭建 1.2.2.错误代码2 ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...

05 JS基础DOM

05 JS基础DOM相关推荐

最新文章

热门文章