1、DOM操作
1.1 操作内容
| 方法 | 描述 |
| text() | 获取/设置元素的标签体纯文本内容 |
| html() | 获取/设置元素的标签体超文本内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作内容</title>
<style>
div{
width: 200px;
height: 50px;
border: 1px solid red;
margin: 5px;
}
</style>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
$("#d1").html("<a href='#'>链接</a>");
$("#d2").text("<a href='#'>链接</a>")
console.log($("#d3").html());
console.log($("#d3").text());
});
</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"><a href="">111</a></div>
<div id="d4"><a href="">111</a></div>
</body>
</html>
1.2 操作属性
| 方法 | 描述 | 对比 |
| val() | 获取/设置元素的value属性值 | 相当于：js对象.value |
| attr() | 获取/设置元素的属性 | 相当于：js对象.setAttribute() / js对象.getAttribute() |
| removeAttr() | 删除属性 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作属性</title>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function() {
// 文本框value属性
console.log($("#username").val());
console.log($("#username").attr('value'));
// 添加属性--获取属性
$("#username").attr("class", "user");
console.log($("#username").attr("class"));
// 修改属性
$("#username").attr("class", "u");
console.log($("#username").attr("class"));
// 删除属性
$("#username").removeAttr("class");
console.log($("#username").attr("class"));
});
</script>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚" /> <br />
爱好 <input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br />
<input type="reset" value="清空按钮" />
<input type="submit" value="提交按钮" /><br />
</form>
</body>
</html>
1.3 操作样式
| 方法 | 描述 |
| css() | 获取/设置样式 |
| addClass() | 添加class属性值 |
| removeClass() | 删除class属性值 |
| toggleClass() | 切换class属性，有则删除，没有则添加 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作样式</title>
<script src="js/jquery-3.4.1.js"></script>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
.pink{
color: hotpink;
}
</style>
<script>
$(function(){
// 设置样式
$("ul li").css("background-color","aqua")
// 添加class属性
$("li:last").addClass("blue");
// 删除class属性
$("li:first").removeClass();
// 切换属性
$("li").toggleClass("pink");
});
</script>
</head>
<body>
<ul>
<li class="red">1</li>
<li>2</li>
<li class="pink">3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
1.4 操作元素(节点操作)
| 方法 | 描述 |
| append() | 在父标签中将子标签放在最后一个位置 |
| prepend() | 在父标签中将子标签放在第一个位置 |
| appendTo() | 例如：A.appendTo(B)，将A追加到B元素后 |
| prependTo() | 例如：A.prependTo(B)，将A添加到B元素前 |
| after() | 在该元素后面添加 |
| before() | 在改元素前面添加 |
| wrap() | 给该元素添加父元素 |
| unwrap() | 去掉该元素的父元素 |
| empty() | 清空子元素 |
| remove() | 删除自己 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作元素</title>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
// append()
$("ul").append("<li>666</li>");
// prepend()
$("ul").prepend("<li>000</li>");
// appendTo()
$("#li3").appendTo("#li1")
// prependTo()
$("#li5").prependTo("#li1")
// after()
$("ul").after("<div id='cls1'>777</div>")
// before()
$("ul").before("<div><span>-1-1-1</span></div>")
// wrap()
$("#cls1").wrap("<div class='cls'></div>")
// unwrap()
$("div span").unwrap()
// empty()
$("ul").empty()
// remove()
$("ul").remove()
});
</script>
</head>
<body>
<ul>
<li id="li1">111</li>
<li>222</li>
<li id="li3">333</li>
<li>444</li>
<li id="li5">555</li>
</ul>
</body>
</html>2、事件绑定
jQuery的事件与js的事件的功能和作用一样，只是在使用语法上稍微有些差异。
2.1 jQ事件绑定语法
jQ对象.事件函数(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQ事件绑定</title>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
$(".btn").click(function(){
let vl = $(this).val();
console.log(vl)
})
});
</script>
</head>
<body>
<input type="button" value="按钮1" class="btn"> <br>
<input type="button" value="按钮2" class="btn"> <br>
</body>
</html>2.2 常见事件
2.2.1 点击事件
| 事件 | 描述 |
| click() | 单击事件 |
| dblclick() | 双击事件 |
2.2.2 焦点事件
| 事件 | 描述 |
| blur() | 失去焦点 |
| focus() | 元素获得焦点 |
2.2.3 鼠标事件
| 事件 | 描述 |
| mousedown() | 鼠标按钮被按下 |
| mouseup() | 鼠标按键被松开 |
| mousemove() | 鼠标被移动 |
| mouseover() | 鼠标移到某元素之上 |
| mouseout() | 鼠标从某元素移开 |
2.2.4 键盘事件
| 事件 | 描述 |
| keydown() | 某个键盘按键被按下 |
| keyup() | 某个键盘按键被松开 |
| keypress() | 某个键盘按键被按下并松开 |
2.2.5 改变事件
| 事件 | 描述 |
| change() | 域的内容被改变 |
2.2.6 表单事件
| 事件 | 描述 |
| submit() | 提交按钮被点击 |
2.2.7 事件切换
| 事件 | 描述 |
| hover([over,]out) | 鼠标移入执行over函数，鼠标移出执行out函数 |
2.3 注册验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册验证</title>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
let userFlag = false;
let pwdFlag = false;
let phoneFlag = false;
$("input[name='username']").change(function(){
// console.log($(this).val())
let uname = $(this).val();
let uReg = /^[a-zA-Z].{5,7}$/;
if(uReg.test(uname)){
$("#u1").html("✔").css("color","green");
userFlag = true;
} else{
$("#u1").html("✘").css("color","red");
userFlag = false;
}
});
$("input[name='password']").change(function(){
// console.log($(this).val())
let pwd = $(this).val();
let pwdReg = /^[a-zA-Z0-9]{6,8}$/;
if(pwdReg.test(pwd)){
$("#p1").html("✔").css("color","green");
pwdFlag = true;
} else{
$("#p1").html("✘").css("color","red");
pwdFlag = false;
}
});
$("input[name='phone']").change(function(){
// console.log($(this).val())
let phone = $(this).val();
let pReg = /^[1][3-9][0-9]{9}$/;
if(pReg.test(phone)){
$("#ph1").html("✔").css("color","green");
phoneFlag = true;
} else{
$("#ph1").html("✘").css("color","red");
phoneFlag = false;
}
});
$("form").submit(function(){
if(userFlag && pwdFlag && phoneFlag){
return true;
} else{
return false;
}
})
});
</script>
</head>
<body>
<form action="">
账号：<input type="text" name="username" /><span id="u1"></span><br />
密码：<input type="password" name="password" /><span id="p1"></span><br />
手机：<input type="tel" name="phone" /><span id="ph1"></span><br />
<input type="submit" value="注册" />
</form>
</body>
</html>