第十周学习——jQuery学习

最新推荐文章于 2024-07-14 12:56:18 发布

啦啦啦啦落

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量71

点赞数

分类专栏：笔记文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_54826115/article/details/116722136

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery学习

1.jQuery简介
jquery是一个快速、简洁的JavaScript框架，可以简化JavaScript编程。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".xs").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p class="xs">如果你点我，我就会消失。</p>
<p class="xs">点我!点我！点我！</p>
<p>点我!我不会消失。</p>
<p>我不消失。</p>
<p class="xs">我会消失。</p>
</body>
</html>

运行上述代码，当点击“如果你点我，我就会消失。”，“点我!点我！点我！”和”我会消失。"时，段落会消失，而当点击“点我!我不会消失。”和“我不消失”时，段落不会消失。
2.隐藏和显示
我们可以使用hide()方法来隐藏内容，使用 show() 来显示内容。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
   $("#hide").click(function(){
     $("#1").hide();
   });
   $("#show").click(function(){
     $("#1").show();
   });
   $("h1").click(function(){
     $("p").hide();
   });
 });
  
 </script>
 </head>
 <body>
<h1>隐藏全部文字</h1>
 <p id="1">这是一些文字</p>
 <button id="hide">隐藏这些文字</button>
 <button id="show">显示这些文字</button>
 <p id="2">这又是一些文字</p>
 <p id="3">这还是一些文字</p>
 
 </body>
 </html>

当运行上述代码块时，点击标题“隐藏全部文字”时，所有段落都显示。而当点击“隐藏这些文字”按钮时，“这是一些文字”会消失。而又当点击“显示这些文字”按钮时，“这是一些文字”会重新出现。
3.课堂作业
使用ajax来做一段查询天气的代码
作业完成的代码如下：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title></title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   		});  
		$(document).ready(function(){
			$("button").click(function(){
		var city=$("#city").val();
		$.ajax({
			type:"GET",
			url:"http://wthrcdn.etouch.cn/weather_mini?city=北京",
			dataType:"json",
			success:function(result){
		    addBox(result.data.forecast);
			}
		});
		/*-----------------------------------end--------------------------------*/		
		});
		});		
			
				
		function addBox(json_data) {
			
				$.each(json_data, function(index, obj) {
					
					$("#box").append("<div'>" +
						
							"<p>" + obj['date'] + "</p>" +
							
							
							"<p>" + obj['high'] + "</p>" +
							
							"<p>" + obj['fengli'] + "</p>" +
							
							"<p>" + obj['low'] + "</p>" +
							
							"<p>" + obj['fengxiang'] + "</p>" +
							
							"<p>" + obj['type'] + "</p>" +
							
							"</div>");
				});							
		}
    </script>
	
</head>
<body>
	<div>
		<h3>请输入城市：</h3>
		城市：<input type="text" id="city"/>
		<br>
		<button type="button">提交</button>
	</div>
	
	<br>
	
	<div id="box"></div>	
	
</body>
</html>

啦啦啦啦落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十周学习——jQuery学习

jQuery学习1.jQuery简介jquery是一个快速、简洁的JavaScript框架，可以简化JavaScript编程。<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"
复制链接

扫一扫