老师,我也遇到这个问题了 怎么转换的啊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/jd.css" /> <link rel="stylesheet" type="text/css" href="icon/iconfont.css" /> <script type="text/javascript" src="js/jd.js"></script> </head> <body> <!--导航开始--> <div class="nav"> <div class="warp"> <ul class="nav_ul1"> <li><a href=""><i class="iconfont"></i>京东首页</a></li> <li><a href="">配送到:北京</a></li> </ul> <ul class="nav_ul2"> <li><a href="">洋洋宝贝</a><span>|</span></li> <li><a href="">我的订单</a><span>|</span></li> <li><a href="">我的京东</a><span>|</span></li> <li><a href="">我的会员</a><span>|</span></li> <li><a href="">企业采购</a><span>|</span></li> <li><a href="">京东手机</a><span>|</span></li> <li><a href="">关注京东</a><span>|</span></li> <li><a href="">客服服务</a><span>|</span></li> <li><a href="">网站导航</a></li> </ul> </div> </div> <!--导航结束--> <!--搜索框开始--> <div class="search"> <div class="warp"> <img src="img/logo.jpg" /> <div class="search_div"> <input type="text" class="search_text"/> <input type="button" value="搜索" class="search_but"/> </div> </div> </div> <!--搜索框结束--> <!--标题开始--> <div class="title warp"> <h3>全部商品</h3> <div> <span>配送至</span> <select> <option>昌平区</option> <option>顺义区</option> <option>大兴区</option> <option>朝阳区</option> </select> </div> </div> <!--标题结束--> <!--显示菜单的开始--> <div class="tips warp"> <ul> <li><input type="checkbox" name="fav" id="all" onclick="checkTest1(this)" />全选</li> <li>商品</li> <li>单价</li> <li>数量</li> <li>小计</li> <li>数量</li> </ul> </div> <!--显示菜单的结束--> <!--商品详情展示开始--> <div class="info warp"> <ul> <li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()" /></li> <li class="info_2"> <img src="img/img1.jpg" width="80px"/></li> <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li> <li class="info_4"><a>颜色:灰色+粉红</a></li> <li class="info_5">¥152.6</li> <li class="info_6"> <button onclick="checkTest3(this,1)">-</button> <input type="text" value="1" /> <button class="bot" onclick="checkTest3(this,2)">+</button> </li> <li class="info_7">¥152.6</li> <li class="info_8"> <a>删除</a><br /> <a>移至我的关注</a> </li> </ul> </div> <div class="info warp"> <ul> <li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li> <li class="info_2"> <img src="img/img2.jpg" width="80px"/></li> <li class="info_3"><a>【京东超市】联想电脑,第六代智能英特尔 </a></li> <li class="info_4"><a>颜色:灰色+粉红</a></li> <li class="info_5">¥152.6</li> <li class="info_6"> <button checkTest3(this,1)>-</button> <input type="text" value="1" /> <button class="bot" checkTest3(this,2)>+</button> </li> <li class="info_7">¥152.6</li> <li class="info_8"> <a>删除</a><br /> <a>移至我的关注</a> </li> </ul> </div> <div class="info warp"> <ul> <li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li> <li class="info_2"> <img src="img/img3.jpg" width="80px"/></li> <li class="info_3"><a>【京东超市】desha春秋季儿童休闲服 </a></li> <li class="info_4"><a>颜色:灰色+粉红</a></li> <li class="info_5">¥152.6</li> <li class="info_6"> <button checkTest3(this,1)>-</button> <input type="text" value="1" /> <button class="bot" checkTest3(this,2)>+</button> </li> <li class="info_7">¥152.6</li> <li class="info_8"> <a>删除</a><br /> <a>移至我的关注</a> </li> </ul> </div> <!--商品详情展示结束--> <!--结算模块开始--> <div class="balance warp"> <ul class="balance_ul1"> <li><input type="checkbox" name="fav" onclick="checkTest1(this)" />全选</li> <li><a>删除选中商品</a></li> <li><a>移到我的关注</a></li> <li><a>清除下柜商品</a></li> </ul> <ul class="balance_ul2"> <li>已经选择<span>1</span>件商品</li> <li>总价<span>¥12</span></li> <li> <button class="butt">去结算</button> </li> </ul> </div> <!--结算模块结束--> </body> </html>
JS代码:
//获得所有的多选框对象 var fav = document.getElementsByName("fav"); //判断是否全选操作 function checkTest1(th){ var flag = th.checked; for(var i in fav){ fav[i].checked = flag; } } //单选决定全选操作 function checkTest2(){ var flag = true; for(var i=1;i<fav.length-1;i++){ if(!fav[i].checked){ flag=false; break; } } //决定框是否勾选 fav[0].checked = flag; fav[fav.length-1].checked = flag; } //控制数量的增加和减少 function checkTest3(th,sig){ var pre; if(sig=="1"){ //获得下一个节点 pre = th.nextElementSibling; if(Number(pre.value)>0){ //获得节点的value值 pre.value = Number(pre.value)-1; } }else{ //获得上一个节点对象 pre=th.previousElementSibling; //获得节点的value值 pre.value = Number(pre.value)+1; } //计算每一个商品总的价格 //获得每一个商品的单价 parentNode:父节点 innerHTML:该商品的价格 var val = pre.parentNode.previousElementSibling.innerHTML; //计算总的价格 Number(pre.value):商品的数量 var zong = Number(val)*Number(pre.value); //把总的价格赋值给指定的对象 pre.parentNode.nextElementSibling.innerHTML = "¥"+zong; }
<ul class="topnav"> <li>item 1</li> <li>item 2</li> <li> <ul> <li>children item1</li> <li>children item2</li> </ul> </li> </ul> <script> var topnav = document.getElementsByClassName("topnav")[0]; var children = topnav.chilNodes; for(var i=0;i<children.length;i++){ if(children[i].nodeName!=="#text"){ children[i].style.border = "2px solid red"; } } </script>
添加不了边框,显示
children.length
错误
老师,在替换指定节点时,如果同时使用两种方式替换指定节点元素,为什么执行结果第一行替换的内容就消失了呢?正常不是应该把第一行和第三行都替换成指定的节点元素吗?
用了 type后 穿模了 左边图片是超链接
请问老师这个alert(va2s)中的s是什么? 不会报错?您试试和看下视频吧,感谢
老师,为什么 $(":input").css("background-color","red"); 这个执行的结果是下图这样呢?不是说 $(":input")表示选中form表单的所有表单项吗?为什么还有几个没变色?
视频中的js文件没有,下载本章的资料中也没有!!!
老师你课上讲错了。。。 下表是从1开始 然后奇数 偶数行 说反了。。。 所以到底 你说的正确呢 还是这个答案是有问题的呢??我是按你说的 填的 然后错了
问题1:
老师为什么只有用户名那一行的两个列设置了宽度为150px和400px却作用到了整个表单的列呢?我加上边框之后看的更明显了,不应该只作用在用户名的那一行吗?
问题2:
设置行高为35px 仅仅是为了更美更吧
table源码如下:
<table align="center" border="2px"> <tr height="35px"> <td width="150px">用户名:</td> <td width="400px"> <!--失去焦点时进行方法调用--> <input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/> <span id="uname_span">*用户名必须是3~5位的汉字</span> </td> </tr> <tr height="35px"> <td>密码:</td> <td> <input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd( )"/> <span id="pwd_span"></span> </td> </tr> <tr height="35px"> <td>手机号:</td> <td> <input type="number" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()"/> <span id="phone_span"></span> </td> </tr> <tr height="35px"> <td>邮箱:</td> <td> <input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()"/> <span id="email_span"></span> </td> </tr> <tr height="35px"> <td>性别:</td> <td> 男:<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/> 女:<input type="radio" name="sex" id="" value="1" onclick="checkSex()"/> <span id="sex_span"></span> </td> </tr> <tr height="35px"> <td>爱好:</td> <td> <input type="checkbox" name="fav" id="" value="1" />抽烟 <input type="checkbox" name="fav" id="" value="2" />喝酒 <input type="checkbox" name="fav" id="" value="3" />烫头<br /> <input type="checkbox" name="fav" id="" value="4" />泡妞 <input type="checkbox" name="fav" id="" value="5" />撩妹 <input type="checkbox" name="fav" id="" value="6" />吹牛 </td> </tr> <tr height="35px"> <td>籍贯:</td> <td> <!--默认值发生改变就是已选择,对应事件为onchange--> <select name="address" id="sel" onchange="checkAddress()"> <option value="0">--请选择--</option> <option value="1">安徽</option> <option value="2">江苏</option> <option value="3">河南</option> <option value="4">河北</option> <option value="5">湖南</option> <option value="6">湖北</option> </select> <span id="sel_span"></span> </td> </tr> <tr height="35px"> <td>验证码:</td> <td> <input type="number" name="yzm" id="yzm" value="" onblur="checkYZM()"/> <span id="yzm_span"></span> <span id="yzm2_span"></span> <input type="button" name="" id="" value="获取验证码" onclick="YZM()"/> </td> </tr> <tr height="35px"> <td>个人介绍:</td> <td> <textarea name="intro" rows="8" cols="30"></textarea> </td> </tr> <tr height="35px"> <td colspan="2" align="center"> <input type="checkbox" name="" id="check" value="" onclick="checkAgree()"/>是否同意本公司协议 </td> </tr> <tr height="35px"> <td align="center" colspan="2"> <!--disabled="disabled"或者disabled="true"都表示不可用的--> <input type="submit" name="" id="sub" value="注册" disabled="disabled"/> </td> </tr> </table>
实现效果如下:
下拉框 默认不选择呢 怎么写
苹果、香蕉、橘子 前面不应该是默认的实心黑点吗?为什么是空心的?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> /* 函数声明的方式 */ //方式一 function demo1(){ alert("函数声明方式一"); } //方式二 var demo2= function(){ alert("函数声明二"); } //方式三 函数本身也是一个对象 不常用 var demo3= new Function("alert('函数声明三')") //调用函数 //demo1(); //demo2(); //demo3(); /*** 函数中参数传递 ***/ function demo4(a,b){ console.log(1+"..."+2); } demo4(1,2); //1...2 demo4(1); demo4(1,2,3); //1...2 /***** 函数的返回值 ******/ function demo5(a){ console.log(a); return; } //demo5(5); alert(demo5(5)); </script> </head> <body> </body> </html> <!-- 函数声明的方式: 方式一: function 函数名(){ 函数体; } 方式二: var 函数名= function(){ 函数体; } 方式三: var 函数名=new Function(函数体); 函数参数传递 在js中实参的个数和形参的个数可以不一致. -->
我的 参数传递的 demo4(1); 结果是1...2 函数的返回值中alert(demo5(5)); 结果却是unidefined 这是怎么回事?我没找出来原因。
问题:
创建的清空按钮不好使,也没有邮箱提示
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>h5表单增强</title> </head> <body> <from> <p> 邮箱:<input type="email" /> </p> <p> <input type="submit" value="提交"> <input type="reset" value="清空"> </p> </from> </body> </html>
运行结果:
点提交和清空,都没反应
老师,请问为什么新增的行取消勾选后,全选项无法自动取消勾选?我自己写的和老师的案例也是这样,请问是哪里有问题?
$(function(){ /*************全选***********************/ $("#chks").click(function(){ var flag = $("#chks").prop("checked"); $("input[name='chk']").prop("checked",flag); }) /*************判断是否全选*****************/ $("input[name='chk']").click(function(){ var flag = true; var ck = $("input[name='chk']"); ck.each(function(){ if(!$(this).prop("checked")){ flag = false; } }) $("#chks").prop("checked",flag); }) /************反选*******************/ $("#fx").click(function(){ var chk = $("input[name='chk']"); chk.each(function(){ var flag = $(this).prop("checked"); $(this).prop("checked",!flag); }) flag1 = true; chk.each(function(){ if(!$(this).prop("checked")){ flag1 = false; } }) $("#chks").prop("checked",flag1); }) /************新增一行*********************/ $("#addRow").click(function(){ var tb = $("#ta"); tb.append('<tr id="">'+ '<td><input type="checkbox" name="chk" id="" value="2"/></td>'+ '<td>《Java编程之道》</td>'+ '<td>wollo</td>'+ '<td>10</td>'+ '</tr>') }) /************删除行**********************/ $("#delRow").click(function(){ var ck = $("input[name=chk]:checked"); if(ck.length==0){ alert("请至少选择一行"); }else{ ck.parent().parent().remove(); } }) /***************复制行********************/ $("#copyRow").click(function(){ var ck = $("input[name='chk']:checked"); var tb = $("#ta"); if(ck.length==0){ alert("请选择至少一行"); }else{ tb.append(ck.parent().parent().clone()); } }) })
非常抱歉给您带来不好的体验!为了更深入的了解您的学习情况以及遇到的问题,您可以直接拨打投诉热线:
我们将在第一时间处理好您的问题!
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护:百战汇智(北京)科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证:京B2-20212637