jquery超浓缩入门

最新推荐文章于 2020-09-02 22:22:04 发布

lqshadan2017

最新推荐文章于 2020-09-02 22:22:04 发布

阅读量170

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/lqshadan2017/article/details/54602254

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

所有内容都在下面的页面上了

jqueryStudy1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>jquery超浓缩入门</title> 
<script src="jquery.min.js">
</script>
<style type="text/css">
.red
{
	color:red;
}
.blue
{
	color:blue;
}
.green
{
	color:green;
}
</style>
<script>
$(document).ready(function(){
  //jQuery 选择器
  $("#btnSelector").click(function(){
	  $("p").hide();
	  $("#testh").hide();
	  $(".testc").hide();
  })
  
  //常用的 jQuery 事件方法
  $("#btnEvent").on("click dblclick mouseenter mouseleave mousedown mouseup ",function(event){
	  $("#event_mouse").text(event.type+" event happened!");
  })
  
  $("#btnEvent").on("focus blur",function(event){
	  $("#event_focus").text(event.type+" event happened!");
  })
  
  //jQuery 效果-显示/隐藏
  $("#btnHide").click(function (){
	  
	  if($("#p_hide").is(":hidden")){
		  $("#p_hide").show("slow",function(){
			  $("#btnHide").text("隐藏");
		  });
		  
	  }else{
		  $("#p_hide").hide("fast",function(){
			  $("#btnHide").text("显示");
		  });
		  
	  }
  })
  
   //jQuery 效果-淡入/淡出
  $("#btnFade").click(function(){
	  if($("#p_fade").is(":hidden")){
		  $("#p_fade").fadeIn("slow",function(){
			  $("#btnFade").text("淡出");
		  });
		  
	  }else{
		  $("#p_fade").fadeOut("fast",function(){
			  $("#btnFade").text("淡入");
		  });
		  
	  }
  })
  
  //jQuery 效果-上下滑动
  $("#btnSlide").click(function(){
	  if($("#p_slide").is(":hidden")){
		  $("#p_slide").slideDown("slow",function(){
			  $("#btnSlide").text("向上滑动");
		  });
		  
	  }else{
		  $("#p_slide").slideUp("fast",function(){
			  $("#btnSlide").text("向下滑动");
		  });
		  
	  }
  })
  
  //jQuery 效果-开始/停止动画
  $("#btnAnimate_Start").click(function(){
	  $("#div_animate").animate({left:"500px"},"slow");
  })
  
  $("#btnAnimate_End").click(function(){
	  $("#div_animate").stop();
  }) 
  
  //jQuery 复数效果
  $("#btnmulitiEffort").click(function(){
	  $("#p_mulitiEffort").hide(2000).show(2000).slideUp(2000).slideDown(2000).fadeOut(2000).fadeIn(2000);
  })
  
  //jQuery DOM 操作
  $("#btnText").click(function(){
	  alert($("#p_text").text());
	  $("#p_text").text("变更后的文本");
  })
  
  $("#btnHtml").click(function(){
	  alert($("#p_text").html());
	  $("#p_text").html("变更后的<b>文本</b>");
  })
  
  $("#btnVal").click(function(){
	  alert($("#input_text").val());
	  $("#input_text").val("新的内容");
  })
  
  //添加新的 HTML 内容
  $("#btnAttr").click(function(){
	  alert($("#input_text").attr("name"));
	  $("#input_text").attr({name:"newname"});
	  alert($("#input_text").attr("name"));
  })
  
  $("#btnAddContentA").click(function(){
	  $("#p_one").append("后面的内容");
  })
  
  $("#btnAddContentB").click(function(){
	  $("#p_one").prepend("前面的内容");
  })
  
  $("#btnAddA").click(function(){
	  var objAfter = $("<p id='p_after'></p>").text("后面的元素");
	  $("#p_one").after(objAfter);
  })
  
  $("#btnAddB").click(function(){
	  var objAfter = $("<p id='p_before'></p>").text("前面的元素");
	  $("#p_one").before(objAfter);
  })
  
  //删除元素/内容
  $("#btnDel").click(function(){
	  $("#div_delete").remove();
  })
  
  $("#btnClear").click(function(){
	  $("#div_delete").empty();
  })
  
  //jQuery 操作 CSS
  $("#btnCssAdd").click(function(){
	  $("#p_css").addClass("red");
  })
  
  $("#btnCssRemove").click(function(){
	  $("#p_css").removeClass();
  })
  
  $("#btnCssSet").click(function(){
	  alert($("#p_css").css("color"));
	  $("#p_css").css({color:"green"});
  })
  
  //jQuery 遍历
  $("#btnSearchUp").click(function(){
	  //直接父元素
	  alert("直接父元素 红色");
	  $("#span1").parent().addClass("red");
	  //所有父元素
	  alert("所有父元素蓝色");
	  $("#span1").parent().removeClass();
	  $("#span1").parents().addClass("blue");
	  //到div为止的父元素
	  alert("到div为止的父元素绿色");
	  $("#span1").parents().removeClass();
	  $("#span1").parentsUntil("div").addClass("green");
  })  
  
  $("#btnSearchDown").click(function(){
	  //直接子元素
	  alert("直接子元素 红色");
	  $("#div_parent").children().addClass("red");
	  //指定子元素
	  alert("指定子元素蓝色");
	  $("#div_parent").find("li").addClass("blue");
  })  
 
  $("#btnSearchV").click(function(){
	  //ul3所有同级元素绿色
	  alert("ul3所有同级元素绿色");
	  $("#ul3").siblings().addClass("green");
	  //ul1下一个同级元素红色	  
	  alert("ul1下一个同级元素红色");
	  $("#ul3").siblings().removeClass("green");
	  $("#ul1").next().addClass("red");
	  //ul1后所有同级元素蓝色
	  alert("ul1后所有同级元素蓝色");
	  $("#ul1").next().removeClass("red");
	  $("#ul1").nextAll().addClass("blue");
	  //ul3前一个同级元素绿色
	  alert("ul3前一个同级元素绿色");
	  $("#ul1").nextAll().removeClass("blue");
	  $("#ul3").prev().addClass("green");
	  //ul3前所有元素红色
	  alert("ul3前所有元素红色");
	  $("#ul3").prev().removeClass("green");
	  $("#ul3").prevAll().addClass("red");
  })  
  
  //Ajax
  $("#btnLoad").click(function(){
	  $("#div_load").load("test.html",function(responseTxt,statusTxt,xhr){
		  if(statusTxt=="success"){
			  alert("load success!");
		  }else{
			  alert("error:"+xhr.statusText);
		  }

	  })
  });
  
  $("#btnGet").click(function(){
	  $.get("test.html?name=test&id=001",function(data,status){
		  alert("data:"+data+" status:"+status);
	  })
  });
  
  $("#btnPost").click(function(){
	  $.post("test.html",{name:"test",id:"001"},function(data,status){
		  alert("data:"+data+" status:"+status);
	  })
  });
  
  //Json
  $("#btnJson").click(function(){
	  $.getJSON("jsonp.js",{},function(data){
		 $(data).each(function(){
			 alert(this.username+" "+this.userage);
		 })
	  })
  });
  
});
</script>
</head>

