zoukankan      html  css  js  c++  java
  • jquery小例子



    最近写的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>
    


    运行效果:



  • 相关阅读:
    4种xml解析器区别
    eclipse的快捷键(常用)
    eclipse修改项目访问前缀
    oracle创建用户
    导入安全证书到jdk
    laravel 命令行输出进度条
    sql 事务的四种隔离级别
    supervisor 通过图形界面管理
    supervisor "INFO spawnerr: unknown error making dispatchers for xxx" 错误
    linux expect 的使用
  • 原文地址:https://www.cnblogs.com/james1207/p/3322816.html
Copyright © 2011-2022 走看看