1.checkbox的学习
- Checkbox的操作基本上就几种:选中,未选中,全选,取消全选,反选
- <body>
- <h3>关于checkbox的用法的例子</h3><br/>
- <input id="c1" type="checkbox" name="option1" value="value1" checked="checked"/>Value1
- <input id="c2" type="checkbox" name="option2" value="value2"/>Value2<br/>
- <input id="c3" type="checkbox" name="option3" value="value3"/>Value3
- <input type="button" value="触发事件"/>
- </body>
- 1. 操作一:判断一个checkbox是否处于选中状态
- //方法一:
- if($("#c1").is(":checked")) {
- alert("方法一可以用!");
- } else {
- alert("方法一不可以用");
- }
- //方法二:
- if($("#c2").attr("checked") == false) {
- alert("方法二可以用!");
- } else {
- alert("方法二不可以用");
- }
- 2. 操作二:让一个checkbox处于选中状态!
- $("#c3").attr("checked","checked");
- 或者
- $("#c3").attr("checked",true);
- 3. 操作三:取消一个checkbox的选中状态!
- $("#c1").removeAttr("checked");
- 或者
- $("#c1").attr("checked",false);
- 4. 操作四:获取checkbox的值!
- var value1 = $("#c1").val();
- 或者
- Var value2 = document.getElementById(“c2”).value;
- <body>
- <h3>下面我们来练习一下全选与反选的例子</h3>
- <input class="son" type="checkbox" name="son" value="value1"/>
- <input class="son" type="checkbox" name="son" value="value2"/>
- <input class="son" type="checkbox" name="son" value="value3"/>
- <input class="son" type="checkbox" name="son" value="value4"/>
- <input class="son" type="checkbox" name="son" value="value5"/>
- <input class="son" type="checkbox" name="son" value="value6"/><br/><br/>
- <input id="father" type="checkbox" name="father" value="value7"/>全选
-
- <input id="un" type="checkbox" name="option8" value="value8"/>反选
- </body>
- 5. 操作五:全选
- 方法一:
- $("#father").click(function(){
- //获取父选框和子选框数组
- var father = document.getElementById("father");
- var sons = document.getElementsByName("son");
- //设置子选框的选中状态和父相同
- for(var i=0; i < sons.length; i++) {
- sons[i].checked = father.checked;
- }
- });
- 方法二:
- $("#father").click(function(){
- var flag = $(this).attr("checked");
- $("[name=son]:checkbox").each(function(){
- $(this).attr("checked",flag);
- });
- });
- 6.通过每一个子复选框来判断全选的复选框是否应处于选中状态
- 方法一:
- $(".son").click(function(){
- var num=0;
- var father = document.getElementById("father");
- var sons = document.getElementsByName("son");
- for(var i=0; i < sons.lenth; i++) {
- if(sons[i].checked) {
- num++;
- }
- }
- if(num == sons.lenth) {
- father.checked = true;
- } else {
- father.checked = false;
- }
- });
- 方法二:
- $(".son").click(function(){
- $("[name=son]:checkbox").each(function(){
- if($(this).attr("checked") == false) {
- $("#father").attr("checked",false);
- }
- });
- });
- 7.反选:
- $("#un").click(function(){
- var num = 0;
- var father = document.getElementById("father");
- var sons = document.getElementsByName("son");
- for(var i=0; i<sons.length; i++) {
- sons[i].checked = !sons[i].checked;
- if(sons[i].checked) {
- num++;
- }
- }
- if(num == sons.length) {
- father.checked = true;
- } else {
- father.checked = false;
- }
- });
2.不同板块间的切换,如下面的
我们自己做的效果:
源码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=gbk" />
- <title></title>
- <style type="text/css">
- span{
- width:150px;
- height:50px;
- line-height:50px;
- background:#c3d9ff;
- display:block;
- text-align:center;
- float:left; /*注意*/
- cursor:pointer;
- }
- div{
- width:450px;
- height:300px;
- background:#c3d9ff;
- }
- #s2,#d2{
- background:#4096ee;
- }
- #s3,#d3{
- background:#ff7400;
- }
- </style>
- <script type="text/javascript">
- function showDiv(num) {
- document.getElementById("d"+num).style.display = "block";
- for(var index=1; index <=3; index++) {
- if(index != num) {
- document.getElementById("d"+index).style.display = "none";
- }
- }
- }
- </script>
- </head>
- <body>
- <span id="s1" onmouseover="showDiv(1)">财经新闻</span>
- <span id="s2" onmouseover="showDiv(2)">体育新闻</span>
- <span id="s3" onmouseover="showDiv(3)">娱乐新闻</span>
- <div id="d1">xxx11111111xxxxx</div>
- <div id="d2" style="display:none;">xxxxx22222222222xxxxxx</div>
- <div id="d3" style="display:none;">xxxxxx333333333333xxxxxx</div>
- </body>
- </html>
3.弹出层
源码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=GBK" />
- <title></title>
- <style type="text/css">
- #jobsList{
- background:#ccc;
- width:200px;
- margin-top:-14px;
- display:none;
- }
- #jobs{
- width:200px;
- height:10px;
- }
- </style>
- <script type="text/javascript">
- function show() {
- var jobs = document.getElementById("jobs");
- var left = jobs.offsetLeft -10; //纯数字。获取相对于浏览器的位置。
- var top = jobs.offsetTop;
- document.getElementById("jobsList").style.display="block";
- document.getElementById("jobsList").style.marginLeft=left+"px"; //
- }
- function closeJobList() {
- var jobs = document.getElementsByName("job");
- //如何通过JS获得单选框中选项
- var value = "";
- for(var i=0; i<jobs.length; i++) {
- if(jobs[i].checked) {
- value = jobs[i].value;
- break;
- }
- }
- //将单选框中选中的值赋值给文本框
- document.getElementById("jobs").value = value;
- //将当前的弹出层隐藏
- document.getElementById("jobsList").style.display="none";
- }
- </script>
- </head>
- <body>
- <form action="" method="get">
- 请选择您的职业:<input type="text" id="jobs" onclick="show()"/>
- </form>
- <div id="jobsList">
- <ul>
- <li><input type="radio" name="job" value="律师"/>律师</li>
- <li><input type="radio" name="job" value="教师"/>教师</li>
- <li><input type="radio" name="job" value="司机"/>司机</li>
- <input type="button" value="选择" onclick="closeJobList()"/>
- </ul>
- </div>
- </body>
- </html>
4.表单的验证
①submit的提交方式--注意submit提交方式的缺点:当我们禁用JS时,依然可以提交!!
源码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=GBK" />
- <title>submit</title>
- <style type="text/css">
- div span{
- width:80px;
- height:20px;
- border:1px solid #ccc;
- display:block; /*注意:此处的作用是为了设置height:20px;*/
- line-height:20px;
- text-align:center;
- float:left;
- }
- </style>
- <script type="text/javascript">
- /*验证表单*/
- function checkForm() {
- var name = document.getElementById("username").value;
- var pwd = document.getElementById("password").value;
- if(name.trim() == "") {
- document.getElementById("username-msg").innerHTML = "用户名必须填写";
- document.getElementById("username").focus(); //获得焦点
- return false; //表示提交不成功!!
- }
- if(pwd.trim() == "") {
- document.getElementById("password-msg").innerHTML = "密码必须填写";
- document.getElementById("password").focus(); //获取焦点
- return false; //表示提交不成功
- }
- return true ;//表示提交成功
- }
- /*清除提示信息*/
- function clearMsg(msg) {
- document.getElementById(msg).innerHTML = "";
- }
- /*密码强度的验证*/
- function validatePassword(){
- var pwd = document.getElementById("password").value.trim();
- if(pwd.length == 0) {
- document.getElementById("low").style.background = ""; /*注意:style.background的应用哦*/
- document.getElementById("mid").style.background = "";
- document.getElementById("hei").style.background = "";
- } else if(pwd.length >= 1 && pwd.length < 6) {
- document.getElementById("low").style.background = "red";
- } else if(pwd.length >= 6 && pwd.length <10) {
- document.getElementById("low").style.background = "blue";
- document.getElementById("mid").style.background = "blue";
- } else {
- document.getElementById("low").style.background = "green";
- document.getElementById("mid").style.background = "green";
- document.getElementById("hei").style.background = "green";
- }
- }
- </script>
- </head>
- <body>
- <form id="myform" action="demo.jsp" method="post" onsubmit="return checkForm()">
- UserName : <input type="text" name="username" id="username" onkeydown="clearMsg('username-mag')"/>
- <span style="color:red;" id="username-msg"></span><br />
- Password : <input type="password" name="password" id="password" onkeypress="validatePassword()" onkeydown="clearMsg('password-msg')"/>
- <span style="color:red;" id="password-msg"></span><br />
- <div>
- <span id="low">弱</span>
- <span id="mid">中</span>
- <span id="hei">强</span>
- </div>
- <div>
- <input type="submit" value="login"/>
- </div>
- </form>
- </body>
- </html>
②button的提交方式:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=GBK" />
- <title>submit</title>
- <style type="text/css">
- div span{
- width:80px;
- height:20px;
- border:1px solid #ccc;
- display:block; /*注意:此处的作用是为了设置height:20px;*/
- line-height:20px;
- text-align:center;
- float:left;
- }
- </style>
- <script type="text/javascript">
- /*验证表单*/
- function checkForm() {
- var name = document.getElementById("username").value;
- var pwd = document.getElementById("password").value;
- if(name.trim() == "") {
- document.getElementById("username-msg").innerHTML = "用户名必须填写";
- document.getElementById("username").focus(); //获得焦点
- return false; //表示提交不成功!!
- }
- if(pwd.trim() == "") {
- document.getElementById("password-msg").innerHTML = "密码必须填写";
- document.getElementById("password").focus(); //获取焦点
- return false; //表示提交不成功
- }
- //return true ;//表示提交成功
- //因为从submit的提交方式换成了button。所以注释掉上面一行,换成下面的
- document.getElementById("myform").submit();
- }
- /*清除提示信息*/
- function clearMsg(msg) {
- document.getElementById(msg).innerHTML = "";
- }
- /*密码强度的验证*/
- function validatePassword(){
- var pwd = document.getElementById("password").value.trim();
- if(pwd.length == 0) {
- document.getElementById("low").style.background = ""; /*注意:style.background的应用哦*/
- document.getElementById("mid").style.background = "";
- document.getElementById("hei").style.background = "";
- } else if(pwd.length >= 1 && pwd.length < 6) {
- document.getElementById("low").style.background = "red";
- } else if(pwd.length >= 6 && pwd.length <10) {
- document.getElementById("low").style.background = "blue";
- document.getElementById("mid").style.background = "blue";
- } else {
- document.getElementById("low").style.background = "green";
- document.getElementById("mid").style.background = "green";
- document.getElementById("hei").style.background = "green";
- }
- }
- </script>
- </head>
- <body>
- <form id="myform" action="demo.jsp" method="post" >
- UserName : <input type="text" name="username" id="username" onkeydown="clearMsg('username-mag')"/>
- <span style="color:red;" id="username-msg"></span><br />
- Password : <input type="password" name="password" id="password" onkeypress="validatePassword()" onkeydown="clearMsg('password-msg')"/>
- <span style="color:red;" id="password-msg"></span><br />
- <div>
- <span id="low">弱</span>
- <span id="mid">中</span>
- <span id="hei">强</span>
- </div>
- <div>
- <input type="button" value="login" onclick="checkForm()"/>
- </div>
- </form>
- </body>
- </html>
5.常用的触发事件:
onblur → 不管值有没有改变,失去焦点总会调用。
onchange → 值发生改变,失去焦点时去调用。(前提值发生改变)
onfocus → 获得焦点时去调用
onkeypress → 键盘按下弹起时触发
onkeydown → 键盘按下后触发
onkeyup → 键盘弹起时触发
onload → 见前面
onmouseover → 鼠标悬浮上面时
onclick → 点击时触发
6.JavaScript数组的学习,具体请参考API
- <script type="text/javascript">
- //javascript数组的学习→ 和java的数组差不多!eg.
- var array = new Array(3);
- array[0] = "hanchao";
- array[1] = "cherry";
- array[2] = "jerry";
- for(var index=0; index < array.length; index++) {
- alert(array[index]);
- }
- array.sort();//按字符顺序对数组进行排序
- //增强for循环的使用(i依然是指数组的下标!!)
- for(var i in array) {
- alert("----"+array[i]);
- document.write(array[i]+"<br/>");//表示向页面刷新内容
- }
- </script>
7.二级级联的一个demo:
了解下拉框控件select的一些属性:
-length:表示一个下拉框中有几个option
-value:表示<option value=" 值">中value的值
-options:所有的option放在一起可看作一个集合或数组叫options
-selectedIndex:您选中的option的索引,从 0 开始。
eg.
源码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=GBK" />
- <title></title>
- <script type="text/javascript">
- function changeSelect() {
- var index = document.getElementById("pp").selectedIndex -1;//减1是为了忽略第一个“--请选择品牌--”
- document.getElementById("type").options.length = 1;//清空上一次选择的
- var typeArray = new Array(); //当Array()括号里不写大小时,是想写多少写多少
- //数组的值又是一个数组
- typeArray[0] = ["A4","A6","A8","Q7"];
- typeArray[1] = ["宝马1系","宝马3系","宝马5系","宝马7系"];
- typeArray[2] = ["宝来","桑塔纳","朗逸"];
- for(var i in typeArray[index]) {
- var option = new Option(typeArray[index][i],typeArray[index][i]);
- //说明:typeArray[index][i]分别代表的值!一个value的值(你看不见的),一个是你能看到的!
- document.getElementById("type").options.add(option);//
- }
- }
- </script>
- </head>
- <body>
- 请选择品牌:
- <select name="pp" id="pp" onchange="changeSelect()">
- <option value="0">--请选择品牌--</option>
- <option value="1">奥迪</option>
- <option value="2">宝马</option>
- <option value="3">大众</option>
- </select>
- 请选择系列:
- <select name="" id="type">
- <option value="">--请选择系列--</option>
- </select>
- </body>
- </html>
写法二:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=GBK" />
- <title></title>
- <script type="text/javascript">
- function changeSelect() {
- var index = document.getElementById("pp").value;
- document.getElementById("type").options.length = 1;//清空上一次选择的
- var typeArray = new Array(); //当Array()括号里不写大小时,是想写多少写多少
- //数组的值又是一个数组
- typeArray['audi'] = ["A4","A6","A8","Q7"];
- typeArray['bmw'] = ["宝马1系","宝马3系","宝马5系","宝马7系"];
- typeArray['auto'] = ["宝来","桑塔纳","朗逸"];
- for(var i in typeArray[index]) {
- var option = new Option(typeArray[index][i],typeArray[index][i]);
- //说明:typeArray[index][i]分别代表值!一个value的值(你看不见的),一个是你能看到的!
- document.getElementById("type").options.add(option);//
- }
- }
- </script>
- </head>
- <body>
- 请选择品牌:
- <select name="pp" id="pp" onchange="changeSelect()">
- <option value="0">--请选择品牌--</option>
- <option value="auid">奥迪</option>
- <option value="bmw">宝马</option>
- <option value="auto">大众</option>
- </select>
- 请选择系列:
- <select name="" id="type">
- <option value="">--请选择系列--</option>
- </select>
- </body>
- </html>
本文转自韩立伟 51CTO博客,原文链接:http://blog.51cto.com/hanchaohan/929381,如需转载请自行联系原作者