JQuery
一、基本介绍
官网: jquery官网
- jQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML、CSS…
- 提供方法、events、选择器,并且方便地为网站提供AJAX交互;
- 其宗旨就是: 写更少的代码,做更多的事
二、快速入门
首先引入jQuery库:
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery快速入门</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/**
* 先使用DOM编程
* document.getElementById("btn1") 返回的是dom对象
*/
window.onload = function(){
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
alert("hello,jquery ====> 按钮1");
}
}
/**
* 再使用jQuery实现
* $("#id名称") / $(".class名称") 返回的是dom对象
*/
$(function(){
//写法一
$("#btn02").click(function (){
alert("hi jquery ===> 按钮2");
})
//写法二
var $btn02 = $("#btn02");
//jquery对象($btn02) 其实是数组对象
console.log($btn02);
$btn02.click(function (){
alert("hi jquery ===> 按钮2~~");
})
});
</script>
</head>
<body>
<input type="button" id="btn01" name="btn01" value="按钮1" /><br/>
<input type="button" id="btn02" name="btn02" value="按钮2" /><br/>
</body>
</html>
三、jQuery对象和DOM对象
1. 什么是jQuery对象
- jQuery对象就是对DOM对象进行包装后产生的对象
- 比如:$(“#test”).html 意思是指:
获取id为test的元素内的html代码。其中html()是jQuery里的方法。 - $(“#test”).html 等价于 document.getElementById(“id”).innerHTML
- jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法$(“#id”).html
- var $variable: 代表jQuery对象; var variable: 代表DOM对象
2. DOM对象转成jQuery对象
对于一个DOM对象,只要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。
$(DOM对象),这样就可以使用jQuery方法了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom对象转成jquery对象</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
window.onload = function(){
//username就是dom对象
var username = document.getElementById("username");
alert("username value= " + username.value);
//把username转成jquery对象
var $username = $(username);
alert("$username value= " + $username.val());
}
</script>
</head>
<body>
用户名: <input type="text" id="username" name="username" value="dom对象转成jquery对象">
</body>
</html>
3. jQuery对象转成DOM对象
两种转换方式将一个jQuery对象转成DOM对象: [index]和.get(index) ==>index一般是0
为什么可以这样转换,是因为jQuery对象是一个数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery对象转成dom对象</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
window.onload = function(){
//得到jquery对象
var $username = $("#username");
alert("$username value= " + $username.val());
//方式一
var username = $username[0];
//username = [object HTMLInputElement]
alert("jquery对象转成dom对象= " + username);
alert("username value= " + username.value);
//方式二
var username = $username.get(0);
alert("username value= " + username.value + "~~~");
}
</script>
</head>
<body>
用户名: <input type="text" id="username" name="username" value="jquery对象转成dom对象">
</body>
</html>
四、jQuery选择器
- 简单介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery选择器简单介绍</title>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
window.onload = function(){
//如果是dom对象(注意body中的id="username~")
var username = document.getElementById("username");
//alert("username value= " + username.value);//会报错
//若希望dom对象可以处理null
if(username){
alert("username value= " + username.value);
}else{
alert("没有获取到对应id的dom对象");
}
//若是jquery对象
var $username = $("#username");
alert("$username value= " + $username.val());//提示undefined
}
</script>
</head>
<body>
用户名: <input type="text" id="username~" name="username" value="jquery对象转成dom对象">
</body>
</html>
- 基本选择器(id、class、标签名)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的基本选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
div.mini{
width: 160px;
height: 130px;
background: #CC66FF;
border: #000 1px solid;
font-size: 16px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
//改变id为one的元素的背景色为 #0000FF
$("#b1").click(function (){
$("#one").css("background","#0000FF");
})
//改变class为mini的元素的背景色为 #FF0033
$("#b2").click(function (){
$(".mini").css("background","#FF0033");
})
//改变元素名为<div>的所有元素的背景色为 #00FFFF
$("#b3").click(function (){
$("div").css("background","#00FFFF");
})
//改变所有元素的背景色为 #00FF33
$("#b4").click(function (){
$("*").css("background","#00FF33");
})
//改变所有的<span>元素和id为two class为.mini的元素的背景色为 #3399FF
$("#b5").click(function (){
$("span,#two,.mini").css("background","#3399FF");
})
})
</script>
</head>
<body>
<input type="button" value="改变id为one的元素的背景色为 #0000FF" id="b1" />
<input type="button" value="改变class为mini的元素的背景色为 #FF0033" id="b2" />
<input type="button" value="改变元素名为<div>的所有元素的背景色为 #00FFFF" id="b3" />
<input type="button" value="改变所有元素的背景色为 #00FF33" id="b4" />
<input type="button" value="改变所有的<span>元素和id为two class为.mini的元素的背景色为 #3399FF" id="b5" />
<hr/>
<div id="one" class="mini">div id为one</div>
<div id="two" >div id为two</div>
<div id="three" class="mini" >div id为three</div>
<span id="s_one" class="mini">span one</span>
<span id="s_two" >span two</span>
</body>
</html>
- 层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的层次选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
div.mini{
width: 160px;
height: 130px;
background: #CC66FF;
border: #000 1px solid;
font-size: 16px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
//改变body内的所有div的背景色为 #0000FF
$("#b1").click(function (){
$("div").css("background","#0000FF");
})
//改变body内 子div元素的背景色为 #FF0033
$("#b2").click(function (){
$("body > div").css("background","#FF0033");
})
//改变id为one的下一个div元素的背景色为 #00FFFF
$("#b3").click(function (){
$("#one + div").css("background","#00FFFF");
})
//改变id为two元素后面的所有兄弟div元素的背景色为 #0000FF
$("#b4").click(function (){
$("#two ~ div").css("background","#0000FF");
})
//改变所有的<span>元素和id为two class为.mini的元素的背景色为 #3399FF
$("#b5").click(function (){
$("#two").siblings("div").css("background","#3399FF");
})
})
</script>
</head>
<body>
<input type="button" value="改变body内的所有div的背景色为 #0000FF" id="b1" />
<input type="button" value="改变body内 子div元素的背景色为 #FF0033" id="b2" />
<input type="button" value="改变id为one的下一个div元素的背景色为 #00FFFF" id="b3" />
<input type="button" value="改变id为two元素后面的所有兄弟div元素的背景色为 #0000FF" id="b4" />
<input type="button" value="改变id为two的元素所有div兄弟元素元素的背景色为 #3399FF" id="b5" />
<hr/>
<div id="one" class="mini">div id为one</div>
<div id="two" >
div id为two
<div id="two1">id two1</div>
<div id="two2">id two2</div>
</div>
<div id="three" class="mini" >
div id为three
<div id="three1">id three01</div>
</div>
</body>
</html>
- 基础过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的基础过滤选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
div.mini{
width: 160px;
height: 130px;
background: #CC66FF;
border: #000 1px solid;
font-size: 16px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
//改变第一个div元素的背景色为 #0000FF
$("#b1").click(function (){
$("div:first").css("background","#0000FF");
})
//改变body内 子div元素的背景色为 #FF0033
$("#b2").click(function (){
$("div:last").css("background","#FF0033");
})
//改变class不为one的所有div元素的背景色为 #00FFFF
$("#b3").click(function (){
$("div:not(.one)").css("background","#00FFFF");
})
//改变索引值为偶数div元素的背景色为 #0000FF
$("#b4").click(function (){
$("div:even").css("background","#0000FF");
})
//改变索引值为偶数div元素的背景色为的元素的背景色为 #3399FF
$("#b5").click(function (){
$("div:odd").css("background","#3399FF");
})
//改变索引值大于3的div元素的背景色为
$("#b6").click(function (){
$("div:gt(3)").css("background","#3399FF");
})
//改变索引值等于3的div元素的背景色为
$("#b7").click(function (){
$("div:eq(3)").css("background","#3399FF");
})
//改变索引值小于3的div元素的背景色为
$("#b8").click(function (){
$("div:lt(3)").css("background","#3399FF");
})
//改变所有的标题元素的背景色为
$("#b9").click(function (){
$(":header").css("background","#3399FF");
})
})
</script>
</head>
<body>
<h1>H1 标题</h1>
<h2>H2 标题</h2>
<h3>H3 标题</h3>
<input type="button" value="改变第一个div元素的背景色为 #0000FF" id="b1" />
<input type="button" value="改变最后一个div元素的背景色为 #FF0033" id="b2" />
<input type="button" value="改变class不为one的所有div元素的背景色为 #00FFFF" id="b3" />
<input type="button" value="改变索引值为偶数div元素的背景色为 #0000FF" id="b4" />
<input type="button" value="改变索引值为奇数div元素的背景色为 #0000FF" id="b5" />
<input type="button" value="改变索引值大于3的div元素的背景色为 #0000FF" id="b6" />
<input type="button" value="改变索引值等于3的div元素的背景色为 #0000FF" id="b7" />
<input type="button" value="改变索引值小于3的div元素的背景色为 #0000FF" id="b8" />
<input type="button" value="改变所有的标题元素的背景色为 #3399FF" id="b9" />
<hr/>
<div id="one" class="mini">div id为one</div>
<div id="two" >
div id为two
<div id="two1">id two1</div>
<div id="two2">id two2</div>
</div>
<div id="three" class="one" >
div id为three
<div id="three1">id three01</div>
</div>
</body>
</html>
- 内容过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的内容过滤选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
div.mini{
width: 160px;
height: 130px;
background: #CC66FF;
border: #000 1px solid;
font-size: 16px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
//改变含有文本'di'的div元素的背景色为 red
$("#b1").click(function (){
$("div:contains('di')").css("background","red");
})
//改变不包含子元素(或者文本元素)的div元素的背景色为 pink
$("#b2").click(function (){
$("div:empty").css("background","pink");
})
//改变含有class为mini元素的div元素的背景色为 green
$("#b3").click(function (){
//这个是选择 有class='mini'的div父元素(div)
//$("div:has('.mini')").css("background","green");
//这个是选择有class='.mini' 的div
$("div.mini").css("background","green");
})
//改变含有子元素(或者文本元素)的div元素的背景色为 yellow
$("#b4").click(function (){
$("div:parent").css("background","yellow");
})
//改变索引值大于3的div元素的背景色为 #0000FF
$("#b5").click(function (){
$("div:gt(3)").css("background","#0000FF");
})
//改变不含有文本'di'的div元素的背景色为 pink
$("#b6").click(function (){
$("div:not(:contains('di'))").css("background","pink");
})
})
</script>
</head>
<body>
<input type="button" value="改变含有文本'di'的div元素的背景色为 red" id="b1" />
<input type="button" value="改变不包含子元素(或者文本元素)的div元素的背景色为 pink" id="b2" />
<input type="button" value="改变含有class为mini元素的div元素的背景色为 green" id="b3" />
<input type="button" value="改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4" />
<input type="button" value="改变索引值大于3的div元素的背景色为 #0000FF" id="b5" />
<input type="button" value="改变不含有文本'di'的div元素的背景色为 pink" id="b6" />
<hr/>
<div id="xxx" >
<div id="one" class="mini">div id为one</div>
</div>
<div id="two" >
div id为two
<div id="two1">id two1</div>
<div id="two2">id two2</div>
</div>
<div id="three" class="one" >
div id为three class one
<div id="three1">id three01</div>
</div>
<div id="four" class="one">
XXXXXXXXX
</div>
<div id="five" class="one"></div>
<div id="mover">执行动画</div>
</body>
</html>
- 可见度过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的可见度过滤选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
div.mini{
width: 160px;
height: 130px;
background: #CC66FF;
border: #000 1px solid;
font-size: 16px;
font-family: Roman;
}
div.visible{
display: none;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
//改变所有可见的div元素的背景色为 red
$("#b1").click(function (){
$("div:visible").css("background","red");
})
//选取所有不可见的div,利用show()将它们显示出来,并设置元素的背景色为 pink
$("#b2").click(function (){
$("div:hidden").css("background","pink");
$("div:hidden").show();
})
//选取所有的文本隐藏域,并打印它们的值
$("#b3").click(function (){
//先得到所有的hidden元素
var $inputs = $("input:hidden");
//遍历
<!-- for(var i = 0; i < $inputs.length; i++){-->
<!-- var input = $inputs[i];-->
<!-- console.log("input值 = " + input.value);-->
<!-- }-->
//each()方法
$inputs.each(function (){
console.log("值是(dom方式) = " + this.value);
console.log("值是(jquery方式) = " + $(this).val());
})
})
})
</script>
</head>
<body>
<input type="button" value="改变所有可见的div元素的背景色为 red" id="b1" /><br/><br/>
<input type="button" value="选取所有不可见的div,利用show()将它们显示出来,并设置元素的背景色为 pink" id="b2" /><br/><br/>
<input type="button" value="选取所有的文本隐藏域,并打印它们的值" id="b3" /><br/><br/>
<hr/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<div id="one" class="visible">
div id为one
</div>
<div id="two" class="visible">
div id为two
</div>
<div id="three" class="one" >
div id为three
</div>
</body>
</html>
- 属性过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的属性过滤选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
div.mini{
width: 160px;
height: 130px;
background: #CC66FF;
border: #000 1px solid;
font-size: 16px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#b1").click(function (){
$("div[title]").css("background","green");
})
$("#b2").click(function (){
$("div[title='test']").css("background","red");
})
$("#b3").click(function (){
$("div[title!='test']").css("background","green");
})
$("#b4").click(function (){
$("div[title^='te']").css("background","green");
})
$("#b5").click(function (){
$("div[title$='est']").css("background","red");
})
$("#b6").click(function (){
$("div[title*='es']").css("background","red");
})
$("#b7").click(function (){
$("div[id][title*='es']").css("background","red");
})
})
</script>
</head>
<body>
<input type="button" value="含有属性title的div元素" id="b1" /><br/><br/>
<input type="button" value="属性title值等于test的div元素" id="b2" /><br/><br/>
<input type="button" value="属性title值不等于test的div元素" id="b3" /><br/><br/>
<input type="button" value="属性title值以te开始的div元素" id="b4" /><br/><br/>
<input type="button" value="属性title值以est结束的div元素" id="b5" /><br/><br/>
<input type="button" value="属性title值含有es的div元素" id="b6" /><br/><br/>
<input type="button" value="选取有属性id的div元素,然后造结果中选取属性title值含有es的div元素" id="b7" /><br/><br/>
<hr/>
<div id="one" title="test">
div id为one test
</div>
<div id="one-1" title="texxx">
div id为one-1 test
</div>
<div id="one-2" title="xxxest">
div id为one-2 xxxest
</div>
<div id="one-3" title="xxxesxxxxt">
div id为one-3 xxxesxxxxt
</div>
<div id="two" title="ale">
div id为two
</div>
<div id="three" class="one" >
div id为three
</div>
</body>
</html>
- 子元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的子过滤选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
$("#b1").click(function (){
$("div .one:nth-child(2)").css("background","yellow");
})
$("#b2").click(function (){
$("div .one:nth-child(1)").css("background","green");
//$("div .one:first-child").css("background","green");
})
$("#b3").click(function (){
$("div .one:last-child").css("background","red");
})
$("#b4").click(function (){
$("div .one:only-child").css("background","pink");
})
})
</script>
</head>
<body>
<input type="button" value="每个class为one的div父元素下的第二个子元素,设置背景色为#0000FF" id="b1" /><br/><br/>
<input type="button" value="每个class为one的div父元素下的第一个子元素,设置背景色为#0000FF" id="b2" /><br/><br/>
<input type="button" value="每个class为one的div父元素下的最后个子元素,设置背景色为#0000FF" id="b3" /><br/><br/>
<input type="button" value="如果class为one的div父元素下仅有一个子元素,那么选中该元素,设置背景色为#0000FF" id="b4" /><br/><br/>
<hr/>
<div class="one">
<div id="one" class="one">
XXXXXXXX id = one
</div>
<div id="two" class="one">
XXXXXXXX id = two
</div>
<div id="three" class="one">
XXXXXXXX id = three
</div>
<div id="four" class="one">
XXXXXXXX id = four
</div>
</div>
<div class="one">
<div id="five" class="one">
XXXXXXXX id = five
</div>
</div>
</body>
</html>
- 表单属性过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的表单属性选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
//利用jquery对象的 val()方法,改变表单内type=text可用<input>元素的值
$("#b1").click(function (){
$("input[type='text']:enabled").val("羽毛球");
})
//利用jquery对象的 val()方法,改变表单内type=text不可用<input>元素的值
$("#b2").click(function (){
$("input[type='text']:disabled").val("橄榄球");
})
//利用jquery对象的 length属性,获取多选框选中的个数
$("#b3").click(function (){
alert($(":checkbox:checked").length);
//alert($("input[type='checkbox']:checked").length);
})
//利用jquery对象的 text()方法,获取下拉框选中的内容
$("#b4").click(function (){
//alert($("select option:selected").text());
var $jobs = $("select option:selected");
//以下三种方式,都可以打印出选择的value值
<!-- $.each($jobs,function(){-->
<!-- alert($(this).val());-->
<!-- })-->
<!-- $.each($jobs,function(i,n){-->
<!-- alert($(n).val());-->
<!-- })-->
<!-- $jobs.each(function(){-->
<!-- alert($(this).val());-->
<!-- })-->
$jobs.each(function(i,n){
alert("ok~" + $(n).val());
})
})
})
</script>
</head>
<body>
<input type="button" value="利用jquery对象的 val()方法,改变表单内type=text可用<input>元素的值" id="b1" /><br/><br/>
<input type="button" value="利用jquery对象的 val()方法,改变表单内type=text不可用<input>元素的值" id="b2" /><br/><br/>
<input type="button" value="利用jquery对象的 length属性,获取多选框选中的个数" id="b3" /><br/><br/>
<input type="button" value="利用jquery对象的 text()方法,获取下拉框选中的内容" id="b4" /><br/><br/>
<hr/>
<input type="text" value="篮球1" />
<input type="text" value="篮球2" />
<input type="text" value="篮球3" disabled="true" />
<input type="text" value="篮球4" disabled="true" />
<br>
<h1>选择你的爱好</h1>
<input type="checkbox" value="爱好1" />爱好1
<input type="checkbox" value="爱好2" />爱好2
<input type="checkbox" value="爱好3" />爱好3
<input type="checkbox" value="爱好4" />爱好4
<br>
<h1>选项如下:</h1>
<select name="job" size="9" multiple="multiple">
<option value="选项1">选项1~~</option>
<option value="选项2">选项2~~</option>
<option value="选项3">选项3~~</option>
<option value="选项4">选项4~~</option>
<option value="选项5">选项5~~</option>
<option value="选项6">选项6~~</option>
</select>
<select id="edu" name="edu">
<option value="博士">~博士~</option>
<option value="硕士">~硕士~</option>
<option value="本科">~本科~</option>
<option value="小学">~小学~</option>
</select>
</body>
</html>
- 表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery中的表单选择器</title>
<style type="text/css">
div,span{
width: 240px;
height: 240px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 20px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" >
$(function(){
//选择所有button
var btn = $(":button");
alert("button numbers= " + btn.length);
var btn2 = $("input[type='button']");//得到type="button"的元素
alert("btn2 numbers= " + btn2.length);
alert("btn标签个数= " + $("button").length);//得到<button />按照元素标签取值
})
</script>
</head>
<body>
<form>
<input type="text"/><br/>
<input type="checkbox"/><br/>
<input type="radio"/><br/>
<input type="image" src="../imgs/g1.png" height="100px"/><br/>
<input type="file"/><br/>
<input type="submit"/><br/>
<input type="reset"/><br/>
<input type="password"/><br/>
<input type="button" value="按钮1"/><br/>
<select>
<option value="city">上海</option>
</select><br/>
<textarea></textarea><br/>
<button>按钮2</button><br/>
<button>按钮3</button><br/>
</form>
</body>
</html>