jQuery学习笔记
jQuery学习笔记
JQuery入门-笔记部分
jQuery概述
jQuery是js库
- 库：相当于java的工具类，库是存放东西的，jQuery是存放js代码的地方，放的是用js代码写的函数
- jquery是为了简化js的操作
jquery的安装
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
需要（在前面）引入jquery的核心js文件，不然会报错（$未定义）!
jquery核心
$ 符号在jquery中代表对jquery对象的引用，”jquery“是核心对象。
通过该对象可以获取jquery对象，调用jquery提供的方法等。只有jquery对象才能调用jquery提供的方法。
$ <==> jQuery
第一个例子
-
$(document)
- $是jQuery中的函数名称，document是函数的参数
- 作用是将document对象变成jQuery函数库可以使用的对象
-
ready函数
- ready是jQuery中的函数，是准备的意思
- 当页面的dom对象加载成功后，会执行ready函数的内容
- ready相当于是js中的onLoad事件
-
funciton()
- funciton()自定义的表示onLoad后要执行的功能
-
入口函数简写方式
-
// 原生js $(document).ready(function(){ alert("Hello,jQuery!"); }) -
// jquery提供了一种简写方式 $(function(){ alert("Hello,jQuery!"); }) $(function(){ // 代码内容 }) -
$(document).ready === $() === jQuery() === window.jQuery()
-
JQuery内容大纲
JQuery内容大纲
- JQuery对象
- JQuery的使用
- Dom对象与JQuery包装集对象
- JQuery选择器
- 基础选择器🚩
- 层次选择器
- 表单选择器
- JQuery Dom操作🚩
- 操作元素的属性
- 操作元素的样式
- 操作元素的内容
- 创建元素
- 添加元素
- 删除元素
- 遍历元素
- JQuery事件🚩
- ready加载事件
- 绑定事件
- JQuery Ajax🚩
- $.ajax()
- $.get()
- $.post()
- $.getJSON()
DOM对象和jQuery对象
原始的DOM对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；
而通过jquery获取的对象是jquery包装集对象，简称jquery对象，只有jquery对象才能使用jquery提供的方法
DOM对象
-
文档对象模型，是一种处理可扩展标志语言的标准编程接口
-
通过DOM对HTML页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出来的节点对象，即DOM对象。DOM对象可以使用JS中的方法
-
使用js语法创建的对象叫做dom对象，也就是js对象
-
var obj = document.getElementById("txt1"); // 这里的obj就是一个dom对象（js对象） -
// js中获取Dom对象，Dom对象只有有限的属性和方法： var div = document.getElementById("testDiv"); var divs = document.getElementsById("div");
-
jQuery对象
-
使用jquery语法所表示的对象叫做jquery对象，注意，jquery表示的对象都是数组
-
var jobj = $("#txt1") // 这里的obj就是使用jquery语法所表示的对象，也就是jquery对象，是一个数组 // 现在数组中就一个值 /*jobj就是使用jquery语法表示的对象，也就是jquery对象，它是一个数组，现在数组中就一个值*/
-
-
/*可以说是Dom对象的扩充， 在jquery的世界中将所有的对象， 无论是一个还是一组，都封装成一个jquery包装集， 比如获取包含一个元素的jquery包装集： */ var jQueryObject = $("#testDiv"); -
小建议：在命名jQuery对象时，为了与DOM对象进行区分，习惯上以＄开头
DOM对象可以与JQuery对象相互转化
-
01 DOM对象转为jQuery对象
-
语法
-
jQuery对象 = $(dom对象);
-
-
// Dom对象转为jquery对象，只需要利用$()方法进行包装即可。 // 用个$包起来就变成jquery对象了！ var domDiv = document.getElementById('mydiv'); // 获取Dom对象 mydiv = $(domDiv);
-
-
02 JQuery对象转为DOM对象
-
语法：从数组中获取第一个对象，第一个对象就是dom对象，使用下标的方式（[0] 或者 get(0)）
-
// 从数组中获取第一个对象，第一个对象就是dom对象，使用下标的方式（[0] 或者 get(0)） -
jQuery对象本身为数组对象，该数组中的第0个元素即为该jQuery对象对应的dom对象。所以有两种方式可以获取到dom对象：get(0)方式与下标[0]
-
/* jquery对象转为Dom对象，只需要取数组中的元素即可 */ // 第一种方式，获取jQuery对象 var jquery = jQuery('#mydiv'); // 第二种方式，获取jQuery对象 var jquery = $('#mydiv'); var dom = jqueryDiv[0]; // 将已获取的jquery对象转为dom /* 通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象 */ $('#mydiv').each(function(){ //遍历 var jQuery = $(this); }) // 遍历到的每一个元素都是一个Dom对象，如果想获取jQuery对象的话，需要通过$包装的方式转换
-
-
-
为什么要进行两种对象之间的转换？
- 目的是要使用对象的方法或属性
- 当你是dom对象时，可以使用dom对象的属性或者方法
- 如果要想使用jquery提供的函数，必须是jquery对象才可以
- 当对象是一个jquery对象时，调用jquery函数库中函数来简化对dom的操作
选择器
选择器就是一个字符串，用来定位dom对象，定位dom对象之后就可以通过jquery的函数操作dom
选择器：定位条件，通知 jquery 函数定位满足条件的dom对象
常用的选择器：id选择器、
一、基本选择器
根据 id，class属性，标签类型名定位html元素，转为jQuery对象
01 id选择器
-
$( "#dom对象的id值" ) -
通过dom对象的id定位dom对象
-
通过id找对象，id在当前页面中是唯一值
02 class选择器
-
$( ".class样式名" ) -
class表示css中的样式，使用样式的名称定位dom对象的
03 标签选择器
-
$( "标签名称" ) -
使用标签名称定位dom对象
-
jquery的操作都是操作数组中的全部成员，所以是给所有的div都设置背景色
04 所有选择器
-
$("*") -
选取页面中所有dom对象
05 组合选择器
-
$("#id, .class , 标签名") -
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id，class，标签名等
二、表单选择器
-
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式
该方法无论是否存在表单 -
使用标签的type属性值，定位dom对象的方式
-
<!-- 表单示例 --> <input type="text"> <input type="password"> <input type="radio"> <input type="checkbox"> <input type="button"> <input type="file"> <input type="submit"> <input type="reset"> -
$(" : type属性值") // 语法 -
// 举例 $(":text") // 选择的是所有的单行文本框 $(":password") // 选取所有的单选框 $(":radio") // 选取所有的单选框 $(":checkbox") // 选取所有的多选框 $(":button") // 选择的是所有的按钮 -
注意：$(":tr") 不能用，tr不是input标签
三、过滤器
-
对已经定位的dom对象根据条件再进行一遍筛选
-
过滤器就是过滤条件，对已经定位到数组中DOM对象进行过滤筛选，
过滤条件不能独立出现在jQuery函数，如果使用只能出现在选择器后方 -
在定位了dom对象之后，根据一些条件筛选dom对象
过滤器也是一个字符串，用来筛选dom对象的
过滤器不能单独使用，必须和选择器一起使用
-
jQuery对象中存储的DOM对象顺序与页面标签声明位置关系
-
<div>1</div> dom1 <div>2</div> dom2 <div>3</div> dom3 $("div") == [dom1,dom2,dom3]
01 基本过滤器
-
选择第一个first，保留数组中第一个DOM对象
-
$("选择器:first")
-
-
选择最后一个last，保留数组中最后DOM对象
-
$("选择器:last")
-
-
选择数组中指定对象
-
$("选择器:eq(数组索引)")
-
-
选择数组中小于指定索引（下标）的所有DOM对象
-
$("选择器:lt(数组索引)")
-
-
选择数组中大于指定索引（下标）的所有DOM对象
-
$("选择器:gt(数组索引)")
-
02 表单对象属性过滤器
-
根据表单中dom对象的状态情况，定位dom对象
-
状态情况
- 启用状态：enabled
- 不可用状态：disabled
- 选中状态：checked（例如：radio，checkbox）
-
选择可用的文本框
$("text:enabled") -
选择不可用的文本框
$("text:disabled") -
复选框选中的元素
$("checkbox:checked") -
选择指定下拉列表的被选中元素
-
选择器 > option : selected
small tips: 父对象 > 子对象 -
-
================================================
jQuery绑定事件方式
定义元素监听事件
-
语法：
$(选择器).监听事件名称.(事件的处理函数) -
$(选择器)：定位dom对象，dom对象可以有多个，这些dom对象都绑定事件了
-
监听事件名称：js事件中去掉on后的内容，js中的onclick的监听事件名称是click
-
事件的处理函数：就是一个function，当事件发生时，执行这个函数的内容
-
举例
// 给id是btn的按钮绑定单击事件 $("#btn").click(function(){ alert("btn按钮单击了"); }) // 为页面中所有的button绑定onclick，并关联处理函数fun1 $("button").click(fun1) // 为页面中所有的tr标签绑定onmouseover，并关联处理函数fun2 $("tr").mouseover(fun2) -
我们需要绑定事件，在哪绑定事件 ——>
浏览器中得把按钮已经放在内存中之后，有了按钮才可以绑定事件，
或者说，只有按钮存在的情况下才能绑定事件 ——>
在哪里做这件事情？ ——>
在ready中去做，因为ready它的执行是在dom对象加载后，dom对象加载了，也就是对象创建了，
请你跟我这样做，我就跟你这样做：// $(document).ready( 函数 ) // 当页面中的dom对象加载成功后，会执行ready(), // 相当于是onload()事件 $(function(){ // 当你的页面dom对象加载后，给对象绑定事件，因为此时你的button对象已经在内存中创建好了，才能使用 // 所以说我们的时机是在我们的入口中开始执行，当dom对象加载后，才能够给对象绑定事件没所以一定要在内部进行绑定 $("#btn1")。click(function(){ alert("按钮单击"); }) })
on() 绑定事件
JQuery入门-代码部分
$是函数名
version 1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 单击按钮获取文本框的value值
function fun1(){
// 通过js中的id获取dom对象
var obj = document.getElementById("txt1");
alert(obj.value);
}
function fun2(){
// 通过js中的id获取dom对象
var obj = document.getElementById("txt2");
alert(obj.value);
}
</script>
</head>
<body>
<input type="text" id="txt1" value="我是txt1" /><br />
<input type="text" id="txt2" value="我是txt2" /><br />
<input type="button" value="单击按钮 1" onclick="fun1()" />
<!-- 我们希望单击按钮时可以获得它的value值 -->
<input type="button" value="单击按钮 2" onclick="fun2()" />
</body>
</html>
version 2.0
<script type="text/javascript">
// 单击按钮获取文本框的value值
function fun1(){
// 通过js中的id获取dom对象
var obj = getDomObj("txt1");
alert(obj.value);
}
function fun2(){
// 通过js中的id获取dom对象
var obj = document.getElementById("txt2");
alert(obj.value);
}
// 自定义方法，获取js中的dom对象
function getDomObj(domId){
var obj = document.getElementById(domId);
return obj;
}
</script>
version 3.0
// 自定义方法，获取js中的dom对象
function a(domId){
var obj = document.getElementById(domId);
return obj;
}
version 4.0
// 区分度很高的标识符
function $(domId){
var obj = document.getElementById(domId);
return obj;
}
version final
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function $(domId){
var obj = document.getElementById(domId);
return obj;
}
// 单击按钮获取文本框的value值
function fun1(){
// 通过js中的id获取dom对象
var obj = $("txt1");
alert(obj.value);
}
function fun2(){
// 通过js中的id获取dom对象
var obj = $("txt2");
alert(obj.value);
}
</script>
</head>
<body>
<input type="text" id="txt1" value="我是txt1" /><br />
<input type="text" id="txt2" value="我是txt2" /><br />
<input type="button" value="单击按钮 1" onclick="fun1()" />
<input type="button" value="单击按钮 2" onclick="fun2()" />
</body>
</html>
第一个例子
version 1.0
<!DOCTYPE html>
<html>
<head>
<!-- 05 使用jQuery的第一个例子 -->
<meta charset="utf-8">
<title>第一个例子</title>
<!-- 指定JQuery的库文件位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
/*
1.$(document)，$是jQuery中的函数名称，document是函数的参数
作用是将document对象变成jQuery函数库可以使用的对象
2.ready是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后，会执行ready函数的内容
ready相当于是js中的onLoad事件
3.funciton()自定义的表示onLoad后要执行的功能
*/
$(document).ready(function(){
// 此时可以写自定义的功能代码了
alert("Hello,jQuery!")
})
</script>
</head>
<body>
</body>
</html>
version 2.0
<script type="text/javascript">
$(document).ready(function(){
alert("Hello,jQuery!");
})
// jquery提供了标准写法的快捷方式写法:
$(function(){
alert("Hello,quick jQuery!");
})
</script>
version final
<!DOCTYPE html>
<html>
<head>
<!-- 05 使用jQuery的第一个例子 -->
<meta charset="utf-8">
<title>第一个例子</title>
<!-- 指定JQuery的库文件位置，使用相对路径，当前项目的js目录下的指定文件 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
/*
1.$(document)，$是jQuery中的函数名称，document是函数的参数
作用是将document对象变成jQuery函数库可以使用的对象
2.ready是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后，会执行ready函数的内容
ready相当于是js中的onLoad事件
3.funciton()自定义的表示onLoad后要执行的功能
*/
$(document).ready(function(){
alert("Hello,jQuery!");
})
// jquery提供了标准写法的快捷方式写法:
$(function(){
alert("Hello,quick jQuery!");
})
/*解析:
step 01: $() ——> 是一个函数调用，代表了dom对象的转换
step 02: $( function() ) —> 函数里面执行一个函数的内容
step 03: $( function() { //代码内容 } ) —> 花括号内部填写执行函数的内容
*/
</script>
</head>
<body>
</body>
</html>
DOM对象和jQuery对象
DOM对象转为jQuery对象
version 1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
function btnClick(){
// 获取dom对象
var obj = document.getElementById("btn");
// 使用dom的value属性，获取值
alert("使用dom对象的属性="+obj.value)
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="btnClick()" />
</body>
</html>
version 2.0
function btnClick(){
// 获取dom对象
var obj = document.getElementById("btn");
// 使用dom的value属性，获取值
alert("使用dom对象的属性="+obj.value)
// 把dom对象转为jquery，使用jquery库中的函数
var $jobj = $(obj);
// 调用jquery中的函数来获取value的值
alert($jobj.val())
}
version 3.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
function btnClick(){
// 获取dom对象
var obj = document.getElementById("btn");
// 使用dom的value属性，获取值
alert("使用dom对象的属性="+obj.value)
// 把dom对象转为jquery，使用jquery库中的函数
var $jobj = $(obj);
// 调用jquery中的函数来获取value的值
alert($jobj.val());
}
</script>
</head>
<body>
<input type="button" id="btn" value="我是按钮" onclick="btnClick()" />
</body>
</html>
jQuery对象转为DOM对象
version 1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom转jquery对象</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
function btnClick(){
// 使用jQuery的语法，获取页面中的dom对象
var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
// var obj = $("#txt").get(0);
alert( obj.value );
// 测试成功，说明可以获取dom对象的值
}
</script>
</head>
<body>
<input type="button" id="bth" value="计算平方" onclick="btnClick()" /><br />
<input type="text" id="txt" value="整数" />
</body>
</html>
version 2.0
function btnClick(){
// 使用jQuery的语法，获取页面中的dom对象
var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
var num = obj.value;
obj.value = num * num;
}
基本选择器
version 1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用基本选择器的demo</title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
function fun1(){
// id选择器
var obj = $("#one");
// 使用jquery中改变样式的函数
obj.css("background","red");
}
</script>
</head>
<body>
<div id="one">我是one的div</div>
<div class="two">我是样式是two的div</div>
<br />
<div>我是没有id，没有class的div</div>
<br />
<span>我是span标签</span>
<br /><br />
<input type="button" value="获取id是one的dom对象" onclick="fun1()"/>
</body>
</html>
version 2.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
function fun2(){
// 使用样式class选择器
var obj = $(".two");
// 使用jquery中改变样式的函数
obj.css("background","yellow");
}
</script>
</head>
<body>
<div id="one">我是one的div</div><br />
<br />
<div>我是没有id，没有class的div</div>
<br />
<input type="button" value="使用class样式获取dom对象" onclick="fun2()"/>
</body>
</html>
version 3.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
function fun3(){
// 使用标签选择器
var obj = $("div");
// var obj = $("span");
// 使用jquery中改变样式的函数
obj.css("background","blue");
}
</script>
</head>
<body>
<div id="one">我是one的div</div><br />
<div class="two">我是样式是two的div</div>
<br />
<div>我是没有id，没有class的div</div>
<br />
<span>我是span标签</span>
<br /><br />
<input type="button" value="使用标签获取dom对象" onclick="fun3()"/>
</body>
</html>
version final
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用id选择器的demo</title>
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
function fun1(){
// id选择器
var obj = $("#one");
// 使用jquery中改变样式的函数
obj.css("background","red");
}
function fun2(){
// 使用样式class选择器
var obj = $(".two");
// 使用jquery中改变样式的函数
obj.css("background","yellow");
}
function fun3(){
// 使用标签选择器
var obj = $("div");
// var obj = $("span");
// 使用jquery中改变样式的函数
obj.css("background","blue");
}
</script>
</head>
<body>
<div id="one">我是one的div</div>
<div class="two">我是样式是two的div</div>
<br />
<div>我是没有id，没有class的div</div>
<br />
<span>我是span标签</span>
<br /><br />
<input type="button" value="获取id是one的dom对象" onclick="fun1()"/><br />
<input type="button" value="使用class样式获取dom对象" onclick="fun2()"/><br />
<input type="button" value="使用标签获取dom对象" onclick="fun3()"/>
</body>
</html>
表单选择器
version 1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单选择器</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
// 使用表单选择器：$(":type的值")
function fun1(){
var $obj = $(":text");
// 获取第一个DOM对象的value值
// val() 是jquery中的函数，读取value属性值
alert( $obj.val() );
}
function fun2(){
// 定位radio
var $obj = $(":radio");
// 是一个数组，里面有两个对象（man和woman）
for(var i = 0 ; i < $obj.length ; i++){
// 循环数组，数组中的成员是dom对象，可以使用dom属性或者函数
// jQuery对象转为DOM对象
var obj = $obj[i];
alert(obj.value);
}
}
function fun3(){
// 定位checkbox
var $obj = $(":checkbox");
for(var i = 0 ; i < $obj.length ; i++){
var obj = $obj[i];
alert(obj.value);
}
}
</script>
</head>
<body>
<input type="text" value="我是type=text" /><br /><br />
性别：<br>
<input type="radio" value="man" /> 男 <br />
<input type="radio" value="woman" /> 女 <br />
<br />
爱好：<br>
<input type="checkbox" value="bike" /> 骑行 <br />
<input type="checkbox" value="football" /> 足球 <br />
<input type="checkbox" value="music" /> 音乐 <br />
<br />
<input type="button" value="读取text值" onclick="fun1()" />
<input type="button" value="读取radio值" onclick="fun2()" />
<input type="button" value="读取checkbox值" onclick="fun3()" />
</body>
</html>
version 2.0
function fun3(){
// 定位checkbox
var $obj = $(":checkbox");
for(var i = 0 ; i < $obj.length ; i++){
var obj = $obj[i];
// alert(obj.value);
// 使用jquery的val()函数，获取value的值
// 1.需要jquery对象
var $jobj = $(obj); // $jobj是一个jquery对象
// 2.调用jquery的函数
alert("jquery的函数调用=" + $jobj.val());
}
}
基本过滤器
version 1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤器</title>
<style type="text/css">
div{
background-color: gray;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
// $(document).ready( 函数 )
// 当页面中的dom对象加载成功后，会执行ready(),
// 相当于是onload()事件
$(function(){
// 当你的页面dom对象加载后，给对象绑定事件，因为此时你的button对象已经在内存中创建好了，才能使用
$("#btn1").click(function(){
// 过滤器
var obj = $("div:first");
obj.css("background","red");
})
// 绑定事件
$("#btn2").click(function(){
var obj = $("div:last");
obj.css("background","yellow");
})
$("#btn3").click(function(){
var obj = $("div:eq(3)");
obj.css("background","blue");
})
$("#btn4").click(function(){
var obj = $("div:lt(3)");
obj.css("background","green");
})
})
</script>
</head>
<body>
<div id="zero">我是div-0</div>
<div id="one">我是div-1</div>
<div>
我是div-2
<div class="son">我是div-3</div>
<div class="son">我是div-4</div>
</div>
<div>我是div-5</div>
<br />
<span>我是span</span>
<br />
<p>功能按钮</p>
<input type="button" id="btn1" value="选择第一个div" /><br>
<input type="button" id="btn2" value="选择最后一个div" /><br>
<input type="button" id="btn3" value="选择索引等于3的div" /><br>
<input type="button" id="btn4" value="选择索引小于3的div" /><br>
</body>
</html>
表单过滤器
version 1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单属性过滤器</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"> </script>
<script type="text/javascript">
</script>
</head>
<body>
<p>文本框</p>
<input type="text" id="text1" value="text1" /><br />
<input type="text" id="text2" value="text2" disabled /><br />
<input type="text" id="text3" value="text3" /><br />
<input type="text" id="text4" value="text4" disabled /><br />
<br />
<p>复选框</p>
<input type="checkbox" value="游泳" /> 游泳<br />
<input type="checkbox" value="健身" checked /> 健身<br />
<input type="checkbox" value="电子游戏" checked /> 电子游戏<br />
<br />
<p>下拉框</p>
<select id="lang">
<option value="java">java语言</option>
<option value="go" selected >go语言</option>
<option value="sql">sql语言</option>
</select>
</body>
</html>
