老师,我也遇到这个问题了 怎么转换的啊
<!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; }
老师,为什么我点击全选框,没有反应啊?实在找不到哪出错了
<!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" /></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>-</button> <input type="text" value="1" /> <button class="bot">+</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"/></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>-</button> <input type="text" value="1" /> <button class="bot">+</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"/></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>-</button> <input type="text" value="1" /> <button class="bot">+</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>
//判断是否全选操作 function checkTest1(th){ var flag = th.checked; //获得所有的多选框对象 var fav = document.getElementsByName("fav"); for(var i in fav){ fav[i].checked = false; } }
运行效果图
为什么我的背景没有效果?之前的都有就是到了商品栏这里没有效果了
为什么没有动画效果。。老师的源码我点开也没有动画效果。。
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 400px; border: 3px solid red; margin-top: 20px; } p{ border: 3px solid green; } </style> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $("#div1 p:nth-child(1)").remove(); $("#bu1").click(function(){ // 隐藏的显示 ---显示的隐藏 ("div").toggle(3000); }) }) </script> </head> <body> <input type="button" name="but1" id="but1" value="动画效果" /> <hr /> <div id="div1"> <p>item 1</p> <p>item 2</p> <p>item 3</p> </div> <div id="div2"> <p>item 4</p> <p>item 5</p> <p>item 6</p> </div> </body> </html>
老师,我中间部分实现不了分隔!看了老师的代码感觉都一样啊!老师帮我看一下!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <frameset rows="150px,*,100px"> <!--顶部部分--> <frame src="admin/top.html"/> <!--中间的部分--> <frameset cols="10%.*" > <!--左侧部分--> <frame src="admin/left.html"/> <!--右侧部分--> <frame src="admin/right.html"/> </frameset> <!--底部部分--> <frame src="admin/bottom.html"/> </frameset> </html>
我想问一下,在老师的讲解中,判断用户名是不是为空会使用!=null判断,但是我想知道在什么情况会发生为null呢?uname本身是null那么.value方法在调用的时候JS就已经报错,都没有机会执行到这一步。
我目前理解是,判断一个DOM对象的value,要么在获取的时候因为XXX.value的XXX是空,JS已经报错,可是会有XXX.value==null吗?
老师,做HTML5,谷歌、火狐、IE 和 苹果 浏览器都需要下载吗
<html> <head> <title>jQuery操作表格</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> tr{ height: 40px; } </style> <script type="text/javascript" charset="UTF-8" src="js/jquery-1.12.3.min.js"></script> <script type="text/javascript" charset="UTF-8" src="js/gwc.js"></script> </head> <body> <h3>jQuery操作表格</h3> <hr /> <input type="button" id="fx" value="反选" /> <input type="button" id="addRow" value="新增一行" /> <input type="button" id="delRow" value="删除行" /> <input type="button" id="copyRow" value="复制行" /> <table border="1px" cellpadding="10px" cellspacing="0" id="ta"> <tr> <td width="50px"><input type="checkbox" name="chks" id="chks" value="1" /></td> <td width="200px">书名</td> <td width="200px">作者</td> <td width="200px">数量</td> <td width="200px">操作</td> </tr> <tr id=""> <td><input type="checkbox" name="chk" id="" value="2"/></td> <td>《Java编程之道》</td> <td>wollo</td> <td>10</td> <td> <input type="button" name="aa" id="" value="修改数量" onclick="change(this)"/> <input type="button" name="" id="" value="删除" /> </td> </tr> <tr> <td><input type="checkbox" name="chk" id="" value="3" /></td> <td>《Python和我的故事》</td> <td>赵老师</td> <td>10</td> <td> <input type="button" name="" id="" value="修改数量" onclick="change(this)"/> <input type="button" name="" id="" value="删除" /> </td> </tr> <tr> <td><input type="checkbox" name="chk" id="" value="4" /></td> <td>《web开发详解》</td> <td>张老师</td> <td>30</td> <td> <input type="button" name="" id="" value="修改数量" onclick="change(this)"/> <input type="button" name="" id="" value="删除" /> </td> </tr> </table> </body> </html>
$(function(){ $("#chks").click(function(){ //确定全选和全不选的操作 var flag=$(this).prop("checked") $("input[name=chk]").prop("checked","flag"); /* if(flag){ $("input[name=chk]").prop("checked","true"); }else{ $("input[name=chk]").prop("checked","false"); } */ }) //判断是否全选 $("input[name=chk]").click(function(){ var flag=true; var chk=$("input[name=chk]") chk.each(function(){ if(!$(this).prop("checked")){ flag=false; return; } }) $("#chks").prop("checked",flag); }) //反选的操作 $("#fx").click(function (){ var chx=$("input[type=checkbox]"); chx.each(function(){ //获得多选框的初始的状态 var flag=$(this).prop("checked"); $(this).prop("checked",!flag); }) }) //新添加一行的操作 $("#addRow").click(function(){ //获得table对象 var tab=$("#ta"); tab.append('<tr id="">'+ '<td><input type="checkbox" name="chk" id="" value="2"/></td>'+ '<td>《Java编程之道》</td>'+ '<td>wollo</td>'+ '<td>10</td>'+ '<td>'+ '<input type="button" name="aa" id="" value="修改数量" /> '+ '<input type="button" name="" id="" value="删除" />'+ '</td>'+ '</tr>'); }) //删除的操作 $("#delRow").click(function(){ var del=$("input[name=chk]:checked"); if(del.length==0){ alert("至少选择一行"); }else{ //执行删除的操作 del.parent().parent().remove(); } }) //复制行 $("#copyRow").click(function(){ var copy=$("input[name=chk]:checked"); if(copy.length==0){ alert("至少选择一行"); }else{ //执行copy //复制 var tr=copy.parent().parent().clone(); //粘贴 $("#ta").append(tr); } }) //修改数量的操作 function change(th){ //tr节点 var par=$(th).parent().parent(); par.children().eq(3).html("<input type='text' size='3px'/>"); } })
老师我的jQuery引入正常,但是到修改数量就出现参数未定义,这个是哪里有问题
一、截图
二、问题
1.这语句的意思是,document.name属性名,得到的是form标签,调用submit()方法?
2.请老师描述下form标签下的name属性在以后的项目中有哪些用处?value是填写的具体值,name是用来定位吗,id不是更好用?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function checkName(){ //获得input对象的值 var uname=document.getElementById("uname").value; //获得span对象 var span=document.getElementById("uname_span"); if(uname==null||name==""){ span.innerText="×账号不能为空"; }else { span.innerText="√账号合法"; } } </script> </head> <body> <form action="" name="fom" id="fom"> <p> 账号:<input type="text" name="uname" id="uname" onblur="checkName()"/><span id="uname_span"></span> </p> <p> 密码:<input type="password" name="pwd" value="123"/> </p> <p> <input type="button" value="提交" onclick="checkName()"/> </p> </form> </body> </html>
老师,这里空账号正常显示,刷新网页输入数字后它为什么还是提示错误
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> function addNode(){ //获得表单对象 var fom=document.getElementById("fom"); //创建节点的方法 var p=document.createElement("p"); var inp=document.createElement("input"); inp.type="file"; var inp2=document.createElement("input"); inp2.type="button"; inp2.value="删除"; //添加节点对象 //fom.appendChild(p); //获得最后一个节点对象 var lastNode=document.getElementById("lastNode"); fom.insertBefore(p.lastNode); p.appendChild(inp); p.appendChild(inp2); } </script> </head> <body> <form id="fom"> <p> 用户名:<input type="text"/> </p> <p> 照片:<input type="file"/> <input type="button"value="添加" onclick="addNode()"/> </p> <p id="lastNode"> <input type="button" name="" id="" value="提交" /> <input type="button" name="" id="" value="清空" /> </p> </form> </body> </html>
老师为什么我给指定元素之前添加节点后网页就一直报错
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="1.html" method="post"> <p> 账号 <input type = "text" value="123" name = "name" /></p> <p> 密码 <input type="password" value="321" name = "pwd"/></p> <input type = "submit" value = "提交"/> </form> </body> </html>
老师这个是什么问题
老师 为什么这个是无颜色? 还有一个,div忘记加class了,代码是错的。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>系统时间</title> </head> <body> <script> Date.prototype.format = function (fmt) { var o = { "y+": this.getFullYear, //年 "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds() //秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } setInterval("document.getElementById('dateTime').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000); </script> <div id="dateTime"></div> </body>
老师,这是网上找的一个 格式化时间的代码,这块是什么意思
老师想问下 大写和小写有什么区别,只是单纯的在网页 没有返回吗
非常抱歉给您带来不好的体验!为了更深入的了解您的学习情况以及遇到的问题,您可以直接拨打投诉热线:
我们将在第一时间处理好您的问题!
关于
课程分类
百战程序员微信公众号
百战程序员微信小程序
©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园网站维护:百战汇智(北京)科技有限公司 京公网安备 11011402011233号 京ICP备18060230号-3 营业执照 经营许可证:京B2-20212637