js知识点

最新推荐文章于 2025-05-20 08:12:16 发布

一只理智的龙

最新推荐文章于 2025-05-20 08:12:16 发布

阅读量55

点赞数

文章标签： javascript servlet java

本文链接：https://blog.youkuaiyun.com/m0_64923277/article/details/127097286

版权

1.获取地址数组案例

<body>
	        <tr>
				<td>家庭住址：</td>
				<td>
					<select name="province" id="province" onchange="changeOpt()">
						<option value="请选择省份">--请选择省份--</option>
						<option value="河南省">--河南省--</option>
						<option value="四川省">--四川省--</option>
						<select>
							<select name="cities" id="cities">
								<option value="请选择城市">--请选择城市--</option>
								<select>
				</td>
				<td>
		
				</td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<input type="button" id="btn" value="提交" />
				</td>
			</tr>
		</table>
		<div id="result">
		
		</div>
		<script>
				//下拉列表
		       function changeOpt(){
				   var cityList=new Array()
				   cityList['请选择省份']=['--请选择城市--'];
				   cityList['河南省']=['郑州','开封','洛阳','商丘','焦作']
				   cityList['四川省']=['成都','锦阳','德阳','自贡','泸州']
				   //获取选中的下拉框的省份
				   var province=document.getElementById("province").value
				   //将下拉框表项清空
				   document.getElementById("cities").options.length=0
				   for(var i=0;i<cityList[province].length;i++){
					   var opt=new Option(cityList[province][i],cityList[province][i])
					   document.getElementById("cities").options.add(opt)
				   }
			   }
		</script>
		
			
		
	</body>

2.全选案例

<p>
			<input type="checkbox" id="selectAll">全选/全不选
			<hr>
			<ul class="shop">
				<li><input type="checkbox">苹果</li>
				<li><input type="checkbox">梨</li>
				<li><input type="checkbox">香蕉</li>
				<li><input type="checkbox">葡萄</li>
				<li><input type="checkbox">榴莲</li>
			</ul>
			<script>
				//获取水果列表
				var cbs=document.querySelectorAll(".shop input")
				document.getElementById("selectAll").onclick=function(){
					//获取当前复选框的状态
					var ischecked=this.checked
					for(var i=0;i<cbs.length;i++){
						cbs[i].checked=ischecked
					}
				}
				//给水果列表中的每一个复选框绑定一个单击事件
				for(var i=0;i<cbs.length;i++){
					cbs[i].onclick=function(){
						var count=0 //用来存储被选中的水果的个数0
				for(var j=0;j<cbs.length;j++){
					if(cbs[j].checked){
						count++
					}
				}
				if(count==cbs.length){
					document.getElementById("selectAll").checked=true
				}else{
					document.getElementById("selectAll").checked=false
				}
			}
		}
			</script>
		</p>

3.反选

<style type="text/css">
			ul{list-style: noner;}
		</style>
<p>
			<input type="checkbox" id="selectAll">全选/全不选
			<input type="checkbox" id="fanselect">反选
			<hr>
			<ul class="shop">
				<li><input type="checkbox">苹果</li>
				<li><input type="checkbox">梨</li>
				<li><input type="checkbox">香蕉</li>
				<li><input type="checkbox">葡萄</li>
				<li><input type="checkbox">榴莲</li>
			</ul>
			<script>
//获取水果列表
				var cbs=document.querySelectorAll(".shop input")

document.getElementById("fanselect").onclick=function(){
				   for(var i=0;i<cbs.length;i++){
					   if(cbs[i].checked){
						   cbs[i].checked=false
					   }else{
						   cbs[i].checked=true
					   }
				   }
				   
					
			   }
			</script>

4.鼠标移动效果案例

<div class="list">
					<img src="img/1.jpg" alt="" width="200px" >
					<img src="img/2.jpg" alt="" width="200px" >
					<img src="img/3.jpg" alt="" width="200px" >
					<img src="img/4.jpg" alt="" width="200px" >
				</div>
				<div id="div" style="background-image: url(img/1.jpg);width: 800px
				;height: 400px;background-repeat: no-repeat;">
					
				</div>
				<script type="text/javascript">
					var imgs=document.querySelectorAll("img")
					for(var i=0;i<imgs.length;i++){
						imgs[i].onmouseover=function(){
							document.getElementById("div").style.backgroundImage="url("+this.src+")"
						}
					}
				</script>