JQuery基础操作汇总Q

最新推荐文章于 2024-10-19 19:48:37 发布

A.L.P.K.

最新推荐文章于 2024-10-19 19:48:37 发布

阅读量171

点赞数

文章标签： jquery html5

本文链接：https://blog.csdn.net/m0_54938705/article/details/115699035

版权

jQuery基础操作汇总

这篇文章是我在看完《锋利的jQuery》一书后，对其中大部分基础操作进行测试的结果

主要包含了jQuery的选择器操作，事件冒泡，相关目标，动态绑定，触发器，动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div, p{
	width:140px;
	height:140px;
	margin: 5px;
	background: #bbb;
	border: #009 1px solid;
	float: left;
	font-size: 17px;
}	
div.mini{
	width:55px;
	height:55px;
	margin: 1px;
	background: #bbb;
	border: #009 1px solid;
	font-size: 12px;
}
div.hide{
	display:none;
}
.classOne.hover, .classTwo.hover, .mini.hover{
	background:rgb(0, 0, 64)e33;
}
select{
	height:100px;
	width:70px;
}
ul{
	height:100px;
}
.tooltip{
	width:55px;
	height:55px;
	background:#ff7;
	float:none;
}
div input[type=text]{
	width:100px;
	background:#7ff;
}
.ghost{
	opacity:0;
}
</style>



</head>
<body>
<p class="demo">demo</p>
<div class="classOne" id="one">c1-#1</div>
<div class="classOne" id="two">c1-#2</div>
<div class="classTwo">c2-</div>
<div class="hide" id="hideone">ch-#1</div>
<div class="classOne" id="three">
	<div class="mini">mini</div>
	<div class="mini">mini</div>
	<div class="mini" tiNO="200">mini</div>
	<div class="mini">mini</div>
</div>
<div class="classTwo">
	<div class="mini">mini</div>
	<div class="mini">mini</div>
	<div class="mini">mini</div>		
	<div class="mini" tiNO="100">mini</div>
</div>
<div>
	<form action="#">
	<input type="checkbox" value="box1"/>box1
	<input type="checkbox" />box2
	<select name="sel" multiple="multiple" style="height:100px; float:right">
		<option selected="selected">1</option>
		<option >2</option>
		<option >3</option>
		<option >5</option>
	</select>
</form>
<select name="sel" multiple="multiple" style="height:100px; float:right">
		<option selected="selected">1</option>
		<option >2</option>
		<option >3</option>
		<option >5</option>
</select>
</div>

<p class="mix" sign="test">parent
	<a sign="test">son</a>
	<a sign="test">son</a>
</p>
<div>
	<input type="text" id="newElemName" value="insert">saf
	<input type="button" id="newTrigger" value="new">
	<select id="newList" multiple="multiple"></select>
</div>
<div>
	<ul class="origin">
		<li>aaa</li>
		<li>bbb</li>
	</ul>
</div>
<div>
	<ul class="copy"></ul>
</div>
<div>
	<a title="my a" href="#">my a</a>
</div>
<div title="original title for tooltip" id="testBox">
	show title/box;
</div>
<div>
	<div class="mini" id="hide">click</div>
</div>
<div id="bubbleParent">
	<div class="mini" id="bubbleSon">son</div>
	parent
</div>
<div class="stopDefault">
	<form action="http://null.html">
		<input type="text">
		<input type="button">
	</form>
	<a href="http://www.baidu.com">BAIDU</a>
</div>
<div class="related">
	<div class="mini">mini1</div>
	<div class="mini">mini2</div>
	<div class="mini">mini3</div>		
	<div class="mini">mini4</div>
	big
</div>
<div class="which" style="color:red">CLICK UNBIND ALL</div>
<div class="one">ONE</div>
<div class="trigger">ONE + DEMO TRIGGER</div>
<div class="custom">CUSTOM</div>
<div class="customEvent">custom event</div>
<div class="toggle">toggle</div>
<div class="fade">fade</div>
<div class="animate">animate</div>
<div class="ghost"></div>
<div class="scroll">scroll<input type="button" value="up"><input type="button" value="down">
	<textarea style="height:110px; width:100px">
