jQuery的四个小练习

最新推荐文章于 2022-03-26 23:22:05 发布

559Jiang

最新推荐文章于 2022-03-26 23:22:05 发布

阅读量133

点赞数

分类专栏：题库

本文链接：https://blog.csdn.net/weixin_43988251/article/details/105152579

版权

题库专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 做一10秒钟以后能发言的按钮

开始的时候按钮不能点,过了10秒以后,可以点

<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
	$(function(){
	
		var but=setInterval("a()",1000);
		
	});
	var count=10;
	function a(){
			if(count==0){
				$("button").html("你可以点了").removeAttr("disabled");
				clearInterval(but);
			}else{
				count--;
				$("button").html("请仔细阅读" + count + "秒");
				
			}
		}
</script>

主要注意点：定时器用javascript中的setInterval来设置每隔一秒执行一次并且1可以传一个函数在那个函数中可以设置每秒钟按钮得变化10秒过后用clearInterval来停止计时并删除掉按钮disable属性让按钮可以点击

2 做一发贴的功能

<script type="text/javascript" src="jquery-1.8.0.js"></script>
<script>
	$(function(){
		$("button").click(function(){
			var td=$("input[type=text]").val();
			var td1=$("textarea").val();
			$("#t1").prepend("<tr><td>"+td+"</td><td>"+td1+"</td></tr>");
		});
	});`在这里插入代码片`
</script>

<style>
	
	table{
		width:50%;
		height:50%;
		border:1px solid orange;
		border-collapse:collapse;
		word-break:break-all;
		
	}
	th,td{
		border:1px solid orange;
		width:50%;
	}
	textarea{
		margin-top:2px;
	
		width:198px;
		padding-top:2px;
	}
	input{
	  margin-top:30px;
		width:200px;
	}		
	label{
		padding-top:2px;
	}
	button{
		margin-top:5px;
		margin-left:190px;
	}
	</style>`在这里插入代码片`

<body>
	<table>
		<tr>
			<th>名称</th><th>备注</th>
		</tr>
	</table>
	<table id="t1">
		
	</table>
	名称：<input type="text"/><br/>
	<label>备注:</label> <textarea name="note"></textarea><br/>
	<button>发帖</button>
</body>

这个发帖没什么难度给发帖按钮一个点击时间后得到写的内容在用prepend方法加入到table中就可以 prepend是默认加到第一行（append是默认加到最后一行）多以如果要让记录有标题“<th>名称</th><th>备注</th>”的话可以用两个表格更简单的方式目前没有想到

3 做一ul 里`在这里插入代码片`面有很多li

每点击一个li以后,让这个li 移到另一个ul中 (鼠标滑过的li要高亮)
重点

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="jquery-1.8.0.js"></script>
		<script>
			$(function(){
				$("#ul1 li").mouseover(function(){
					$(this).css("color","pink");
					$(this).siblings().css("color","black");
				}).css("cursor","pointer");
				
				$("#ul1 li").click(function(){
					$("#ul2").append( $(this).remove());
				});
			});
			
		</script>
		<style>
			#ul1{
				width:150px;
				height:100px;
				border:1px solid orange;
				float:left;
			}
			#ul2{
				width:150px;
				height:100px;
				margin-left:20px;
				float:left;
				color:black;
				border:1px solid green;
			}
		</style>
			
	</head>
	<body>
		<ul id="ul1">
			<li>只读</li>
			<li>修改</li>
			<li>查看</li>
			<li>什么都可以</li>
		</ul>
		<ul id="ul2">
		</ul>
	</body>
</html>

:这里就用一个模块了主要头疼的问题有
1)下一题要求是点击后把数据传到另一个地方并且点击在传回来所以就想在这题就把这个问题解决
2)但是$("#ul2").append( $(this).remove());这句代码加入到ul中的时候加点击时间是点不了的
$("#ul2").append( $(this).detach());这句代码ul1中删除掉的节点直接加入ul2中后他会保留原有的jquery事件就是在ul2中删除在添加在ul2中猜测他的引用还是ul1 为了解决这个问题搜了半天结果放弃后做下一题发现remove删除后的加入到另一个下拉框中添加点击事件是完全可以的（枯了。。。）

4) 做一个模拟授权的功能框

<!DOCTYPE HTML>
<html>
	<head>
			<script type="text/javascript" src="jquery-1.8.0.js"></script>
		<script>
			$(function(){
				$("#but2").click(function(){
					$("#select2").append($("#select1 option:selected").remove());
				});
				$("#but1").click(function(){
					$("#select1").append($("#select2 option:selected").remove());
				});
			});
		</script>
		<style>
			select{
				width:100px;
				height:100px;
				margin-left:5px;
				float:left;
			}
			#but1{
				margin-top:0px;
				margin-left:5px;
				float:left;
			
			}
			#but2{
				margin-top:76px;
				margin-left:-40px;
				float:left;
			
			}
		</style>
	</head>
	<body>
		<select id="select1"  multiple="multiple">
				<option>增加</option>
				<option>删除</option>
				<option>修改</option>
				<option>查询</option>
    </select>
    <button id="but1"> <<< </button>
    <button id="but2"> >>> </button>
    <select id="select2" multiple="multiple"></select>
	</body>
</html>