<body>
jQuery 选择器
<div style="width:600px;height:150px;background-color:yellow;">
<p>这是一个p元素</p>
<h id="testh">这个是一个id=testh的h元素</h>
<h2 class="testc">这是一个class=testc的h2元素</h2>
<button id="btnSelector">jQuery 选择器 </button>
</div>
<br>
常用的 jQuery 事件方法
<div style="width:600px;height:150px;background-color:yellow;">
<p id="event_mouse">各种鼠标事件会在此处显示</p>
<p id="event_focus">各种焦点事件会在此处显示</p>
<button id="btnEvent">常用的 jQuery 事件方法 </button>
</div>
<br>
jQuery 效果
<div style="width:600px;background-color:yellow;">
<p id="p_hide">这是一段测试显示/隐藏的文本</p>
<button id="btnHide">隐藏</button>
<p id="p_fade">这是一段测试淡入淡出的文本</p>
<button id="btnFade">淡入</button>
<p id="p_slide">这是一段测试上下滑动的文本</p>
<button id="btnSlide">向上滑动</button>
</div>
<br>
jQuery 方法链接
<div style="width:600px;background-color:yellow;">
<p id="p_mulitiEffort">复数效果</p>
<button id="btnmulitiEffort">复数效果</button>
</div>
<br>
jQuery DOM 操作
<div style="width:600px;background-color:yellow;">
<p id="p_text">测试<b>文本</b></p>
<input id="input_text" value="测试" name="oldname" />
<button id="btnText">显示文本</button>
<button id="btnHtml">显示Html</button>
<button id="btnVal">显示输入框内容</button>
<button id="btnAttr">显示name属性</button>
</div>
<br>
添加新的 HTML 内容
<div style="width:600px;background-color:yellow;">
<p id ="p_one">第一个内容</p>
<button id="btnAddContentA">后面添加内容</button>
<button id="btnAddContentB">前面添加内容</button>
<button id="btnAddA">后面添加元素</button>
<button id="btnAddB">前面添加元素</button>
</div>
<br>
删除元素/内容
<div id="div_delete" style="width:600px;height:50px;background-color:yellow;">
<p>这是要删除或晴空的层</p>
</div>
<button id="btnDel">删除上面的层</button>
<button id="btnClear">清空上面的层</button>
<br>
jQuery 操作 CSS
<div style="width:600px;background-color:yellow;">
<p id="p_css" >这是一段文字</p>
<button id="btnCssAdd">添加css</button>
<button id="btnCssRemove">去除css</button>
<button id="btnCssSet">显示设置css</button>
</div>
<br>
jQuery 遍历
<div id="div_parent" style="width:600px;background-color:yellow;">
	<ul id="ul1">ul1<li id="li1">li1<span id="span1">span1</span></li></ul>

	<ul id="ul2">ul2
		<li id="li21">li21<span id="span21">span2</span></li>
		<li id="li22">li22<span id="span22">span2</span></li>
	</ul>

	<ul id="ul3">ul3<li id="li3">li3<span id="span1">span3</span></li></ul>

</div>
	<button id="btnSearchUp">向上遍历</button>
	<button id="btnSearchDown">向下遍历</button>
	<button id="btnSearchV">横向遍历</button>
<br>
jQuery Ajax
<div id="div_load" style="width:600px;background-color:yellow;">
</div>
<button id="btnLoad">Load</button>
<button id="btnGet">Get</button>
<button id="btnPost">Post</button>
<br>
jQuery JSONP
<div id="div_json" style="width:600px;background-color:yellow;">
</div>
<button id="btnJson">Json</button>
<br>


jQuery 效果-动画
<button id="btnAnimate_Start">开始动画</button>
<button id="btnAnimate_End">停止动画</button>
<div id="div_animate" style="width:200px;height:150px;background-color:yellow;position:absolute;">
</div>



</body>
</html>

test.html

<h1>针对这个问题啊</h1>

jsonp.js

[{"username":"liuqiang","userage":"15"},{"username":"jinmin","userage":"18"}]

lqshadan2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录