sdlakfj
asdfzc
adsfaew
zcxvaew
dsvas
aef
asdaf
asdfeag
sadcx
zcv
asd
ads
fzcx
vawe
fasdv
xzcvaef
	</textarea> 
</div>
<div class="each">
alert all the "p" on this page
	<p>p1</p>
	<p>p2</p>
	<p>p3</p>
	<p>p4</p>
</div>
<div>
<!-- ? -->
	<a href="http://baidu.com">baidu</a>
	<a href="http://baidu.com" rel="external">external</a>
</div>


<script type="text/javascript" src="jquery-3.6.0.js"></script>
<script type="text/javascript">
//----------------global-------------
	var a = 1;
	$("div:not(.mini)").focus(function(){
		$(this).css("border","2px solid #7ff");
		$(this).css("margin","4px");
	}).blur(function(){
		$(this).css("border","1px solid #009");
		$(this).css("margin","5px");
	})//在内置浏览器中正确，在其他浏览器中无法生效
	$("body").css("background","brown");
	$("p").click(function(){
		alert("jquery demo");
	})
	$("div:contains(mo)").css("color","yellow");
	$("div:has(div) :nth-child(1)").css("background","#ff77ff");
	
	//-----------------------deprecated-----------------------------
// 	$("document").ready(function(){
// 		$("document").bind("contextmenu",function(e){return false;});
// 	});
	
//----------------------------------------
	
	// 选择器测试
	$("#hide").bind("mouseover",function(){
		$(this).css("border","0px");
		$(this).text("");
	}).bind("mouseout",function(){
		$(this).css("border", "#009 1px solid");
		$(this).text("hide");
	});
	$("div.classTwo, p.demo").css("background","blue");
	$("div > div").css("background","red");
	$("div > div").css("color","white");
	$(".hide").nextAll(".classOne").css("background","purple");
	$(".mini:eq(5)").css("background","black");
	//$("div:has(div)").css("background","cyan");
	$("div:hidden").show(100);
	$("div[tiNO]").css("background","#1f1e33");
	$("div[tiNO^=20]").css("background","#1f1e3f");
	$("form select :selected").text("new!");
	$("form select option:even").css("background","#77ffff");
	$("form select option:odd").css("background","#ffff11");
	
	$("p[sign=test]").css("color","red");
	$("p [sign=test]").css("color","blue");
	
	$("#newElemName").css("width","100px");
	$("#newTrigger").click(function(){
		var $word = $("#newElemName").val();
		$("#newList").append("<option>"+$word+"</option>");
	});
	$(".origin li").click(function(){
		if($(".copy li").length<5){
			var $word=$(this).text();
			$(".copy").append($(this).clone(true));
		}
	});
	var $color;
	$("div[class=classOne] [class=mini], div[class=classTwo] [class=mini]").hover(function(){
		$(this).css("background","#f7f");
	},
	function(){
		$(this).css("background","");
	});
	
	$("#testBox").mouseover(function(e){
		//show
		var $title = $(this).attr("title")?$(this).attr("title"):"";
// 		alert($title);
		var $tooltip = "<div class='tooltip'>"+$title+"</div>";
// 		alert($tooltip);
		$("body").append($tooltip);
		$(this).attr("title","");
		
		//alert(e.pageX);
		$(".tooltip").css("position","absolute");
		$(".tooltip").css("top",(e.pageY+20)+"px");
		$(".tooltip").css("left",(e.pageX+10)+"px");
	}).mouseout(function(){
		//del
		$(this).attr("title",$(".tooltip").text());
		$(".tooltip").remove();
	}).mousemove(function(e){
		//move
		$(".tooltip").css("top",(e.pageY+7)+"px");
		$(".tooltip").css("left",(e.pageX+7)+"px");
	});
	
	//stop bubble react
	$("#bubbleParent").click(function(e){
		alert("parent");
		
	});
	$("#bubbleSon").click(function(e){
		alert("son");
		e.stopPropagation();
	});
	
	//stop default action
	$(".stopDefault form input[type=button]").click(function(e){
		var $line = $(".stopDefault form input[type=text]").val();
		if($line==""){
			alert("input is null");
			e.preventDefault();
		}
		else{
			alert("inupt not null");
		}
	});
	$(".stopDefault a").click(function(e){
		alert("disabled");
		return false;
	});
	
	//related target
	$(".related div[class=mini]").css("margin","0px");
	$(".related div[class=mini]").mouseout(function(e){
		//alert($(e.target).text()+1);
		//alert($(e.relatedTarget).text()+2);
		$(e.target).css("background","black");
		if($(e.relatedTarget).attr("class")==("mini")||$(e.relatedTarget).is("div")){
			$(e.relatedTarget).css("background","#1f1e33");
		}
		return false;
	});
		
