jquery小例子

今天药忘吃喽~ 2022-03-29 06:30 358阅读 0赞

最近写的jquery；练习小程序，有兴趣的同学可以学习下：

<!doctype html>
    
    <html>
    <head>
      <meta charset="utf-8">
    
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
      <title>wowoxixi</title>
      <meta name="description" content="">
      <meta name="author" content="">
    
    
      <meta name="viewport" content="width=device-width,initial-scale=1">
    
    
      <script src="../js/libs/jquery-1.6.2.min.js"></script>
    </head>
    
    <body>
    	
    	<h3><center>多选框应用</center></h3>
    	
    	<br />
    	<hr />
    	<br />
    	<form>
    		<input type="checkbox" name="items" vaule="1001" />足球<br />
    		<input type="checkbox" name="items" vaule="1002" />篮球<br />
    		<input type="checkbox" name="items" vaule="1003" />排球<br />
    		<input type="checkbox" name="items" vaule="1004" />网球<br />
    		<input type="checkbox" name="items" vaule="1005" />游泳<br />
    		<input type="checkbox" name="items" vaule="1006" />象棋<br />
    
    		<hr />
    		<input type="checkbox" id="quanxuan" vaule="1006" />全选/全不选 
    
    		
    		<br />
    		<input type="button" id="checkAll" value="全选" />
    		<input type="button" id="checkNo" value="全不选" />
    		<input type="button" id="checkRev" value="反选" />
    		
    		<br />
    		<input type="submit" value="提交" />
    	</form>
    	<br /><br />
    	<hr />
    	<input type="text" id="t1" name="username" value="用户名/手机号/邮箱" />
    	
    	
    	
    	<hr />
    	<br />
    	<div>
    	<button class="b1">保存</button>  <br /><br />
    	
    	<p id="p1">段落1</p><br />
    	
    	<p id="p2">段落2</p><br />
    	
    	<p id="p3">段落3</p>
    	
    	</div>
    </body>
    
    </html>
    
    <script language="JavaScript">
    
    /*
    	$("#t1").focus(function(){
    		///获取焦点值
    		var nameval=$(this).val();
    		
    		if(nameval==this.defaultValue){
    			$(this).val("");
    		}
    	});
    	
    	///失去焦点时
    	$("#t1").blur(function(){
    		var nameBlurval=$(this).val();
    		
    		if($.trim(nameBlurval)==""){
    			$(this).val(this.defaultValue);
    		}
    	});
    	
    	*/
    	
    		$("#t1").focus(function(){
    		///获取焦点值
    		var nameval=$(this).val();
    		
    		if(nameval==this.defaultValue){
    			$(this).val("");
    		}
    	}).blur(function(){
    		var nameBlurval=$(this).val();
    		
    		if($.trim(nameBlurval)==""){
    			$(this).val(this.defaultValue);
    		}
    	});
    	
    	
    </script>
    
    
    <script language="JavaScript">
    	$("#checkAll").click(function(){
    		///批量设置
    		//$("input[name=items]").attr("checked","checked");///全部name都一样
    		///全部name不一样，就要遍历，一个一个地设置
    		$("input[name=items]").each(function(index,domEle){
    			$(this).attr("checked","checked");
    		});
    		
    	});
    	
    	
    	$("#checkNo").click(function(){
    		$("input[name=items]").attr("checked",null);
    	});
    	
    	$("#checkRev").click(function(){
    		$("input[name=items]").each(function(index,domEle)
    		$("input[name=items]").each(function(){
    			if(this.checked){
    				$(this).attr("checked",null);
    			}else{
    				$(this).attr("checked","checked");
    			}
    		});
    	});
    	
    	
    	$("#quanxuan").click(function(){
    		if(this.checked){
    			$("input[name=items]").attr("checked","checked");
    		}else{
    			$("input[name=items]").attr("checked",null);
    		}
    	});
    	
    	
    </script>
    
    
    <script language="JavaScript">
    	
    	
       $("button").click(function(){
            alert("nini");
    	  });
    	
    
    
    	//$("button").clone().appendTo("#p1");//没有把按钮事件也追加进来
    	
    	$(".b1").clone(true).appendTo("#p1");//把按钮事件也追加进来
    	
    	
    	//$("#p1").replaceWith($("button"));
    	$("#p1").replaceWith($(".b1"));
    	$("#p2").replaceWith($("<button>xixi</button>"));
    	
    	
        $("<button>xixi你好</button>").replaceAll($("#p3"));
    
    	
    	
    </script>

运行效果：

![Center][]

[Center]: /images/20220329/3aefb10857df430b8cadaa6167dbc034.png