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>
