尚硅谷jQuery学习笔记
文章目录
- 初识jQuery
- jQuery对象和dom对象的区别
- 基础选择器
- 层级选择器
- 表单选择器
- jQ基本语法
- jQ语法的应用
- 全选反选全不选操作
- jQ的增删改
- appendTo应用
- CSS样式
- jQuery动画
- jQ动画应用实例
- jQ事件操作
- jQ事件`event`对象
- 图片跟随
- 注意
初识jQuery
jQuery其实就是javascript的一个库，通过引入使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="./jquery-3.5.1.min.js">
script>
<script type="text/javascript">
//当$()中是个函数的时候相当于win.load加载函数
$(function () {
alert($)//$符号是一个函数的缩写
var $btnid = $("#btnid")
$btnid.click(function () {
alert("HelloWorld")
})
//当$()中是个标签的时候，用于加载标签
$("\n" +
" 运用$添加标签\n" +
"").appendTo("body");
// $("#id属性值") id选择器，根据id查询标签对象
// $("标签名") 标签名选择器，根据指定的标签名查询标签对象
// $(".class属性值") 类型选择器，可以根据class属性查询标签对象
var btn = $("button")
alert(btn.length)
// 组合选择器,将符合任意一个选择器条件的加入数组
var jqlist = $("button,span")
for (var i = 0; i < jqlist.length; i++)
alert(jqlist[i])
alert("组合选择器提取的标签个数" + jqlist.length)
//$(dom对象)会转化为jQuery对象
var btnobj = document.getElementById("btn1")
alert('dom对象' + btnobj + "jQuery对象" + $(btnobj))
});
script>
head>
<body>
<button id="btnid">sayhellobutton>
<br>
<button id="btn1">1button>
<button>2button>
<button>3button>
<span>span>
body>
html>
jQuery对象和dom对象的区别
jQuery对象本质就是dom数组+jQuery提供的一系列功能函数
比如，使用$("#id")查询的jQuery对象可以通过jq[0]来转化为dom对象。
注意
jQuery对象不能使用dom的方法，同样dom也不能使用jQuery的方法
基础选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
.two {
color: green;
}
style>
<script src="jquery-3.5.1.min.js" type="text/javascript">script>
<script type="text/javascript">
$(function () {
// JQ对象可以改变css样式
$("#btn1").click(function () {
// 将查找到的div标签换一下css样式，方便观察
$("#none").css("background-color", "red");
});
$("#btn2").click(function () {
$(".two").css("background-color", "red")
})
$("#btn3").click(function () {
$("div").css("background-color", "black")
})
$("#btn4").click(function () {
$("*").css("background-color", "yellow")
})
$("#btn5").click(function () {
$("span,div").css("background-color", "black")
})
})
script>
head>
<body>
<button id="btn1">查找id为none的标签button>
<button id="btn2">查找class为two的标签button>
<button id="btn3">查找div标签button>
<button id="btn4">查找所有标签包括body等button>
<button id="btn5">查找所有span和div标签button>
<div id="none">
id为none的div标签
div>
<div class="two">class为two的div标签div>
<span>span标签span>
body>
html>
层级选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
.two {
color: green;
}
style>
<script src="jquery-3.5.1.min.js" type="text/javascript">script>
<script type="text/javascript">
$(function () {
// JQ对象可以改变css样式
$("#btn1").click(function () {
// 将查找到的div标签换一下css样式，方便观察
$("body div").css("background-color", "red");
});
$("#btn2").click(function () {
$("body > div").css("background-color", "red")
})
$("#btn3").click(function () {
$("button+div").css("background-color", "black")
})
$("#btn4").click(function () {
$("button~div").css("background-color", "yellow")
})
$("#btn5").click(function () {
$("#none+div").css("background-color", "black")
})
})
script>
head>
<body>
<button id="btn1">选择body内的所有div标签button>
<button id="btn2">选择body中的div子元素button>
<button id="btn3">选择button后紧跟的div的标签button>
<button id="btn4">选择button后的多个div标签button>
<button id="btn5">选择id为none的下一个div标签button>
<div id="none">
id为none的div标签
div>
<label>-----------------------------我是label分割线-------------------------------------label>
<div class="two">class为two的div标签div>
<span><div>我是span里面的标签$("body > div")找不到我div>span>
body>
html>
表单选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="jquery-3.5.1.min.js">
script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
//val是jQ表单的取值和赋值方法
$(":text:enabled").val("改变了可用文本框的内容")
})
$("#btn2").click(function () {
//val是jQ表单的取值和赋值方法
$(":text:disabled").val("改变了不可用文本框的内容")
})
$("#btn3").click(function () {
//each是jQ对象提供用来遍历的方法
$(":checkbox:checked").each(function () {
alert(this.value)
})
})
$("#btn4").click(function () {
//each是jQ对象提供用来遍历的方法
$("select option:checked").each(function () {
alert(this.value)
})
})
})
script>
head>
<body>
<form>
<br>
<input type="text" value="可用text文本"><br>
<input type="text" disabled="disabled" value="不可用text文本"><br>
<input type="text" value="可用text文本"><br>
<input type="text" disabled="disabled" value="不可用text文本"><br>
<input type="checkbox" value="text1">text1
<input type="checkbox" value="text2">text2
<input type="checkbox" value="text3">text3
<input type="checkbox" value="text4">text4
<input type="checkbox" value="text5">text5<br>
<select>
<option selected="selected">中国option>
<option>日本option>
<option>美国option>
<option>意大利option>
select>
form>
<button id="btn1">改变可用文本框内容button>
<button id="btn2">改变不可用文本框内容button>
<button id="btn3">查看复选框选中内容button>
<button id="btn4">查看下拉框选中内容button>
body>
html>
jQ基本语法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js" type="text/javascript">script>
<script type="text/javascript">
$(function () {
//传递参数是设置，不传参数是取值
alert($("div").html());
$("div").html("html设置div标签
")
alert($("div").text());
$("div").text("text只能设置文本
")
$("#btn").click(function () {
alert($("#username").val())
})
})
script>
head>
<body>
<div>我是div标签<span>我是div里面的span标签span>div>
<input type="text" id="username" name="username">
<button id="btn">val操作表单标签button>
body>
html>
jQ语法的应用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<script type="text/javascript">
$(function () {
// 通过value值进行操作
// value可以作为默认值并且作用和name类似可以进行val识别
// $(":radio").val(["radio1"])
// $(":checkbox").val(["checkbox1", "checkbox4", "checkbox2"])
// $("#mul").val(["mul1", "mul3", "mul5"])
// $("#mul1").val(["sin5"])
// 等价操作
$(":radio,:checkbox,#mul,#mul1").val(["radio1", "checkbox1", "checkbox4", "checkbox2", "mul1", "mul3", "sin5"])
// 注意事项：option标签中value属性不会作为默认值，但是在大多数标签中是可以作为默认值或者名字
})
script>
head>
<body>
<input type="radio" name="radio" value="radio1">男
<input type="radio" name="radio" value="radio2">女<br>
<input type="checkbox" name="checkbox" value="checkbox1">check1
<input type="checkbox" name="checkbox" value="checkbox2">check2
<input type="checkbox" name="checkbox" value="checkbox3">check3
<input type="checkbox" name="checkbox" value="checkbox4">check4
<br>
<select multiple="multiple" id="mul">
<option value="mul1">中国option>
<option value="mul2">美国option>
<option value="mul3">日国option>
<option value="mul4">澳大利亚option>
<option value="mul5">俄罗斯option>
select>
<br><br>
<select id="mul1">
<option value="sin1">中国option>
<option value="sin2">美国option>
<option value="sin3">日国option>
<option value="sin4">澳大利亚option>
<option value="sin5">俄罗斯option>
select>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<script type="text/javascript">
$(function () {
// 通过value值进行操作
// value可以作为默认值并且作用和name类似可以进行val识别
// $(":radio").val(["radio1"])
// $(":checkbox").val(["checkbox1", "checkbox4", "checkbox2"])
// $("#mul").val(["mul1", "mul3", "mul5"])
// $("#mul1").val(["sin5"])
// 等价操作
//$(":radio,:checkbox,#mul,#mul1").val(["radio1", "checkbox1", "checkbox4", "checkbox2", "mul1", "mul3", "sin5"])
// 注意事项：option标签中value属性不会作为默认值，但是在大多数标签中是可以作为默认值或者名字
$(":checkbox:first").attr("name", "check1")
alert($(":checkbox:first").attr("name"))// 返回对应的值
$(":checkbox:first").prop("name", "check1")
alert($(":checkbox:first").prop("name"))//返回对应的值
alert($(":checkbox:first").attr("checked"))// 返回对应的值，undifined
alert($(":checkbox:first").prop("checked"))//返回true或false
// 设置自己的属性
$(":checkbox:first").prop("try", "successful")
alert($(":checkbox:first").prop("try"))
})
script>
head>
<body>
<input type="radio" name="radio" value="radio1">男
<input type="radio" name="radio" value="radio2">女<br>
<input type="checkbox" name="checkbox" value="checkbox1">check1
<input type="checkbox" name="checkbox" value="checkbox2">check2
<input type="checkbox" name="checkbox" value="checkbox3">check3
<input type="checkbox" name="checkbox" value="checkbox4">check4
<br>
<select multiple="multiple" id="mul">
<option value="mul1">中国option>
<option value="mul2">美国option>
<option value="mul3">日国option>
<option value="mul4">澳大利亚option>
<option value="mul5">俄罗斯option>
select>
<br><br>
<select id="mul1">
<option value="sin1">中国option>
<option value="sin2">美国option>
<option value="sin3">日国option>
<option value="sin4">澳大利亚option>
<option value="sin5">俄罗斯option>
select>
body>
html>
全选反选全不选操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../../jquery-3.5.1.min.js">script>
<script type="text/javascript">
$(function () {
$("#checkAllbtn").click(function () {
$(":checkbox").prop("checked", true)
})
$("#NoCheckAllbtn").click(function () {
$(":checkbox").prop("checked", false)
})
$("#CheckReversebtn").click(function () {
$(":checkbox[name='items']").each(function () {
this.checked = !this.checked
})
var allcheck = $(":checkbox[name='items']").length
var all = $(":checkbox[name='items']:checked").length
// if(all==allcheck)
// $("#checkAllBox").prop("checked","true")
$("#checkAllBox").prop("checked", all == allcheck)
})
$("#submitbtn").click(function () {
$(":checkbox[name='items']").each(function () {
if (this.checked)
alert(this.value)
})
})
$("#checkAllBox").click(function () {
$(":checkbox[name='items']").prop("checked", this.checked)
})
// 对于多个相同属性的标签设置事件
$(":checkbox[name='items']").click(function () {
var all = $(":checkbox[name='items']").length
var allcheck = $(":checkbox[name='items']:checked").length
$("#checkAllBox").prop("checked", all == allcheck)
})
})
script>
head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkAllBox"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="蓝球"/>篮球
<input type="checkbox" name="items" value="乒乓球"/>兵乓球
<input type="checkbox" name="items" value="巧固球"/>巧固球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<br>
form>
<button id="checkAllbtn">全选button>
<button id="NoCheckAllbtn">全不选button>
<button id="CheckReversebtn">反选button>
<button id="submitbtn">提交button>
body>
html>
jQ的增删改
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<script type="text/javascript">
$(function (newChild, refChild) {
// 在div标签内部插入标签
$("我是appendTo的标题
").appendTo("div")
$("我是prependTo的标题
").prependTo("div")
// 在div标签外部插入标签
$("我是insertAfter的标题,插在每个div标签后面
").insertAfter("div")
$("我是insertBefore的标题,插在每个div标签前面
").insertBefore($("div"), refChild)
// 改变标签
$("div").replaceWith("我是replaceWith的标题
")
$("我是replaceAll的标题
").replaceAll("div")
// 删除标签或者删除标签内容
$("button").remove()
$("span").empty()
})
script>
head>
<body>
<div>
我是第一个div标签
div>
<div>
我是第二个div标签
div>
<button>我是被删除的按钮，应该没人看见我，我就多写几行练练打字button>
<span style="background-color: aquamarine">我是内容应该也没人看的见，我多写几行练练打字span>
body>
html>
appendTo应用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<script type="text/javascript">
$(function () {
// 将上边选中的option移动到下面
$("button:eq(0)").click(function () {
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
})
// 将上面全部option移动到下面
$("button:eq(1)").click(function () {
$("#left option").appendTo($("select:eq(1)"));
})
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
})
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
})
})
script>
head>
<body>
<div id="left">
<select multiple="multiple" name="sel1">
<option value="opt1">option1option>
<option value="opt2">option2option>
<option value="opt3">option3option>
<option value="opt4">option4option>
<option value="opt5">option5option>
<option value="opt6">option6option>
select>
<button>选中添加到下边button>
<button>全部添加到下边button>
button>
div>
<div id="right">
<select multiple="multiple" name="sel2">
select>
<button>选中的删除到上边button>
<button>全部删除到上边button>
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<script type="text/javascript">
$(function () {
// 添加行
$("#addEmp").click(function () {
var name = $("#empName").val()
var email = $("#empemail").val()
var salary = $("#empsalary").val()
var trow = $(" \n" +
" " + name + " \n" +
" " + email + " \n" +
" " + salary + " \n" +
" delete \n" +
" ")
trow.appendTo($("#employeeTable"))
trow.find("a").click(function () {
var rname = trow.find("td:first").text()
if (confirm("确定要删除" + rname + "？")) { // 取到行对象，然后删除
trow.remove();
}
return false;
})
})
// 当页面加载触发后，只是绑定了三个a标签
$("a").click(function () {
// this是当前正在响应事件的dom对象
var row = $(this).parent().parent()
var rname = row.find("td:first").text()
if (confirm("确定要删除" + rname + "？")) { // 取到行对象，然后删除
row.remove();
}
return false;
})
})
script>
head>
<body>
<table id="employeeTable" border="1px" align="center">
<tr>
<th>Nameth>
<th>Emailth>
<th>Salaryth>
<th>th>
tr>
<tr>
<td>Tomtd>
<td>[email protected]td>
<td>5000td>
<td><a href="deleteEmp?id-001">deletea>td>
tr>
<tr>
<td>Jerrytd>
<td>[email protected]td>
<td>8000td>
<td><a href="deleteEmp?id-002">deletea>td>
tr>
<tr>
<td>Bobtd>
<td>[email protected]td>
<td>10000td>
<td><a href="deleteEmp?id-003">deletea>td>
tr>
table>
<div id="formDiv">
<h4 align="center">添加新员工h4>
<table align="center">
<tr>
<td>
name:
td>
<td>
<input type="text" id="empName">
td>
tr>
<tr>
<td>
email:
td>
<td>
<input type="text" id="empemail">
td>
tr>
<tr>
<td>
salary:
td>
<td>
<input type="text" id="empsalary">
td>
tr>
<tr>
<td colspan="2" align="center">
<button id="addEmp">提交button>
td>
tr>
table>
div>
body>
html>
CSS样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">
div {
width: 100px;
height: 255px;
}
/*加上div的原因是限制样式只给div标签使用*/
div.whiteborder {
border: 2px white solid
}
div.redDiv {
background-color: red;
}
div.blueBorder {
border: 5px blue solid;
}
style>
<script src="jquery-3.5.1.min.js">script>
<script type="text/javascript">
$(function () {
var $divEle = $("div:first")
$("#btn1").click(function () {
$divEle.addClass('redDiv blueBorder')
})
$("#btn2").click(function () {
$divEle.removeClass('blueBorder')
})
$("#btn3").click(function () {
$divEle.toggleClass('redDiv')
})
$("#btn4").click(function () {
var post = $divEle.offset()
console.log(post)
$divEle.offset({
top: 100,
left: 50
})
})
})
script>
head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
div>
td>
<td>
<div>
<input type="button" value="addClass()" id="btn1">
<input type="button" value="removeClass()" id="btn2">
<input type="button" value="toggleClass()" id="btn3">
<input type="button" value="offset()" id="btn4">
div>
td>
tr>
table>
body>
html>
jQuery动画
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<style type="text/css">
div {
width: 100px;
height: 255px;
}
/*加上div的原因是限制样式只给div标签使用*/
div.whiteborder {
border: 2px white solid
}
div.redDiv {
background-color: red;
}
div.blueBorder {
border: 5px blue solid;
}
style>
<script type="text/javascript">
$(function () {
var cdiv = $("div")
var cimg = $("img")
// 第二个参数是回调函数
// function cartoon(){
// cdiv.toggle(1000,cartoon)
// }
// cartoon();
$("#btn1").click(function () {
// 可以控制动画显示时间
cdiv.show(1000)
cimg.show(1000)
})
$("#btn2").click(function () {
cdiv.hide(1000)
cimg.hide(1000)
})
$("#btn3").click(function () {
cdiv.fadeIn(1000)
cimg.fadeIn(1000)
})
$("#btn4").click(function () {
cdiv.fadeOut(1000)
cimg.fadeOut(1000)
})
$("#btn5").click(function () {
cdiv.fadeTo(1000, 0.5)
cimg.fadeTo(1000, 0.5, function () {
alert("淡化完成")
})
})
$("#btn6").click(function () {
cdiv.fadeToggle(1000)
cimg.fadeToggle(1000)
})
$("#btn7").click(function () {
cdiv.toggle(1000)
cimg.toggle(1000)
})
})
script>
head>
<body>
<table>
<tr>
<td>
<button id="btn1">显示showbutton>
td>
<td rowspan="7">
<div class="blueBorder">
我是动画
div>
td>
tr>
<tr>
<td>
<button id="btn2">隐藏hidebutton>
td>
tr>
<tr>
<td>
<button id="btn3">淡入fadeInbutton>
td>
tr>
<tr>
<td>
<button id="btn4">淡出fadeOutbutton>
td>
tr>
<tr>
<td>
<button id="btn5">淡化到fadeTobutton>
td>
tr>
<tr>
<td>
<button id="btn6">淡化切换到fadeTogglebutton>
td>
tr>
<tr>
<td>
<button id="btn7">显示/隐藏切换togglebutton>
td>
tr>
table>
<img src="screen.jpg" height="1080" width="1919"/>
body>
html>
jQ动画应用实例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<style type="text/css">
.hightcolor {
color: #F50;
}
style>
<script type="text/javascript">
$(function () {
$("li:gt(5):not(:last)").hide();
$("#more").click(function () {
$("li:gt(5):not(:last)").toggle();
// 判断是否是隐藏
if (!$("li:gt(5):not(:last)").is(":hidden")) {
$("a span").html("![](\"向上箭头.png\")
显示精简品牌");
$("li:contains('快播')").addClass("hightcolor")
} else {
$("a span").html("![](\"向下箭头.png\")
显示全部品牌");
$("li:contains('快播')").removeClass("hightcolor")
}
return false;
})
})
script>
head>
<body>
<ul>
<li><a href="#">prohuba>li>
<li><a href="#">githuba>li>
<li><a href="#">bilibilia>li>
<li><a href="#">tencenta>li>
<li><a href="#">taobaoa>li>
<li><a href="#">爱奇艺a>li>
<li><a href="#">快播a>li>
<li><a href="#">优酷a>li>
<li><a href="#">暴风影音a>li>
<li><a href="#">腾讯视频a>li>
<li><a href="#">其他a>li>
ul>
<a href="more.html" id="more"><span><img src="向下箭头.png" height="16" width="16"/>显示全部品牌span>a>
body>
html>
jQ事件操作
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery-3.5.1.min.js">script>
<script type="text/javascript">
window.onload = function () {
alert("原生js页面加载完成之后---1")
}
window.onload = function () {
alert("原生js页面加载完成之后---2")
}
window.onload = function () {
alert("原生js页面加载完成之后---3")
}
$(function () {
alert("jquery的页面加载完成之后--1")
})
$(function () {
alert("jquery的页面加载完成之后--2")
})
$(function () {
alert("jquery的页面加载完成之后--3")
})
script>
head>
<body>
<button>我是按钮button>
<iframe src="http://www.baidu.com">iframe>
<img src="screen.jpg" height="1080" width="1919"/>body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件操作title>
<script src="jquery.min.js">script>
<script type="text/javascript">
$(function () {
$("#H5").live("click", function () {
console.log("live绑定的单击事件")
})
$('jQuery事件
').appendTo($("#H5"))
// // 鼠标移入事件
// $("h5").mouseover(function () {
// console.log("你进来了")
// })
// // 鼠标移出事件
// $("h5").mouseout(function () {
// console.log("你出来了")
// })
// // bind绑定多个事件
// $("h5").bind("click mouseover mouseout",function () {
// console.log("bind绑定的事件")
// })
// // 作用类似bind但是只能使用一次
// // 这里为什么是传递字符串代表事件，因为如果是关键字或者值的话还要处理顺序，增加了库函数的繁杂度
// $("h5").one("click mouseover mouseout",function () {
// console.log("one绑定的事件")
// })
// // unbind解绑事件
// $("h5").unbind("click")
})
script>
head>
<body>
<h5 id="H5">jQuery事件h5>
body>
html>
jQ事件event对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery.min.js">script>
<script type="text/javascript">
window.onload = function () {
document.getElementById("R").click(function (event) {
console.log(event)
})
}
$(function () {
$("#G").click(function (event) {
console.log(event)
})
$("#G").bind("click mouseover", function (event) {
if (event.type == "mouseover")
console.log("事件移入")
else console.log("事件点击")
})
})
script>
head>
<body>
<div style="color:red" id="R">我是红色的div>
<div style="color:green" id="G">我是绿色的div>
body>
html>
图片跟随
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="jquery.min.js">script>
<script type="text/javascript">
$(function () {
$("#small").bind("mousemove mouseover mouseout", function (event) {
if (event.type == "mouseover")
$("#big").show();
else if (event.type == "mouseout")
$("#big").hide();
else if (event.type == "mousemove")
$("#big").offset({
//这里注意坐标的使用，防止出现图片闪烁情况，若不修改坐标图片出现的时候运行mouseout事件
left: event.pageX + 10,
top: event.pageY + 10
});
});
})
script>
head>
<body>
<img id="small" src="screen.jpg" height="100" width="200"/>
<img id="big" src="screen.jpg" height="1080" width="1919"/>
body>
html>
注意
在form里面最好不要用button标签，因为button标签一旦触发就会产生提交效果，导致页面刷新从而使操作效果一闪而过。
option标签中value属性不会作为默认值，但是在大多数标签中是可以作为默认值或者名字
value可以作为默认值并且作用和name类似可以进行val识别