// 	//event.which-------------------deprecated------------------------
// 	$(".which").click(function(e){
// 		if(e.which==1)alert("left");
// 		if(e.which==2)alert("middle");
// 		if(e.which==3){
// 			alert("right");
// 			return false;
// 		}
// 	});

	//unbind
	$(".which").click(function(e){
		$("*").unbind();
	});
	
	//one
	$(".one").one("click",function(){
		alert("only once function");
	});
	
	//trigger
	$(".trigger").click(function(){
		$(".one").trigger("click");
		$(".demo").click();
	});
	
	//dynamic+custom
	$(".custom").bind("click",function(){
		if($(".custom div").length<4){
			var $new = "<div class='mini' id='customized'>added:click me</div>";
			$(this).append($new);
		}
		else{
			$(this).children().remove();
		}
	});
	$(".custom").delegate("div","click",function(){
		//alert("dynamic delegate");
		$(this).css("background","grey");
		return false;
	});
	
	//customEvent
	$(".customEvent").bind("cus",function(e,m1,m2){
		$(this).text(e+m1+m2);
	});
	$(".customEvent").click(function(){
		$(this).trigger("cus",["word1 ", "word2-"]);
	});//no default: triggerHandler
	
// 	//toggle -------------------deprecated------------------
// 	$(".toggle input").toggle(function(){
// 		$(this).css("background","red");
// 	},function(){
// 		$(this).css("background","green");
// 	});
	$(".toggle").click(function(){
		if(a==1){
			a=0;
			$(this).css("background","red");
		}
		else {
			a=1;
			$(this).css("background","green");
		}
		$(this).text(a);
	});
	//fade
	$(".fade").click(function(){
		if(a==1){
			a=0;
			$(this).fadeTo(600,0.2);
		}
		else {
			a=1;
			$(this).fadeTo(600,1.0);
		}
	});
	//animate
	var x = $(".ghost").position().left;
	var y = $(".ghost").position().top;
	//x -= 304;
	//如果不是eclipse自带浏览器，加入上面那句话来矫正错位
	$(".animate").css("position","absolute");
	$(".animate").css("top",y);
	$(".animate").css("left",x);
	$(".animate").text("animate: click");
	$(".ghost").click(function(){
		if(a==1){
			a=0;
			//在内置浏览器里正确，在其他浏览器里会有一个偏移
			$(".animate").animate({},600,function(){
				$(".animate").animate({top:y+10, height:140},600)
				.delay(600).animate({left:x+10, height:140},600)
				.delay(600).animate({top:y, height:140},600)
				.delay(600).animate({left:x, height:140},600)
				.delay(600).animate({top:y+40, height:60},600);
			});
			setTimeout('$(".animate").text("click again");',3000);
			
		}
		else {
			a=1;
			$(".animate").animate({height:140, top:y},600);
			$(".animate").text("animate: click");
		}
	});
	
	//scroll
	$(".scroll input").click(function(){
		if(!$(".scroll textarea").is(":animated")){
			if($(this).attr("value")=="up"){
				$(".scroll textarea").animate({scrollTop : "-=50"}, 500);
			}else{
				$(".scroll textarea").animate({scrollTop : "+=50"}, 500);
			}
		}
	});
	
	//each
	$(".each p").hide();
	$(".each").click(function(){
		$("p").each(function(){
			alert($(this).text());
		});
	});
	
</script>
</body>
</html>