04-初学JavaScript
经过周末的消沉还是要继续学习代码的，不过今天可是备受打击，闲话少说继续整理
DOM操作
通常，通过 JavaScript，您需要操作 HTML 元素。
为了达成此目的，您需要首先找到这些元素。有好几种完成此任务的方法：
- 通过 id 查找 HTML 元素
- 通过标签名查找 HTML 元素
- 通过类名查找 HTML 元素
- 通过 CSS 选择器查找 HTML 元素
- 通过 HTML 对象集合查找 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
DOM：只要针对节点（元素）进行操作
Dhtml
dynamic:动态的
<div style="width: 100px;height: 100px;background: red" class="d">
<p>放假！！！！！！！</p>
<div style="width: 100px;height: 100px;background: blue">
</div>
</div>
<div style="width: 100px;height: 100px;background: yellow" class="d">
</div>
<script>
文档对象
var d1= document.getElementById('d1');
console.log(d1);
d1.innerText='这是重点';
d1.innerHTML = '<h1>这是超级重点</h>';
console.log(d1.innerHTML);
var divs = document.getElementsByTagName('div');
console.log(divs[1]);
var divs = document.getElementsByClassName('d');
console.log(divs[1]);
</script>
</body>
</html>
通过这三种方法获取表单元素
其中tagname 和classname都是数组 只有id是一个元素 因为id只能有一个
二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<a href="" id="a">这是一个链接</a>
<button onclick="f()">设置属性按钮</button>
<button onclick="f1()">查看属性</button>
</div>
<script>
var d1 = document.getElementById('d1');
console.log(d1.getElementsByTagName('a')[0]);
//设置属性值
function f(){
a.href='01-Dhtml.html';
a.target='_blank';
a.title='这是一个链接';
}
//显示属性值
function f1(){
console.log(a.href);
console.log(a.target);
console.log(a.title);
}
</script>
</body>
</html>
通过获取的元素设置属性值
三、按钮的提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="01-Dhtml.html" method="get">
<input type="text" name="username" placeholder="请输入用户名">
<span style="color: #ff0000"></span>
<br>
<!-- <input type="submit" value="提交">-->
</form>
<button>按钮</button>
<script>
var i = document.getElementsByName('username')[0];
var btn = document.getElementsByTagName('button')[0];
var span = document.getElementsByTagName('span')[0]
i .onblur = function (){
console.log(i.value);
span.innerText='liunengenng'
}
i.onfocus = function (){
span.innerText=''
}
</script>
</body>
</html>
这有两种方式 一是通过button提交拦截 二是通过from拦截 form onsubmit 返回true\false 一定要加return
from没有写而是自己想的 最后查的资料
四、通过获取元素 改变属性值 来实现全选和全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>爱好</legend>
全选<input type="checkbox" id="all"/><br>
睡觉<input type="checkbox" name="hobby"/>
吃饭<input type="checkbox" name="hobby" />
玩游戏<input type="checkbox" name="hobby"/>
</fieldset>
<script>
var check = document.getElementsByName('hobby');
document.getElementById('all').onclick = function (){
for (var i = 0; i <check.length; i++) {
check[i].checked = document.getElementById('all').checked;
}
}
for (var i = 0; i <check.length; i++) {
check[i].onclick = function() {
for (var j = 0; j < check.length; j++) {
if (check[j].checked) {
document.getElementById('all').checked = true;
} else {
document.getElementById('all').checked = false;
}
}
}
}
//
// function f(){
// var temp= 0;
// for (var j = 0; j <check.length; j++) {
//
// if(check[j].checked){
// temp++;
// }
// }
//
// if(temp == 3){
// document.getElementById('all').checked=true;
// }else{
// document.getElementById('all').checked=false;
// }
// }
</script>
</body>
</html>
由于这里忘记获取的是数组因此这里卡主了 通过 console.log 才找到哪里出了错误
五、改变css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.c1{
width: 100px;
height: 100px;
background: yellow;
margin: auto;
}*/
.c1{
width: 100px;
height: 100px;
background:yellow;
margin: auto;
}
.c2{
border-radius: 50px;
box-shadow: 10px 10px 10px 10px red;
}
</style>
</head>
<body>
<!--一个元素是可以写多个类名，但是id名只能有一个-->
<div id="d1"> 1223</div>
<script>
var d1 = document.getElementById('d1');
d1.className='c1 c2'
</script>
</body>
</html>
这里一定要记住classname 要想两个样式都实现 必须写在一个里 如d1.className='c1 c2'
六、自定义属性 通过按钮改变字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
123
</div>
<button id="d2">按钮1</button>
<button id="d3">按钮2</button>
<button id="d4">按钮3</button>
<script>
var d1 = document.getElementById('d1');
var btn = document.getElementsByTagName('button');
for (var i = 0; i <btn.length; i++) {
btn[i].setAttribute('btn','b'+(i+1));
btn[i].onclick=function (){
if ('b1'== this.getAttribute('btn')){
d1.style.fontSize='12px';
}
if ('b2' == this.getAttribute('btn')){
d1.style.fontSize='16px';
}
if(this.getAttribute('btn'=='b3')){
d1.style.fontSize='32px';
}
}
}
</script>
</body>
</html>
一开始想着点击 一个按钮可以改变一个样式 但是好像想简单了 所以这里有加了自定义属性 ，可以通过setAttribute自定义属性 通过getAttribute获取属性
七、用自定义属性来实现折叠菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 600px;
height: 600px;
border: 1px solid red;
margin: auto;
}
ul{
list-style:none ;
display: none;
}
p{
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
background: grey;
color: deepskyblue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="d1">
<p>衣服</p>
<ul>
<li>阿迪</li>
<li>耐克</li>
<li>乔丹</li>
<li>李宁</li>
</ul>
<p>图书</p>
<ul>
<li>阿迪1</li>
<li>耐克2</li>
<li>乔丹3</li>
<li>李宁4</li>
</ul>
<p>美食</p>
<ul>
<li>阿迪987</li>
<li>耐克345</li>
<li>乔丹123</li>
<li>李宁12345</li>
</ul>
<p>学校</p>
<ul>
<li>阿迪987</li>
<li>耐克345</li>
<li>乔丹123</li>
<li>李宁12345</li>
</ul>
</div>
<script>
var d1 = document.getElementById('d1');
var ps = document.getElementsByTagName('p');
var uls = document.getElementsByTagName('ul');
for (var i = 0; i <ps.length; i++) {
ps[i].setAttribute('pid',i);
ps[i].onclick = function (){
var pid = this.getAttribute('pid');
var curul = uls[pid];
if(curul.style.display=='block'){
curul.style.display='none';
}else{
for (var i = 0; i <ps.length; i++) {
uls[i].style.display='none';
}
curul.style.display='block';
}
}
}
</script>
</body>
</html>
这里的逻辑我用了许久才明白 尤其是else里的循环 判断是如果是关的就执行else操作 循环看其他列表 如果他们是开的就关掉 这样就是实现了 点开一个 关掉其他的列表
八、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 事件：事件是网页检测到的行为-->
<!--事件：事件源+事件类型+事件处理-->
<!-- 事件绑定函数的方式-->
<!--方式一在元素内部写事件，在事件注册函数-->
<button onclick="f()">按钮1</button>
<script>
// function f(){
// alert(123);
// }
// // 方式二：获取元素对象。事件 = 匿名函数
// document.getElementsByTagName('button')[0].onmouseenter = function (){
// alert(456);
// }
// 方式三（借用事件监听函数）:第一个参数为事件名，第二个为要调用的函数名
document.getElementsByTagName('button')[0].addEventListener("mousedown", m)
function m(){
alert(789)
}
</script>
</body>
</html>
事件的三种第二种用的比较多 第三种是特定情况的话才会使用
九、利用 鼠标和键盘做了 一个结合事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1" style="width: 10px;height: 10px;border-radius:50px;background: red">
</div>
<script>
window.onload = function (e){
document.onmousedown = function (e){
var a = e.clientX;
var b = e.clientY;
document.getElementById('d1').style.marginLeft = a+'px';
document.getElementById('d1').style.marginTop = b+'px';
document.getElementById('d1').style.transition = 'all 1s'
}
}
</script>
</body>
</html>
实现用鼠标对小球进行移动
之后就是作业了
一个是实现 摁下回车 按钮开始倒计时，计时结束 才可以点击按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" disabled="disabled">
<script >
var btn = document.getElementsByTagName('input')[0]
var i= 3;
btn.value=i;
var t;
window.onload = function (e){
document.onkeydown = function (e){
if(e.keyCode == 13){
t = setInterval(f,1000)
}
}
function f(){
--i
btn.value=i;
if(i == 0){
console.log(123);
clearInterval(t)
btn.value='新年快乐'
btn.disabled=false;
}
}
}
</script>
</body>
</html>
第二个作业是 判断输入框里的文字个数 实时反映到界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
还可以输入100个数
</div>
<input type="text" style="height: 200px">
<script>
window.onload = function (e){
document.onkeydown = function (){
var i=100;
var d1 = document.getElementById('d1')
var t1 = document.getElementsByTagName('input')[0]
var a;
i=i - t1.value.length;
d1.innerText='还可以输入'+i+'个字符';
}
}
</script>
</body>
</html>
ok 万事大吉！！
浙公网安备 33010602011771号