jquery小例子（三）

最新推荐文章于 2020-03-08 19:09:15 发布

最新推荐文章于 2020-03-08 19:09:15 发布 · 109 阅读

文章标签：

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

运行效果：