<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM1</title>
</head>
<body>
<div class="div1">
<p name="littleP" class="p1">hell p</p>
<div class="div2">hello div
<div id="xiao" name="lili">div3</div>
<a href="">click</a>
</div>
</div>
<script>
var ele = document.getElementsByClassName("p1")[0];
/*console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.innerHTML);
console.log(ele.nodeValue);
ele.innerHTML="xiaoming";*/
/* var p_ele = ele.parentNode;
console.log(p_ele.nodeName);*/
/*var b_ele = ele.nextSibling;
console.log(b_ele.nodeName);*/
/*var b_ele = ele.nextElementSibling;
console.log(b_ele.innerHTML);*/
/* var ele_div = document.getElementsByClassName("div1")[0];
var clild = ele_div.children;
console.log(clild);
var d1 = document.getElementsByTagName("div");
console.log(d1);
var d2 = document.getElementsByTagName("p");
console.log(d2);*/
/*var d3 = document.getElementsByName("fengfeng1")[0];
console.log(d3);
console.log(d3.innerHTML);
console.log(d3.innerText);*/
/*var ele4 = document.getElementsByName("littleP")[0];
var ele5 = ele4.nextElementSibling;
console.log(ele5.innerHTML);
console.log(ele5.innerText);
ele5.innerHTML="<h1>feng<h1>"*/
//局部查找通过id和通过Name是无法查找到的。
var new1 = document.getElementById("xiao");
var new2 = document.getElementsByName("lili");
console.log(new2);
console.log(new1);
</script>
</body>
</html>
event事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event</title>
</head>
<body>
<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">
<div class="div1">hello div</div>
<script>
window.onload= function() {
//获取焦点和失去焦点
var ele = document.getElementById("search");
function f1() {
if(ele.value == "请输入用户名"){
ele.value="";
}
}
function f2() {
if(!ele.value.trim()){
ele.value = "请输入用户名";
}
}
var div_ele = document.getElementsByClassName("div1")[0];
console.log(div_ele);
div_ele.setAttribute("color","red");
}
</script>
</body>
</html>
form 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
}
.inner{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<form action="" id="form1" method="get">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
var ele = document.getElementsByClassName("inner")[0];
ele.onclick=function(e) {
alert("inner");
alert(e);
e.stopPropagation();
}
function func2() {
alert("outer");
}
window.onload=function () {
var ele = document.getElementById("form1");
ele.onsubmit=function (e) {
// console.log("hello");
// //此时不会提交表单
// return false;
e.preventDefault();
}
}
</script>
</html>
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 100px;
background-color: red;
}
.div2{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: grey;
opacity: 0.7;
}
.model{
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<script>
function func1() {
var v1 = document.getElementsByClassName("div2")[0];
var v2 = document.getElementsByClassName("model")[0];
v1.classList.remove("hide");
v2.classList.remove("hide");
}
function func2() {
var v1 = document.getElementsByClassName("div2")[0];
var v2 = document.getElementsByClassName("model")[0];
v1.classList.add("hide");
v2.classList.add("hide");
}
</script>
<body>
<div class="content">
<button onclick="func1()">show</button>
</div>
<div class="div2 hide"></div>
<div class="model hide">
<button onclick="func2()">cancel</button>
</div>
</body>
</html>
dom增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>增删改查</title>
<style>
div{
width: 300px;
height: 100px;
}
.div1{
background-color: green;
}
.div2{
background-color: yellow;
}
.div3{
background-color: rebeccapurple;
}
.div4{
background-color: deeppink;
}
</style>
</head>
<body>
<div class="div1">
<button onclick="add()">add</button>
hello div1
</div>
<div class="div2">
<button onclick="del()">delete</button>
hello div2
</div>
<div class="div3">
<button onclick="change()">change</button>
<p>hello div3</p>
</div>
<div class="div4">hello div4</div>
<script>
function add() {
var ele = document.createElement("p");
ele.innerHTML="<h1>hello p</h1>";
var ele_div1 = document.getElementsByClassName("div1")[0];
ele_div1.appendChild(ele);
ele_div1.style.color="orange";
}
function del() {
var feng = document.getElementsByTagName("div")[2];
console.log(feng);
var ele = document.getElementsByClassName("div1")[0];
var ele_p = ele.getElementsByTagName("p")[0];
ele.removeChild(ele_p);
}
function change() {
var img = document.createElement("img");
// img.src="22.jpg";
img.setAttribute("src","22.jpg");
var ele = document.getElementsByClassName("div3")[0];
var child = ele.children[0];
ele.replaceChild(img,child);
}
</script>
</body>
</html>
正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function selectAll() {
var inputs=document.getElementsByTagName("input");
for(var i = 0;i<inputs.length;i++){
var input = inputs[i];
input.checked=true;
}
}
function cancel() {
var inputs=document.getElementsByTagName("input");
for(var i = 0;i<inputs.length;i++){
var input = inputs[i];
input.checked=false;
}
}
function reverse() {
var inputs=document.getElementsByTagName("input");
for(var i = 0;i<inputs.length;i++){
var input = inputs[i];
if (input.checked){
input.checked=false;
} else {
input.checked=true;
}
}
}
</script>
<body>
<button onclick="selectAll()">全选</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反选</button>
<table border="1px">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
</body>
</html>
二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级联动</title>
</head>
<body>
<select id="provinces">
<option value="">请选择省份</option>
</select>
<select id="citys">
<option value="">请选择城市</option>
</select>
<script>
data = {"河南省":["郑州","新乡"],"湖北":["武汉","仙桃"]};
var pro_ele = document.getElementById("provinces");
var city_ele = document.getElementById("citys");
for(var item in data){
var ele =document.createElement("option");
ele.innerHTML = item;
pro_ele.appendChild(ele);
}
pro_ele.onchange=function () {
// console.log(this.selectedIndex);
// console.log(this.options);
var ele = this.options[this.selectedIndex];
var ele_txt = ele.innerHTML;
// console.log(ele_txt);
// console.log(data[ele_txt])
var city = data[ele_txt];
console.log(city);
//每次选择之前进行清空
city_ele.options.length=1;
for (var x=0;x<city.length;x++){
console.log(city[x]);
var ele_new = document.createElement("option");
ele_new.innerHTML=city[x];
city_ele.appendChild(ele_new);
}
}
</script>
</body>
</html>
jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery1</title>
</head>
<body>
<div>hello</div>
<p id="p1" feng="fengzi">ppppp</p>
<a href="">click</a>
<div class="outer">outer1
<div class="inner">inner<p>inner p</p></div>
<p>alex</p>
</div>
<p>fengfeng</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<div class="outer">outer2</div>
<script src="jquery-3.1.1.js"></script>
<script>
//基本选择器
/*$("*").css("color","red");
$("#p1").css("color","red");
$(".outer").css("color","green");
$(".inner","div","p").css("color","red");*/
//层级选择器
//后代
//$(".outer p").css("color","red");
//子代
//$(".outer>p").css("color","red");
//兄弟(紧挨着下边的)
//$(".outer+p").css("color","red");
//兄弟(不需要紧挨着下边的)
//$(".outer~p").css("color","red");
//基本筛选器
/*$("li:first").css("color","red");
$("li:last").css("color","red");
$("li:eq(1)").css("color","red");
$("li:gt(2)").css("color","red");*/
//属性选择器
//$("[feng='fengzi']").css("color","red");
//表单选择器
$("[type='text']").css("width","200px");
//简写
$(":text").css("width","400px");
</script>
</body>
</html>
查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
</head>
<body>
<div>hello</div>
<p id="p1" feng="fengzi">ppppp</p>
<a href="">click</a>
<div class="outer">outer1
<div class="inner">inner<p>inner p</p></div>
<p>alex</p>
</div>
<p>fengfeng</p>
<ul>
<li id="begin">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li id="end">555</li>
<li>666</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<div class="outer">outer2</div>
<script src="jquery-3.1.1.js"></script>
<script>
//$("li:eq(2)").css("color","red");
//另一种方式
/* $("li").eq(3).css("color","red");
$("li").first().css("color","green");*/
//查找筛选器
//只找儿子一层.
//$(".outer").children("p").css("color","red");
//子孙后代都会改变
// $(".outer").find("p").css("color","red");
// $("li").eq(1).next().css("color","red");
// $("li").eq(1).nextAll().css("color","red");
//范围不包括边界
//$("li").eq(1).nextUntil("#end").css("color","red");
//向上找
/*$("li").eq(4).prev().css("color","red");
$("li").eq(4).prevAll().css("color","red");*/
//$("li").eq(4).prevUntil("#begin").css("color","red");
/*var ele = $(".outer .inner p").parent().html();
console.log(ele);
//一直向外找
var ele = $(".outer .inner p").parents().html();
console.log(ele);*/
//范围
/*var ele = $(".outer .inner p").parentsUntil("body").css("color","red");
console.log(ele);*/
//兄弟
$(".outer").siblings().css("color","red");
</script>
</body>
</html>
菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float: left;
background-color: beige;
width: 30%;
height: 500px;
}
.content{
float: left;
background-color: rebeccapurple;
width: 70%;
height: 500px;
}
.title{
background-color: #84a42b;
line-height: 40px;
}
.hide{
display: none;
}
</style>
<script src="jquery-3.1.1.js"></script>
<script>
function show(self) {
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
</body>
</html>
