JQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）
JQuery特点： 1. 轻量级 2. 富应用 3. DOM操作 4. 事件处理 5. 运动动画 6. AJAX 7. 跨浏览器（不再考虑浏览器兼容） 8. 链式调用 9. 隐式迭代 10. 丰富的插件库 ......
一，jQuery引用和语法
1.jQuery引用
下载JQuery的js文件，在本地进行引用(推荐) 官网地址：https://jquery.com/
下载之后复制到项目的js文件夹下，使用引用注入
<script src="js/jquery3.6.0.js"></script>
2.语法
1 基础语法
$(selector).action()美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
$(selector).action()
jQuery 的 action() 执行对元素的操作 比如：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 元素
$("p.test").hide() - 隐藏所有 class="test" 的 元素
$("#test").hide() - 隐藏 id="test" 的元素
2 文档就绪事件
//通过选择器选择documen内置对象，当document对象ready也就是加载完成的时候，调用方法。（类似于原生js的
window.onload）
$(document).ready(function(){
// 开始写 jQuery 代码...
});
//或者
$().ready(function(){
// 开始写 jQuery 代码...
});
//或者
$(funtion(){
// 开始写 jQuery 代码...
});
推荐使用最后一种，简洁
二，jQuery选择器
JQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS选 择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
1.标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<script src="js/jquery3.6.0.js"></script>
<script>
//等待dom元素加载完毕，类似于js原生代码的window.onload
$(document).ready(function() {
//选择所有button元素，当button被点击时，调用函数
$("button").click(function() {
//选择所有p标签，将p标签隐藏
$("p").hide();
})
});
</script>
<style>
.div1 {
width: 200px;
height: 200px;
backgroundcolor: red;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<button>点击我隐藏所有段落 </button>
</body>
</html>
2.id选择器
页面中元素的 id 应该是唯一的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// $("div p").hide(3000);
// $("div > p").hide(3000);
$("p+span").hide(3000);
});
});
</script>
</head>
<body>
<div>
<p>aa</p>
<span>span1</span>
</div>
<button id="btn">确定</button>
</body>
</html>3.class选择器
同id选择器一样，只不过是将id标签换为class标签
4.层次选择器
通过DOM元素间的层次关系来获取元素，主要层次关系包括父子、后代、相邻、兄弟关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<script src="js/jquery3.6.0.js"></script>
<style>
.div1 {
width: 200px; height: 200px; backgroundcolor: red;
}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
<button>隐藏段落</button>
<script>
$(document).ready(function() {
$("button").click(function() {
//后代选择器
// $("div p").hide();
//子选择器
$("div>p").hide();
});
});
</script>
</body>
</html>
5.简单过滤选择器
过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；
简单过滤是使用最广泛的一种。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
// var a = $("ul>li:first").html();
// console.log(a);
// var b = $("ul>li:last").html();
// console.log(b);
//获取索引值为偶数的元素
// $("ul>li:even").each(function(){
// console.log($(this).html());
// });
//获取索引值为奇数的元素
$("ul li:odd").each(function(){
console.log($(this).html());
})
});
});
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<button id="btn">确定</button>
</body>
</html>6 .属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以"["开始，以"]"结束。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//获取属性为userName的值
// var a = $("input[name='userName']").val();
var a = $("input[name^='user']").val();
console.log(a);
});
});
</script>
</head>
<body>
<input type="text" name="userName"/>
<button id="btn">确定</button>
</body>
</html>7.子元素过滤选择器
获取所有父元素中指定的某个元素
first-child:获取每个父元素下的第一个子元素
first:获取第一个父元素下的第一个子元素
last-child：获取每个父元素下的最后一个子元素
last：获取最后一个父元素下的最后一个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function() {
// $("ul li:first-child").each(function() {
// console.log($(this).html());
// });
// $("ul li:last-child").each(function() {
// console.log($(this).html());
// });
$("ul li:first").each(function() {
console.log($(this).html());
});
$("ul li:last").each(function() {
console.log($(this).html());
});
});
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ul>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
</ul>
<button id="btn">确定</button>
</body>
</html>
8.表单对象属性过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//选择复选框被鼠标选中的内容
$("input[name='hobby']:checked").each(function(){
console.log($(this).val());
});
//选择下拉框被鼠标选中的内容
var a = $("#star option:selected").text();
console.log(a);
});
});
</script>
</head>
<body>
<input type="checkbox" name="hobby" value="bsb"/>篮球
<input type="checkbox" name="hobby" value="ftb"/>足球
<select id="star">
<option value="1">巨蟹座</option>
<option value="2">白羊座</option>
<option value="3">处女座</option>
</select>
<button id="btn">确定</button>
</body>
</html>9.表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//选择表单所有复选框
$("#btn").click(function(){
$(":checkbox:checked").each(function(){
console.log($(this).val());
});
});
});
</script>
</head>
<body>
<input type="checkbox" name="hobby" value="bsb"/>篮球
<input type="checkbox" name="hobby" value="ftb"/>足球
<button id="btn">确定</button>
</body>
</html>三，JQuery事件
常见事件
1.ready()
该方法允许我们在文档完全加载完后执行函数
简化版：$(function(){ })
2.click()和dbclick()
click:鼠标单击事件
dbclick:鼠标双击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//鼠标单击事件
$("#btn").click(function(){
$(":input").each(function(){
console.log($(this).val());
});
});
//鼠标双击事件
$("#btn").dbclick(function(){
$(":input").each(function(){
console.log($(this).val());
});
});
});
</script>
</head>
<body>
<input type="checkbox" name="hobby" value="bsb"/>篮球
<input type="checkbox" name="hobby" value="ftb"/>足球
<select id="star">
<option value="1">巨蟹座</option>
<option value="2">白羊座</option>
<option value="3">处女座</option>
</select>
<button id="btn">确定</button>
</body>
</html>3.mouseenter(),mouseleave(),mousedown(),mouseup()
mouseenter() :当鼠标指针穿过元素时，会发生 mouseenter 事件
mouseleave():当鼠标指针离开元素时，会发生 mouseleave 事件
mousedown():当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件
mouseup():当在元素上松开鼠标按钮时，会发生 mouseup 事件
使用方法同click()相同
4.hover()
hover():方法用于模拟光标悬停事件 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函 数(mouseleave),包含2个函数
格式：
hover(function(){},function(){});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("tbody tr").hover(function(){
$(this).css("background-color","aqua");
$(this).css("color","red");
},function(){
$(this).css("background-color","white");
$(this).css("color","blue");
});
$("tbody tr").dblclick(function(){
$(this).remove();
})
});
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="4" width="600" id="tb1" >
<thead>
<tr >
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>java</td>
<td>100</td>
<td>34</td>
<td>444</td>
</tr>
<tr>
<td>c++</td>
<td>211</td>
<td>22</td>
<td>44</td>
</tr>
</tbody>
</table>
</body>
</html>5.焦点事件
focus():当元素获得焦点时，发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
blur():当元素失去焦点时，发生 blur 事件。
使用方法同click()
四，DOM操作元素
1.获得DOM节点
1 获取元素节点
通过选择器获得
2 获得文本节点
text()：设置或返回所选元素的文本内容
text()只输出标签内的文本内容，和js的innerText方法一样
html()：设置或返回所选元素的内容（包括 HTML 标记）
打印当前标签内的文本内容，如果有子标签，则把子标签本身和子标签内的文本一起打印 这个和js的innerHTML差不多
val()：设置或返回表单字段的值 元素的值是通过 value 属性设置的。
该方法大多用于 input 元素。
在text中插入新子标签时，会将标签当做文本打印
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//打印元素标签内容
var a = $("p").html();
console.log(a);
//打印文本内容
console.log($("p").text());
$("p").html("<span>span</span>");
// $("p").text("<span>span</span>");
//返回值
var b = $(":text").val();
console.log(b);
b = b + " hello";
$(":text").val(b);
});
});
</script>
</head>
<body>
<p>aa</p>
<input type="text" name="userName"/>
<button id="btn">dd</button>
</body>
</html>3.获得属性节点
利用JQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。
attr()方法的参数可以 是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字
当参数是两个时，第一个参数是属性的类型，第二个参数是属性的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//为p设置一个title属性的值，内容为：这是段落
$("p").attr("title","这是段落");
var node = $("p").attr("title");
console.log(node);
});
});
</script>
</head>
<body>
<p>aa</p>
<input type="text" name="userName"/>
<button id="btn">dd</button>
</body>
</html>4.获得父亲，兄弟，子节点
$().parent(selector)：获取父节点
$().parents(selector)：获取祖先元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//获取父亲节点
var a = $("p").parent();
console.log(a.html());
//获取祖先节点
$("p").parents("body").each(function(){
console.log($(this).html());
});
});
});
</script>
</head>
<body>
<div>
<p>qq</p>
</div>
<button id="btn">aa</button>
</body>
</html>$().previousSibling()：获取上一个兄弟节点
$().prevAll()：获取之前所有的兄弟节点
$().nextSibling()：获取下一个兄弟节点
$().nextAll()：获取之后所有的兄弟节点
$().siblings()：获取所有的兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function() {
$("#btn").click(function() {
var p2 = $("#p2");
//获取当前元素的前一个兄弟节点
var p1 = p2.prev();
console.log(p1.html());
//获取当前元素后一个兄弟节点
var p3 = p2.next();
console.log(p3.html());
console.log("-------");
//获取当前元素的之前的所有兄弟节点
p2.prevAll().each(function() {
console.log($(this).html());
});
console.log("-------");
//获取当前元素的之后的所有兄弟节点
p2.nextAll().each(function() {
console.log($(this).html());
});
//获取当前元素的所有兄弟节点
console.log("-------");
p2.siblings().each(function() {
console.log($(this).html());
})
})
})
</script>
</head>
<body>
<div>
<p id="p0">aqa</p>
<p id="p1">aa</p>
<p id="p2">affa</p>
<p id="p3">aaaffa</p>
<p id="p4">aaaffaaaa</p>
</div>
<button id="btn">确定</button>
</body>
</html>
$().children()：获取所有直接子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function() {
$("#btn").click(function() {
//获取当前元素下所有的子节点
$("div").children().each(function() {
console.log($(this).html());
})
//获取当前元素下指定的子孙元素
console.log($("div").find("#p2").html());
//这里通过find方法获取div的子孙元素span
console.log($("div").find("span").html());
//.find方法需要指定参数否则会返回undefined
console.log($("div").find().html());
});
})
</script>
</head>
<body>
<div>
<p id="p0">aqa</p>
<p id="p1">aa</p>
<p id="p2">affa</p>
<p id="p3">aaaffa</p>
<p id="p4">
aaa
<span>111</span>
</p>
</div>
<button id="btn">确定</button>
</body>
</html>
2:新增DOM节点
插入节点方法
append()：向每个匹配的元素内部末尾插入内容
appendTo()：将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操 作，即不是将B追加到A中，而是将A追加到B中
prepend()：向每个匹配的元素内部头部插入内容
prependTo()：将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操 作，即不是将B前置到A中，而是将A前置到B中
after()：在每个匹配的元索之后插入内容
insertAfter()：将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操 作，即不是将B插入到A后面，而是将A插入到B后面：
before()：在每个匹配的元素之前插入内容
insertBefore()：将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B) 的操作，即不是将B插入到A前面，而是将A插入到B前面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//append方法表示在当前元素的内部的尾部插入一个新元素
//该方法的调用者是父元素，方法的参数时子元素
// $("div").append("<p>aa</p>");
//appendTo方法表示把新元素插入到父元素内部的尾部
//该方法的调用者时子元素，方法的参数是父元素
// $("<p>gg</p>").appendTo("div");
// //prepend方法表示在当前元素的内部的最前面插入一个新元素
// //该方法的调用者是父元素，方法的参数时子元素
// $("div").prepend("<p>cc</p>");
// //prependTo方法表示在当前父9元素的内部的最前面插入一个新元素
// //该方法的调用者是子元素，方法的参数是父元素
// $("<p>bb</p>").prependTo("div");
//after方法在当前元素后插入新元素，新元素和当前元素是兄弟关系
//方法的调用者时当前元素，参数是新元素
$("div").after("<p>44</p>");
//insertAfter方法表示把新元素插入到当前元素的后面，新元素和当前元素是兄弟关系
//方法的调用者是新元素，参数是当前元素
$("<p>44</p>").insertAfter("div");
//before方法在当前元素前面插入新元素，新元素和当前元素是兄弟关系
//方法的调用者时当前元素，参数是新元素
$("div").before("<p>55</p>");
//insertBefore方法表示把新元素插入到当前元素的前面，新元素和当前元素是兄弟关系
//方法的调用者是新元素，参数是当前元素
$("<p>55</p>").insertBefore("div");
})
})
</script>
</head>
<body>
<div>
<p>pp</p>
</div>
<button id="btn">确定</button>
</body>
</html>3.更新DOM节点
修改DOM节点内容
使用.attr()方法时，传入两个参数来进行更改，html()方法中加入参数修改节点的值
即获取DOM节点时，添加要修改的内容作为参数来更改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//attr修改属性
$("a").attr("href","http://www.sina.com.cn")
$("a").attr("target","_blank");
//html修改文本
$("a").html("新浪");
})
})
</script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<button id="btn">确定</button>
</body>
</html>复制节点
复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为,使用clone()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//clone表示复制元素
var p = $("#l1").clone();
$("ul").append(p);
})
})
</script>
</head>
<body>
<ul>
<li id="l1">列表项1</li>
<li id="l2">列表项2</li>
</ul>
<button id="btn">确定</button>
</body>
</html>替换节点
replaceWith()：将所有匹配的元素都替换成指定的HTML或者DOM 元素
replaceAll():与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
$("#btn").click(function(){
//replaceWith方法用新元素替换当前元素
//方法调用者是当前元素，参数是新元素
$("#l1").replaceWith("<li>44</li>");
replaceAll方法用新元素替换当前元素
//方法调用者是新元素，参数是当前元素
$("<li>99</li>").replaceAll("#l2");
})
})
</script>
</head>
<body>
<ul>
<li id="l1">列表项1</li>
<li id="l2">列表项2</li>
</ul>
<button id="btn">确定</button>
</body>
</html>4.删除节点
remove()： 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
detach()： 从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
empty()： 该方法可以清空元素中的所有的后代节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"> </script>
<script>
$(function(){
$("#btn").click(function(){
$("#l1").hover(function(){
$(this).css("color","red");
},function(){
$(this).css("color","black");
});
// setTimeout(function(){
// //remove会删除掉元素上绑定的事件，detach不会删除事件
// // var l1 = $("#l1").remove();
// var l1 = $("#l1").detach();
// $("ul").append(l1);
// },2000);
//empty方法删除该元素下的所有子元素
$("ul").empty();
})
})
</script>
</head>
<body>
<ul>
<li id="l1">dd</li>
<li id="l2">hh</li>
</ul>
<button id="btn">确定</button>
</body>
</html>5.更改css
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.font20{
font-size: 20px;
color: red;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//addClass在当前元素上添加类样式
$("#btn").click(function(){
$("p").addClass在当前元素上添加样式类("font20");
});
//removeClass在当前元素上删除类样式
$("#btn1").click(function(){
$("p").removeClass("font20");
});
//toggleClass是addClass和removeClass操作的切换
$("#btn2").click(function(){
$("p").toggleClass("font20");
});
})
</script>
</head>
<body>
<p>aa</p>
<button id="btn">addClass</button>
<button id="btn1">removeClass</button>
<button id="btn2">toggleClass</button>
</body>
</html>toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性
五，jQuery动画
hide():隐藏
show():元素显示
toggle():元素隐藏和现实的切换
fadeOut():淡出
fadeIn():淡入
fadeToggle():淡出淡入切换
slideUp():方法用于向上滑动元素
slideDown():方法用于向下滑动元素
slideToggle():向上向下滑动元素切换
animate():自定义动画
可在括号中设置时间，调整动画效果，单位为毫秒
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//hide:隐藏
$("#btn").click(function(){
$("div").hide(3000);
});
//show:元素显示
$("#btn1").click(function(){
$("div").show(3000);
});
//toggle元素隐藏和现实的切换
$("#btn2").click(function(){
$("div").toggle(3000);
});
//fadeOut淡出
$("#btn3").click(function(){
$("div").fadeOut淡出(3000);
});
//fadeIn淡入
$("#btn4").click(function(){
$("div").fadeIn(3000);
});
//fadeToggle淡出淡入切换
$("#btn5").click(function(){
$("div").fadeToggle(3000);
});
//slideUp方法用于向上滑动元素
$("#btn6").click(function(){
$("div").slideUp(3000);
});
//slideDown方法用于向下滑动元素。
$("#btn7").click(function(){
$("div").slideDown(3000);
});
//slideToggle向上向下滑动元素切换
$("#btn8").click(function(){
$("div").slideToggle(3000);
});
//animate自定义动画
$("#btn9").click(function(){
$("div").animate({
"margin-top":"50px",
"margin-left":"100px"
},3000);
});
})
</script>
</head>
<body>
<div> </div>
<button id="btn">hide</button>
<button id="btn1">show</button>
<button id="btn2">toggle</button>
<button id="btn3">fadeOut</button>
<button id="btn4">fadeIn</button>
<button id="btn5">fadeToggle</button>
<button id="btn6">slideUp</button>
<button id="btn7">slideDown</button>
<button id="btn8">slideToggle</button>
<button id="btn9">animate</button>
</body>
</html>最后的练习
创建表单页面，在控制台打印出输入的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0px;
}
.main {
width: 100%;
font-family: "方正舒体";
}
.top {
width: 100%;
height: 20px;
background-color: aliceblue;
}
.center {
width: 100%;
height: 20px;
}
.sp {
height: 18px;
font-size: 25px;
margin-top: 3px;
}
.sp1 {
border-bottom: 5px solid aqua;
}
.bottom {
width: 100%;
height: 600px;
margin-top: 30px;
margin-left: 50px;
font-size: 20px;
}
input {
margin-top: 20px;
border-radius: 5px;
}
.inp {
width: 300px;
height: 20px;
border: 2px solid aqua;
}
select {
width: 120px;
height: 30px;
margin-top: 5px;
border-radius: 5px;
font-family: "方正舒体";
border: 2px solid aqua;
}
textarea {
margin-top: 15px;
border-radius: 5px;
border: 2px solid aqua;
}
button {
width: 80px;
height: 30px;
margin-top: 15px;
margin-left: 40px;
background-color: aqua;
border-radius: 3px;
font-family: "方正舒体";
font-size: 20px;
border: 2px solid aqua;
}
button:hover {
background-color: darkgrey;
color: aqua;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function() {
$("#btn").click(function() {
//获取每个输入的值
var userName = $("input[name='userName']").val();
var passWord = $("input[name='pwd']").val();
var sex = $("input[name='sex']:checked").val();
var hobbys = [];
var arrys = $("input[name='hobby']:checked");
for (var i = 0; i < arrys.length; i++) {
hobbys[i] = $(arrys[i]).val();
}
var star = $("#star option:selected").val();
var remark = $("#remark").val();
//声明变量存放值
var con = {};
con.userName = userName;
con.passWord = passWord;
con.sex = sex;
con.hobby = hobbys;
con.star = star;
con.remark = remark;
console.log(con);
return false;
});
});
</script>
</head>
<body>
<div class="main">
<div class="top">
<span><b>位置：</b>首页 -> 表单</span>
</div>
<div class="center">
<div class="sp">
<span class="sp1"><b>注册信息</b></span>
</div>
<hr />
</div>
<div class="bottom">
<form>
账号:<input class="inp" type="text" name="userName" placeholder="请输入账号" /><br />
密码:<input class="inp" type="password" name="pwd" placeholder="请输入密码" /><br />
性别:<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女<br />
爱好:<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="dance" />跳舞<br />
星座:<select name="star" id="star">
<option value="白羊座">白羊座</option>
<option value="巨蟹座">巨蟹座</option>
<option value="狮子座">狮子座</option>
<option value="处女座">处女座</option>
</select><br />
备注:<textarea id="remark" name="remark" rows="5" cols="50"></textarea><br />
<button id="btn">注册</button>
</form>
</div>
</div>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
