javascript
第一次学，写不来，1理解逻辑，2写10遍，前3遍，抄袭，后7遍自己理解，自己写
falsy=false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div">我是一个div</div>
<form>
<p>账号:<input type="text" id="username"></p>
<p>密码:<input type="text" id="password"></p>
<p><button id="login" value="">登陆</button></p>
</form>
var divDom = document.getElementById("div");
//获取div dom
console.log(divDom.innerHTML);
var flag = 1>2
console.log(typeof flag,flag)
if(!flag){
console.log("OK")
}
//falsy: 0,"",undefined,null,false,NaN,-0
//type of falsy=false
var buttonDom = document.getElementById("login");
buttonDom.addEventListener("click",function(e){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
console.log(username,password)
//js校验
//有值就是true，无值就是null/undefined/""==false
//if(!username){}
if(username==null || username==""){
alert("请输入用户名")
//获取输入框焦点
document.getElementById("username").focus();
return;
}
//删除默认行为
e.preventDefault();
})
</script>
</body>
</html>
javascript 中的函数
Dom和绑定>p31-40
window--document
document.getElementById全写出来,window.document.getElementById
document是window的对象
DOM增，删，改，查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>添加元素</button>
<div id="box2">
<ul>
<li class="item">JAVA</li>
<li class="item">Python</li>
<li class="item">Scheme</li>
</ul>
</div>
学科:<input id="coursename" value="Go" type="text" placeholder="学科"></input>
<button id="addBtn">添加子元素</button>
<script>
//1先找到元素
//方法一
var boxDom = document.getElementById("box2");
<!-- var ulDom1 = boxDom.children[0];//boxDom.getElementByTagName("ul")[0] -->
//方法二,推荐
var ulDom = document.querySelector("#box2 > ul");
var addBtnDom = document.querySelector("#addBtn");
addBtnDom.addEventListener("click",function(){
//alert(1)
//内容
var coursename = document.getElementById("coursename").value;
//2创建一个元素，document.creatElement
var liNewDom = document.createElement("li");
liNewDom.id="xxx";
liNewDom.className="item";
liNewDom.innerHTML = coursename;
//3把lidom追加到uldom中
//3添加元素appendChild到父容器后面
ulDom.appendChild(liNewDom);
});
//parentElement.appendChild(newElement)
//4指定添加到某个元素前面
//parentElement.insertBefore(newElement,targetElement)
</script>
</body>
</html>
Ajax
Jquery(jquery是对dom的封装，简化版dom，同样vue和react是简化javascript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.3.js"></script>
</head>
<body>
<div id="box">xxxxxxx</div>
<img onload="" onerror="" src="http://www.betsy.monster./"/>
<div>
<h1>jquery</h1>
</div>
<script>
//即刻加载
//callback闭包
//jQuery=$
$(function(){});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.3.js"></script>
<style>
.box1{
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="box2" class="box2">
<ul>
<li class="item">java<button onclick="handleTrans(this)">转移</button><button onclick="handleDeLi(this)">删除</button></li>
<li class="item">Python<button onclick="handleDeLi(this)">删除</button></li>
<li class="item">Scheme<button onclick="handleDeLi(this)">删除</button></li>
</ul>
</div>
<script>
//即刻加载
$(function(){
//1找到元素
var $box2 = $("#box2");
console.log($box2)
//2之后干什么
//$box2.addClass("box1");
//属性操作
//添加
$box2.attr("username","feige");
//$box2.attr("class","box2 box1");
//修改
//$box2.attr("id","box2");
//获取
console.log($box2.attr("username"))
console.log($box2.attr("feige"))
console.log($box2.attr("id"))
//删除
$box2.removeAttr("username");
//prop操作radio和checkbox，选中不选中，checked
$("#box4").find("input[name='sex'][value='1']").prop("checked",true);
//文本值
var html = $box2.html();
console.log(html)
$box2.html("<h1>哈哈哈哈，修改了</h1>")
//val就是获取表单元素
$("#username").val();
});
</script>
</body>
</html>jquery中事件的处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery--ajax--jquery</title>
<script src="js/jquery-3.6.3.js"></script>
</head>
<body>
<script>
//ajax定义
$.ajax({
url:"xxxx",
type:"post",
data:{},
beforeSend:function(){},
success:function(serverResponse){},
fail:function(error){},
complete:function(){}
})
//get
</script>
</body>
</html>