文章目录
1 DOM简单入门
1.1 获取对象和修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XHH_LEARN</title>
<script>
// here
var num = 11;
document.write(num + "<br>");
</script>
</head>
<body>
<h1 id="title">Head Xhh</h1>
<img src="img/xhhh.jpg" id="xhh">
<script>
// [1]获取对象
var xhh = document.getElementById("xhh");
// [2] 设置img属性
// 换图片
xhh.src = "img/img2.jpg";
// 获取h1 title 并修改
var title = document.getElementById("title");
alert("change title h1");
title.innerHTML = "mcy 666";
</script>
</body>
</html>
1.2 事件绑定
- 三种绑定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<!-- 方式 1 -->
<!--<img src="img/xhhh.jpg" id="xhh" οnclick="alert('我被点击了');">-->
<!-- 方式 2 好一点-->
<!--<img src="img/img2.jpg" id="xhh" οnclick="clickCall();">-->
<!-- 【荐】方式 3 -->
<img src="img/img2.jpg" id="xhh">
<script>
function clickCall(){
alert('clickCall() 我被点击了');
}
// 获取标签 + 绑定事件(函数名) 【荐】方式 3
var img = document.getElementById("xhh");
img.onclick = clickCall;
</script>
</body>
</html>
- Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<!-- 【荐】方式 3 -->
<img src="img/img2.jpg" id="xhh">
<script>
// 获取标签 + 绑定事件(函数名) 【荐】方式 3
var img = document.getElementById("xhh");
img.onclick = function(){
// alert('clickCall() 我被点击了');
// img.src = "img/xhhh.jpg";
// console.log(img.src)
// http://localhost:63342/learn_javeWeb/HTML_learn/img/img2.jpg
var nameList = img.src.split("/")
var name = nameList[nameList.length-1]
if(name == "xhhh.jpg"){
img.src = "img/img2.jpg";
}else {
img.src = "img/xhhh.jpg";
}
};
</script>
</body>
</html>
2 BOM
Browser Object Model
浏览器对象模型
2.1 简介
- Navigatot：浏览器对象
- Window：窗口对象*
- Location：地址栏*
- History：历史记录*
- DOM对象 Document对象
- Screen屏幕对象（不重要）
2.2 Window对象
不需要创建Window对象
使用【1】：window.方法()；
使用【2】：方法()；
弹框相关
- alert
- confirm
- prompt
<script>
alert("mcy"); // 显示弹窗
var flag = confirm("确认退出？");// 确认按钮 true or false
// 输入框
var user = prompt("请输入用户名");
console.log("input:" + user);
</script>
打开关闭
- open
- close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Window-Learn</title>
</head>
<body>
<input type="button" value="打开新窗口" id="openBtn">
<input type="button" value="关闭窗口" id="closeBtn">
<script>
var openBtn = document.getElementById("openBtn");
var newWindow = null; // 获取新窗口的对象
openBtn.onclick = function (){
newWindow = window.open("www.baidu.com"); // 打开新窗口
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function (){
// window.close(); // 关闭当前窗口
newWindow.close(); // 关闭打开的窗口
}
</script>
</body>
</html>
定时器相关
- setTimeout
- setInterval
<script>
// [** 1] 一次定时器 (js代码or方法对象, 毫秒值)
function tFunc(){
alert('boom ~~~');
}
// setTimeout("tFunc();", 2000); // 写法1
var tId1 = setTimeout(tFunc, 2000); // 【荐】写法2
clearTimeout(tId1); // 取消定时器
// [** 2] 循环定时器
var itId2 = setInterval(tFunc, 2000);
clearInterval(itId2);
</script>
属性相关
- history
- document
2.3 Location
- reload
- href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location</title>
</head>
<body>
<input type="button" value="刷新按钮" id="btn">
<input type="button" value="点击进入百度" id="btn2">
<script>
// [1] reload
var btn = document.getElementById("btn");
btn.onclick = function (){
// 重现加载当前页面
location.reload();
}
// [2] 获取herf
var url = location.href;
console.log("XHH:" + url);
// [3] 设置herf
var btn2 = document.getElementById("btn2");
btn2.onclick = function (){
location.href = "https://www.baidu.com";
console.log("进入 百度~~~");
}
</script>
</body>
</html>
2.4 History
3 DOM
Document Object Model
- Document：文档对象*
- Element：元素对象*
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象（其他5个的父对象）*
3.1 Document
window.document
方法
getxxx()和createxxx()
- getElementById()
- getElementsByTagName()：返回数组
- getElementsByClassName()：返回数组
- getElementsByName() ：返回数组
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>
// [1] ById
var byId = document.getElementById("div1");
// [2] ByTagName
var byTag = document.getElementsByTagName("div");
console.log("byTag:" + byTag)
// [3] ByClass
var byCls = document.getElementsByClassName("cls1");
// [4] ByName
var byName = document.getElementsByName("username");
console.log(byName)
</script>
</body>
- createElement
var table = document.createElement("table");
alert(table);
3.2 Element
- removeAttribute()：删除属性
- setAttribute()：设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elem</title>
</head>
<body>
<a>把我设置成链接</a>
<input type="button" value="Set" id="setbtn">
<input type="button" value="Remove" id="removebtn">
<script>
var setbtn = document.getElementById("setbtn");
var removebtn = document.getElementById("removebtn");
setbtn.onclick = function (){
var aTag = document.getElementsByTagName("a")[0];
aTag.setAttribute("href", "https://www.baidu.com");
}
removebtn.onclick = function (){
var aTag = document.getElementsByTagName("a")[0];
aTag.removeAttribute("href");
}
</script>
</body>
</html>
3.3 Node
方法
- appendChild()
- removeChild()
- replaceChild()
属性
- parentNode：返回父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node</title>
<style>
div{
border: 1px solid red;
}
#div1{
width: 100px;
height: 100px;
}
#div2{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">div2</div>
</div>
<a href="javascript:void(0);" id="del">点击删除子节点</a>
<a href="javascript:void(0);" id="add">点击添加子节点</a>
<script>
// [1] 获取节点
var del = document.getElementById("del");
// [2] 点击删除
del.onclick = function (){
// 得到要删除的父子节点
var pare = document.getElementById("div1");
var chil = document.getElementById("div2");
pare.removeChild(chil);
}
var add = document.getElementById("add");
add.onclick = function (){
var pare = document.getElementById("div1");
// 创建节点并设置
var div3 = document.createElement("div");
div3.setAttribute("id", "div3");
div3.innerHTML = "div3333";
// 添加
pare.appendChild(div3);
}
</script>
</body>
</html>
3.4 HTML DOM
- innerHTML
- 使用HTML元素对象属性属性
- 控制样式
- style
- class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML-EMEM</title>
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
// [1] 获取
var div1 = document.getElementById("div1");
// [2] 设置inner
// console.log("xhh:" + div1.innerText);
div1.innerHTML = "<input type='text'>";
// [3] 修改样式
div1.onclick = function (){
// 1 -> 利用style 修改
div1.style.border = "1px solid red";
div1.style.width = "200px";
div1.style.height = "200px";
}
var div2 = document.getElementById("div2");
div2.onclick = function (){
// 1 -> 利用style 修改
div2.className = "d1";
}
</script>
</body>
</html>
4 BootStrap
前端开发框架、响应式布局（自动调整PC、Phone）
js插件、css样式库
会用即可
4.1 快速入门（模板）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- [1] Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- [2] jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- [3] 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
4.2 响应式布局
依赖于栅格布局
> 1.定义容器。相等table
> container：固定宽度
> container-fluid：100%宽度
> 2.定义行。相当于tr 样式row
> 3.定义元素，指定在不同设备中占用格子的数目。相当于td 样式：col-设备代号-格子个数
> 设备代号
> https://v3.bootcss.com/css/#grid-options
<body>
<!--<h1>你好，世界！</h1>-->
<!-- [1] 容器-->
<div class="container-fluid">
<!-- [2] 行-->
<div class="row">
<!-- [3] 格子-->
<div class="col-lg-1 inner">div1</div>
<div class="col-lg-1 inner">div1</div>
<div class="col-lg-1 inner">div1</div>
<div class="col-lg-1 inner">div1</div>
<div class="col-lg-1 inner">div1</div>
</div>
</div>
</body>
4.3 CSS样式
按钮
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
图片
<img src="..." class="img-responsive" alt="Responsive image">
表格、表单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap HelloWorld</title>
<!-- [1] Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- [2] jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- [3] 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-- [1] 表格-->
<table class="table table-bordered table-condensed table-hover">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>xhh</td>
<td>18</td>
</tr>
</table>
<br><br><br>
<!-- [2] 表单-->
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-3">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</body>
</html>
4.4 组件、插件
- 组件
- 导航条
- 分页条
- 插件
- 轮播图
参考
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
