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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			#div1{
				height: 300px;
				border: 2px solid red;
			}
			p{
				border: 2px solid green;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		
		<script>
			$(function(){
				var p = $("<p>替换的元素</>");

				$("div p:nth-child(2)").replaceWith(p);
				$("div p:nth-child(4)").replaceWith(p);
				

			})
			
			
		</script>
		
	</head>
	<body>
		<div id="div1">
			<p>111</p>
			<p>222</p>
			<p>333</p>
			<p>444</p>
			<p>555</p>
			<p>666</p>
		</div>
	</body>
</html>

结果：

1.请问老师这个replaceWith把第二个弄没了，然后把第四个替换了，是怎么回事。

2.如果要同时替换两个，应该怎么办，总不会再写一个function吧。

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

请问老师：

1.为什么是无颜色

2.为什么我把<script>标签里的[0]去掉后，下一行改为红色就没用了

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

老师好，我有个疑问，$（function）()这个页面加载后执行的函数，是一直会执行吗，不然这个函数里的事件怎么能一直有效呢。

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

老师好，为什么这里变量错误也能获取正确的值。

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

老师是不是直接使用$(this)来获得对象就不需要用$(th)来接收参数了，我试了一下，发现写不写$(th)都不影响方法的执行效果

function bul(th){
	var par = $(this).parent().parent();
	par.children().eq(3).html(this.value);//或者转成JQ对象再调用val来获得值
}

写不写$(th)都不影响方法的执行效果这是因为 bul() 方法内嵌在input里面的原因吗

tab.append('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td>'+
					'<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>&nbsp'+
					'<input type="button" name="" id="" value="删除" onclick="del(this)"/>'+
				'</td>'+
			'</tr>');

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

问题一：

老师，我想在点击新增一行这个按钮时新增的一行可以自定义书名，作者，数量，但是我发现我写的代码只能自定义书名和作者，而且数量随着书名和作者的值变化而变化，如果先在书名里面写张三那么数量也变为张三，然后在作者里面写李四，这时候数量又变成了李四，老师这个我该怎么解决

问题二：

我在书名，作者和数量的input里面都调用了失去焦点的方法，为什么只有数量可以成功调用，写完之后鼠标点击其他地方文本框边框消失，而作者和书名却不行

问题动图如下：

GIF.gif

源码如下：

html：

<html>
	<head>
		<title>jQuery操作表格</title>
		<meta charset="UTF-8"/>
		<!--声明css代码域-->
		<style type="text/css">
			tr{
				height: 40px;
			}
		</style>
	 
	 	<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/gwc.js"	type="text/javascript" charset="UTF-8"></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="删除" onclick="del(this)"/>
				</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="删除" onclick="del(this)"/>
				</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="删除" onclick="del(this)"/>
				</td>
			</tr>			
		</table>
	</body>
</html>

JS：

$(function(){

	
	//确定全选和全部不选操作
	
	$("#chks").click(function(){
		
		var flag = $(this).prop("checked");//返回布尔类型
		
			$("input[name=chk]").prop("checked",flag);//让所有内容都选中

	})
	
	//判断是否全选的操作
	$("input[name=chk]").click(function(){
		
		var flag = true;
		
		var chk = $("input[name=chk]");
		
		//each：遍历		每次遍历执行funaction 里面的内容
		chk.each(function(){
			
			if(!$(this).prop("checked")){
				
				flag = false;
				
				return;
			}
			
		})
		
		$("#chks").prop("checked",flag);
		
	})
	
	//反选的操作
	$("#fx").click(function(){
		
		//拿到所有的多选框
		var chx = $("input[name=chk]");
		
		//遍历
		chx.each(function(){
			
			//获得每个多选框的初始状态
			var flag = $(this).prop("checked");
			
			//现有状态与原始状态进行取反
			$(this).prop("checked",!flag);
		})
	})
	
	//新增加一行的操作
	$("#addRow").click(function(){
		
		//获得tab对象
		var tab = $("#ta");
		
		tab.append('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td><input type="text"	onblur="bul(this)"/></td>'+
				'<td>'+
					'<input type="button" name="aa" id="" value="修改数量"  onclick="change(this)"/>&nbsp'+
					'<input type="button" name="" id="" value="删除" onclick="del(this)"/>'+
				'</td>'+
			'</tr>');
		
	})
	
	//删除的操作
	$("#delRow").click(function(){
		
		//获得被选中的name=chk的单选框
		var del = $("input[name=chk]:checked");
		
		if(del.length==0){//如果一行没选
			alert("至少选择一行！");
		}else{
			
			//执行删除整行的操作	单选框的父节点是	td	,	td	的父节点是	tr
			del.parent().parent().remove();
		}
		
	})
	
	//复制行		选中几个复制几个
	$("#copyRow").click(function(){
		
		//获得被选中的name=chk的多选框
		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){//这里的this是JS类型的，得转换成JQ对象
	
	//$(th):转换成JQ对象		获得	tr	结点
	var par = $(th).parent().parent();
	
	//将写死的数量变成可以定义的文本框
	par.children().eq(3).html("<input	type='text' size='3px' onblur='bul(this)'/>");
}

function bul(th){
	
	var par = $(th).parent().parent();
	
	par.children().eq(3).html(th.value);//或者转成JQ对象再调用val来获得值
}

function del(th){
	
	var par = $(th).parent().parent();
	
	par.remove();
	
}

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

问题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>

实现效果如下：

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

老师，我在打开页面之后直接选中某一个单选框，（不改变数量值的情况下，）总价显示的是NaN（如图）

但在我更改数量之后，就会显示数字结果了，当我再改变数量为1的时候还是会有数字的（如图），这是怎么回事呢？

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--标题标签  h1-h6自动加粗加黑  会自动换行  -->
		<h1>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h1>
		<h2>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h2>
		<h3>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h3>
		<h4>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h4>
		<h5>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h5>
		<h6>【新时代 ：幸福美丽新边疆】西藏：代代接力守护绿色家园</h6>
	</body>
</html>

换浏览器打开还是显示不出来，多次刷新还是显示不出来，用notepad，显示出来了，请问老师怎么解决？问题出在哪呢？

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

老师您好，我也遇到了使用HBuilder编写的自动跳转网页使用那个浏览器都跳转不过去。

但是，我用了notepad++编写了，跳转过去了。

请问老师这是什么原因造成的呢？

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

老师，如何在新增的行中也可以执行“添加”的行为呢？我试了试发现不会做所以来请教您...可以给个代码便是更好了！！

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

老师，我在输入td3的内容时，内容和您的一样，但是出来的结果图是不大一样的，这是怎么回事呢？

（如图）

这是我输入的代码

展现的图如下：

老师的代码：

展现的图如下：

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

那么这个标题框是不是就只能一个div后面跟两个值，而不能进行嵌套那样写呀？如果可以嵌套请老师写一下我研究研究

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

老师为什么搜索框的div class可以写成以下这样，而标题框却不能写成下面这样呢

	<!--搜索框开始-->
		
		<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按照上面的写分别定义两个div和class：则运行结果如下

<!--标题开始-->
		<div	class="title">
			<div	class="warp">
			<h3>全部商品</h3>
			
			<div>
				<span>配送到</span>
				
				<select>
					
					<option>昌平区</option>
					<option>朝阳区</option>
					<option>海定区</option>
					<option>顺义区</option>
					<option>大兴区</option>
					
				</select>
			</div>
			</div>
			
		</div>
		<!--标题结束-->

但是搜索框的div和class却可以在一个class中定义两个名字这样写而页面不会被打乱

	<!--搜索框开始-->
		
		<div	class="search warp"> 
			
			<!--<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>
		
		<!--搜索框结束-->

附上warp的CSS部分：

.warp{
	
	width: 1000px;
	/*设置div居中*/
	margin: 0px auto;
	
}

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

老师，在这样的代码中（如图），想要让里面的内容居中，就要在.top里输入text-align: center;而不是在.top_a中输入，这是为什么呢？

以下是效果图：（.top）（.top_a）

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

同学您好