2.获得单选框选中的值
1.设置单选框的要求: (1).radio,和name----->指定组名 (2).获得各个选项框的结点 =======================================获取 (3).通过-------》结点.checked(); 如果选中，那么就是true,否则就是false; =======================================更改 (4).结点.checked()='true';
3.以上内容综合训练（明显密码和加密密码）
1.文档需求:当我们输出密码和账号之后，点击提交的时候输出账户、密码、性别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- script标签内写JavaScript代码--> </head> <body> <form action="" method="post"> <!-- 用户名--> <p> 用户名:<span><input type="text" id="UserName" placeholder="请输入账户"></span> 密码:<span><input type="text" id="password" placeholder="请输入密码"></span> </p> <span> <p>性别: <input type="radio" name="SEX" value="男" id="boy">男 <input type="radio" name="SEX" value="女" id="girl">女 </p> </span> <span> <p> <!-- 绑定事件 oncilke--> <button type="button" onclick="add()">submit</button> </p> </span> </form> <script src="demo1.js"></script> </body> </html>
'use strict'; var username = document.getElementById('UserName'); var password = document.getElementById('password'); var boy_radio = document.getElementById('boy'); var girl_radio= document.getElementById('girl'); function add(){ if(boy_radio.checked===true&&girl_radio.checked!==true){ alert('账户'+username.value+'\n'+'密码:'+ password.value+'\n'+'性别是:'+'男'); } if (girl_radio.checked!==true&&boy_radio.checked!==true){ alert('请您选中性别!!!!'); } if(girl_radio.checked===true&&boy_radio.checked!==true){ alert('账户'+username.value+'\n'+'密码:'+ password.value+'\n'+'性别是:'+'女'); } }
2.利用MD5进行加密操作。
onclike()-------------->绑定事件被点击
<script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- script标签内写JavaScript代码--> <script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head> <body> <form action="#" method="post"> <!-- 用户名--> <p> 用户名:<span><input type="text" id="UserName" placeholder="请输入账户" name="username"></span> 密码:<span><input type="text" id="password" placeholder="请输入密码" name="password"></span> </p> <span> <p>性别: <input type="radio" name="SEX" value="男" id="boy">男 <input type="radio" name="SEX" value="女" id="girl">女 </p> </span> <span> <p> <!-- 绑定事件 oncilke--> <button type="submit" onclick="add()">submit</button> </p> </span> </form> <script src="demo1.js"></script> </body> </html>
'use strict'; var username = document.getElementById('UserName'); var password = document.getElementById('password'); var boy_radio = document.getElementById('boy'); var girl_radio= document.getElementById('girl'); function add(){ if(boy_radio.checked===true&&girl_radio.checked!==true){ console.log('账户'+username.value+'\n'+'密码:'+ password.value+'\n'+'性别是:'+'男'); } if (girl_radio.checked!==true&&boy_radio.checked!==true){ console.log('请您选中性别!!!!'); } if(girl_radio.checked===true&&boy_radio.checked!==true){ console.log(password.value); password.value=md5(password.value); console.log('账户'+username.value+'\n'+'密码:'+ password.value+'\n'+'性别是:'+'女'); } }
4.MD5加密升级版-----------》隐藏
(1). <!--表单绑定提交事件 onsubmit=绑定一个检测函数 true/false 将这个结果返回给表单，使用onsubmit接受 --> <form action="#" method="post" onsubmit="return add()"> (2).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- script标签内写JavaScript代码--> <script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head> <body> <!--表单绑定提交事件 onsubmit=绑定一个检测函数 true/false 将这个结果返回给表单，使用onsubmit接受 --> <form action="#" method="post" onsubmit="return add()"> <!-- 用户名--> <p> 用户名:<span><input type="text" id="UserName" placeholder="请输入账户" name="username"></span> 密码:<span><input type="text" id="password" placeholder="请输入密码" ></span> </p> <input type="hidden" id="md5-password" name="password"> <span> <p>性别: <input type="radio" name="SEX" value="男" id="boy">男 <input type="radio" name="SEX" value="女" id="girl">女 </p> </span> <span> <p> <!-- 绑定事件 oncilke--> <button type="submit">submit</button> </p> </span> </form> <script src="demo1.js"></script> </body> </html>
'use strict'; var username = document.getElementById('UserName'); var password = document.getElementById('password'); var md5_password= document.getElementById('md5-password'); var boy_radio = document.getElementById('boy'); var girl_radio= document.getElementById('girl'); function add(){ if(boy_radio.checked===true&&girl_radio.checked!==true){ md5_password.value=md5(password.value); //true就是通过提交， return true; // console.log('账户'+username.value+'\n'+'密码:'+ password.value+'\n'+'性别是:'+'男'); } if (girl_radio.checked!==true&&boy_radio.checked!==true){ console.log('请您选中性别!!!!'); } if(girl_radio.checked===true&&boy_radio.checked!==true){ md5_password.value=md5(password.value); //true就是通过提交， return true; // console.log('账户'+username.value+'\n'+'密码:'+ password.value+'\n'+'性别是:'+'女'); } }
20.JQuery===========》JQuery API文档
1.获取jquery以及导入jquery
JQery库，里面存在大量的JavaScript函数。 APL---------->JQuery之家, JQuery API
1.获取JQuery： (1).在线JQuery <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
2.利用文档库，导入包
2.jquery公式
1.公式: <!-- 公式: $(选择器).事件(); -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <!-- 公式: $(selector).action(); --> <a href="" id="test-jquery">点我</a> <script src="../Java_Script/lib/demo2.js"></script> </body> </html>
var test_jquery = document.getElementById('test-jquery'); //选择器就是CSS选择器 $('#test-jquery').click(function (){ alert('hello jquery'); })
