有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<!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"/>
		
		<!--引入JS文件-->
		<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">&#xe620;</i>京东首页</a></li>
						<li><a href="">配送到：北京</a></li>
					</ul>
					
					<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>
						
					</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>
					<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">￥182.5</li>
					<li class="info_6">
						
						<button>-</button>
						<input type="text" name="" id="" value="1" />
						<button class="info_bot">+</button>
					</li>
					<li class="info_7">￥182.5</li>
					<li>
						<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">￥182.5</li>
					<li class="info_6">
						
						<button>-</button>
						<input type="text" name="fav" id="" value="1" />
						<button class="info_bot">+</button>
					</li>
					<li class="info_7">￥182.5</li>
					<li>
						<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>【京东超市】desha春秋季儿童休闲服</a></li>
					<li class="info_4"><a>颜色：灰色+粉红</a></li>
					<li class="info_5">￥182.5</li>
					<li class="info_6">
						
						<button>-</button>
						<input type="text" name="" id="" value="1" />
						<button class="info_bot">+</button>
					</li>
					<li class="info_7">￥182.5</li>
					<li>
						<a>删除</a><br />
						<a>移到我的关注</a>
					</li>
				</ul>
			</div>
			
		
		<!--商品详情展示结束-->
		
		<!--结算模块开始-->
		<div class="balance warp">
			<ul class="balance_ul1">
				<li>
					<input type="checkbox" name="fav" id="" value="" 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部分：



//获得所有name=fav的多选框对象		定义成全局变量
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;//但凡有一个多选框没被选中剩下的就可以不用判断了，跳出循环
		}
		
		
	}
	
	//根据flag的值决定全选框是否被勾选
	
	fav[0].checked = flag;//下标为0对应的是第一个全选框
	
	fav[fav.length-1].checked = flag;//下标为length-1对应的是最后一个全选框
	
	console.log(fav[0].checked);
	console.log(fav[fav.length-1].checked);
	
}

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 377楼

老师我是在icon下载下来的但是找不动demo_unicode.html这个东西？

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 378楼

老师：引入div样式的时候 # 和 .有什么区别？

#div1{

width: 200px;

height: 200px;

border: 2px solid royalblue;

}

.div1{

width: 200px;

height: 200px;

border: 2px solid royalblue;

}

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 379楼

老师，这个iframe只有第一次点击会在这个框架里加载，但是我在回过头在次点击的时候，它就会新开一个网页加载了，有什么解决办法吗？

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 380楼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Document</title>
	</head>
	<body>
		
		<div class="nav">导航</div>
		<div id="container"></div>
		
		
		
		<script>
			var text = document.createElement("p");
			var content = document.createTextNode("我是文本");
			var id = document.createAttribute("id");
			text.appendChild(content);
			console.log(text);
			console.log(id);
			text.setAttributeNode(id);
			console.log(text);
			id.value = "root";
			
			var container = document.getElementById(container);
			console.log(container);
			
			container.appendChild(text);
			
			
		</script>
		
	</body>
</html>
老师，请问这个异常是什么原因呢？代码都检查了，和老师写的一样的

JAVA 全系列/第四阶段：网页编程和设计/JavaScript语言 381楼

老师案例里有个bug，写了新数据，不能在添加新的行，怎么也解决呢？

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 382楼

var str = "<a href =https://www.itbaizhan.com>it</a>"

root=innerHTML = str;

为什么这里是root=innerHTML = str;我把root更换为box不能跳转链接了

JAVA 全系列/第四阶段：网页编程和设计/JavaScript语言 383楼

老师，我记得课程里说过一个前端组件网站，有各种各样的前端组件以及实现方式，老师能否再分享一下！

JAVA 全系列/第四阶段：网页编程和设计/Javascript 语言（旧） 384楼

旋转45度是正方形，最下面动画只写了旋转，为什么程序就知道是正方形旋转，而不是另外两个圆选转呢？

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 385楼

老师，ul 和li也是选择器吗？什么选择器？

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 386楼

该视频中的导航栏布局我是否可以直接用span来实现？

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 387楼

老师：视频案例中删除行操作，如果一次选多行一起删除，那么上图中chk应该是一个数组呀，为什么在后面移除时不用遍历，而是直接全部移除了？

JAVA 全系列/第四阶段：网页编程和设计/Jquery（旧） 388楼

提问：

这里选择浏览器图标是灰色，点不了，该怎么设置啊？

JAVA 全系列/第四阶段：网页编程和设计/HTML5（旧） 389楼

<!DOCTYPE html>

<html>

<head>

<style>

.cen{

width: 200px;

heig: 200px

background-color:#d5093c;

/*阴影水平方向的偏移垂直方向的偏移模糊度阴影颜色*/

box-shadow:0px 0px 70px #D5093C;

}

.lef{

/*倒圆角指令*/

border-radius: 100px;

/*左上右下走上左下*/

/*border-radiu:10px 60px;*/

/*border-radiu:10px 20px 30px 40px;*/

position: absolute;

top: 200px;

left: 200px;

}

.rig{

border-radius: 100px;

position: absolute;

top: 200px;

left: 341px;

}

.c{

/*旋转角度*/

transform: rotate(45deg);

position: absolute;

top: 269px;

left: 271px;

}

div.hover{

/*放大的倍数*/

transform: scale(1.3);

/*x:水平位移 y:垂直方向负数：上*/

/*transform: translate(0px,-5px);*/

/*2D角度旋转 X Y*/

/*transform: skew(40deg 45deg);*/

}

</style>

</head>

<body>

</body>

</html>

老师为什么我的代码这个在浏览器中打开后没有显示

JAVA 全系列/第四阶段：网页编程和设计/CSS3（旧） 390楼

同学您好