JavaScript 学习贼基础的那种哦!!! 下篇
8.操作DOM对象(重点)
DOM: 文档对象模型,
核心
浏览器网页就是一个Dom 树形结构!
- 更新: 更新Dom 节点
- 遍历 dom 节点: 得到 Dom 节点
- 删除删除一个 Dom 节点
- 添加: 添加一个新的节点
要操作一个 Dom 节点, 就必须要先获得这个 Dom
获得 dom 节点
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByTagName('p2');
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
// father.firstChild
// father.lastChild
这是原生代码, 之后会我们尽量都是使用JQuery();
更新节点
<script>
var id1 = document.getElementById('id1');
id1.innerHTML='<strong>123</strong>'; //可以解析 HTML 文本标签
</script>
操作文本
id1.innerText='456'; 修改文本的值
id1.innerHTML='<strong>123</strong>'; //可以解析 HTML 文本标签
操作JS
id1.style.color = "yellow";
"yellow"
id1.style.fontSize = "20px";
"20px"
id1.style.padding = '2em';
"2em"
删除节点
删除节点的步骤: 先获取父节点, 再通过父节点删除自己
<div id = "father">
<h1>标题一</h1>
<p id = "p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
let self = document.getElementById('p1');
let father = p1.parentElement;
father.removeChild(self);
// 删除是一个动态的过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>
注意
删除多个节点的时候,children 是时刻变化的, 删除节点的时候一定要注意:
插入节点
我们获得了某个 Dom 节点, 假设这个 dom 节点是空的, 我们通过 innerHTML 就可以增加一个元素了,
但是这个DOM 节点已经存在元素了, 我们就不能这么干了! 会产生覆盖~
追加
<p id = "js">javascript</p>
<div id = "list">
<p id ="se">javase</p>
<p id ="ee">javaee</p>
<p id ="me">javame</p>
</div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
list.appendChild(js); //追加到后面
</script>
效果:
创建一个新的标签, 实现插入
<p id = "js">javascript</p>
<div id = "list">
<p id ="se">javase</p>
<p id ="ee">javaee</p>
<p id ="me">javame</p>
</div>
<script>
let js = document.getElementById('js'); //已经存在的节点
let list = document.getElementById('list');
//通过JS 创建一个新的节点
let newP = document.createElement('p'); //创建一一个p标签
newP.id = 'newP'; //相当于 <p id="newP"></p>
newP.innerText = 'hello, js';
list.appendChild(newP);
list.appendChild(js); //追加元素
</script>
let js = document.getElementById('js'); //已经存在的节点
let list = document.getElementById('list');
//通过JS 创建一个新的节点
let newP = document.createElement('p'); //创建一一个p标签
newP.id = 'newP'; //相当于 <p id="newP"></p>
newP.innerText = 'hello, js';
// list.appendChild(newP);
// 创建一个标签节点,
let myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
// 可以创建一个 Style 标签
let myStyle = document.createElement('style'); //创建一个空 style 标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body {background-color: chartreuse;}'; //设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
insert
let ee = document.getElementById('ee');
let js = document.getElementById('js');
let list = document.getElementById('list');
// list 节点, insertBefore(newNode, targetNode):
ee.insertBefore(js, ee);
9 操作表单(验证)
表单是什么 form DOM 树
-
文本框 text
-
下拉框
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
…
表单的目的: 提交信息
获得要提交的信息
<form action="post">
<p>
<span>用户名: </span> <input type="text" id="username">
</p>
<!-- 多选框的值, 就是定义好的value -->
<p>
<span>性别: </span>
<input type="radio" name="sex" value="man" id ="boy"> 男
<input type="radio" name="sex" value="women" id ="girl"> 女
</p>
</form>
<script>
let input_text = document.getElementById('username');
let boy_radio = document.getElementById('boy');
let girl_radio = document.getElementById('girl');
// 得到输入框的值
input_text.value
// 修改输入框的值
input_text.value = '123';
// 对于单选框, 多选框等等固定的值, boy_radio.value 只能取得当前的值
// boy_radio.checked; // 查看返回的结果, 是否为true, 如果为true, 则被选中~
// boy_radio.checked = true; // 赋值
</script>
提交表单, md5 加密密码, 表单优化
<title>Title</title>
<!-- MD5工具类 -->
<script src="'https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
<p>
<span>用户名: </span> <input type="text" id="username" name="username">
</p>
<p>
<span>密码: </span> <input type="password" id="password" name="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!-- 绑定事件 onclick 被点击 -->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
let uname = document.getElementById('username');
let pwd = document.getElementById('input-password');
let md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
// 可以校验判断表单内容, true 就是通过提交, false 阻止提交
return true;
}
</script>
10 jQuery
JavaScript 和 jQuery;库
jQuery 库, 里面存在大量的JavaScript 函数
获取jQuery
初识 jQuery
<!-- cdn 引入 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 导入本地 -->
<!-- <script scr="./xxx/xxx"></script>-->
</head>
<body>
<!--
公式: $(selector).action();
-->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id');
//选择器就是 css 的选择器
$('#test-jquery').click(function () {
alert('hello, jQuery');
})
</script>
选择器
<script>
// 原生js, 选择器少, 麻烦不好记
// 标签
document.getElementsByTagName();
// id
document.getElementById();
// 类
document.getElementsByClassName();
// jQuery
$('p').click(); // 标签选择器
$('#id1').click(); // id选择器
$('.class1').click(); // 类选择器
</script>
文档工具站
https://jquery.cuishifeng.cn/
公式
<!--
公式: $(selector).action();
-->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id');
//选择器就是 css 的选择器
$('#test-jquery').click(function () {
alert('hello, jQuery');
})
</script>
事件
鼠标事件, 键盘时间, 其他时间
<!-- cdn 引入 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 要求: 获取鼠标当前的一个坐标 -->
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后, 响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + 'y:'+e.pageY);
})
});
</script>
操作DOM
节点文本操作
$('#test-ul li[name=java]').text(); //获得值
$('#test-ul li[name=java]').text('设置值'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值
css 的操作
$(’#test-ul li[name=java]’).css({“color” : “red”});
元素的显示和隐藏: 本质 display : none;
$('#test-ul li[name=java]').show(); //显示
$('#test-ul li[name=java]').hide();
未来ajax();
$(’#from’).ajax()
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
小技巧
-
如果巩固JS (看jQuery 源码, 看游戏源码!)
-
巩固HTML CSS (扒网站, 全部down下来, 然后对应修改效果~)
Layer 弹窗组件
Element-ui