1. Toy模板网首页
  2. > Toy博客

Educoder/头歌JAVA——jQuery基础

10月前 作者：陆小玖 分类：Toy博客 阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了Educoder/头歌JAVA——jQuery基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

第1关：jQuery入门

相关知识

环境安装

第一个程序

id选择器

 第2关：jQuery基本选择器

相关知识

类选择器

元素选择器

编程要求

 第3关：过滤选择器 （一）

相关知识

设置css属性

编程要求

第4关：过滤选择器 （二）

相关知识

:not 选择器

编程要求

 第5关：tab选项卡

相关知识

层次选择器

show()和hide()

类的添加和删除

编程要求

第1关：jQuery入门

相关知识

环境安装

安装环境是使用jQuery的第一步，若需要在本地运行jQuery，可以查看背景知识来安装jQuery库。

第一个程序

在<div id="box"></div>里填充内容hello,jquery。实现的效果如下：

Educoder/头歌JAVA——jQuery基础                Educoder/头歌JAVA——jQuery基础

这里用javascript先实现一下：

  1. var box = document.getElementById("box");
  2. box.innerHTML = "hello,jquery";

用jQuery实现会更简单，下面每一步都和上面的相对应，实现如下：

  1. var box = $("#box");
  2. box.html("hello,jquery");

从上面可以看出：

  • $("#box")是获取到id="box"的div；

  • html()方法是获取元素的内容（包括HTML标记）， ()里面没有内容表示获取，有内容表示赋值。

基本语法： $(selector).action()

说明:

  • jQuery用美元符号 $ 定义；

id选择器

对于上面 id="box1"的 div，如何获取它的内容呢？ 用jquery实现如下：

  • selector表示要操作的dom元素；

  • action表示要执行的操作。

  • Educoder/头歌JAVA——jQuery基础

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="content"></div>

    <script>
        //------------begin---------
        
        var box = $("#content");
        box.html("这是我的第一个jquery程序");
        
        //-----------end------------
    </script>
 <style>
          #content{
            width: 300px;
			height: 60px;
			text-align: center;
			line-height: 60px;
			margin: 30px auto;
			font-size: 20px;
			border: 2px solid #000;          
        }
    </style>
</body>
</html>

     第2关：jQuery基本选择器

  • 相关知识

    为了完成本关任务，你需要掌握：1.id选择器，2.类选择器， 3.元素选择器。

  • <div id="box1">我是id选择器</div>
  • <p class="box2"></p>
  • <span></span>
  • var box1 = $("#box1");
  • box1.html();

 Educoder/头歌JAVA——jQuery基础

从上面可以看出：

id选择器语法： $("# + idName")

这里再提醒一下：

html()： ()里有内容，表示往该元素添加内容，没有内容，表示获取内容。

类选择器

对于上面 class="box2"的 p，如何填充内容 我是类选择器呢？ 用jQuery 实现如下：

  1. var box2 = $(".box2");
  2. box2.html("我是类选择器");

效果如下：

Educoder/头歌JAVA——jQuery基础         Educoder/头歌JAVA——jQuery基础

从上面可以看出：

类选择器语法： $(". + className")

元素选择器

对于上面 <span></span>，如何填充内容 我是元素选择器呢？ 用jQuery实现如下：

  1. var box3 = $("span");
  2. box3.html("我是元素选择器");

 Educoder/头歌JAVA——jQuery基础          Educoder/头歌JAVA——jQuery基础

编程要求

jQuery 已经引入，在右侧编辑器补充begin至end间的代码，实现点击按钮，添加相应内容的功能。要求如下：

  • 用id选择器，获取id="box"的div，添加内容为我是id选择器添加的内容；

  • 用类选择器，获取class="box"的div，添加内容为我是类选择器添加的内容；

  • 用元素选择器，获取 p 标签，添加内容为我是元素选择器添加的内容。

提示：

  • $(this)指的是当前操作的DOM元素。

注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。

 Educoder/头歌JAVA——jQuery基础

    <!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ul class="container">
    	<li class="item">
    		<button>id</button>
    		<div id="box"></div>
    	</li>
    	<li class="item">
    		<button>类</button>
    		<div class="box"></div>
    	</li>
    	<li class="item">
    		<button>元素</button>
    		<p></p>
    	</li>
    </ul>
    <script>
    
    $(function(){
    	
    	$("button").click(function(){
    		//inner是当前点击的button元素的内容
    		var inner = $(this).html();
    		if(inner == "id"){
    			//----------begin----------

    			var box1 = $("#box1");
                box1.html("我是id选择器添加的内容");
    			//----------end------------
    		}
    		if(inner == "类"){
    			//----------begin----------

    			var box2 = $(".box2");
                box2.html("我是类选择器添加的内容");
    			
    			//----------end------------
    		}
    		if(inner == "元素"){
    			//----------begin----------

    			var box3 = $("p");
                box3.html("我是元素选择器添加的内容");

    			//----------end------------
    		}
    	})
    })

    </script>  
    <style>
    	ul,li{
    		list-style-type: none;
    	}
    	.container{
    		width: 400px;
    		margin: 40px auto;
    	}
    	.container .item{
    		height: 60px;
    		line-height: 60px;
    		margin: 0 20px 20px 0;
    		overflow: hidden;
    	}
    	.container .item button{
    		float:left;
    		width: 60px;
    		line-height: 40px;
    		text-align: center;
    		font-size: 18px;
    		margin-right: 20px;
    	}
    	.container .item div{
    		width: 240px;
    		height: 40px;
    		line-height: 40px;
    		border: 2px solid #ccc;
    		text-align: center;
    		float: left;
    	}
    	.container .item p{
    		width: 240px;
    		height: 40px;
    		line-height: 40px;
    		border: 2px solid #ccc;
    		text-align: center;
    		margin-top: 0px;
    		float: left;
    	}
    </style>
</body>
</html>

 第3关：过滤选择器 （一）

相关知识

为了完成本关任务，你需要掌握：1.设置css属性，2.基础的过滤选择器。

设置css属性

设置单个属性

  1. <div id="single">设置单个属性</div>

如果给上面的div标签添加css属性：background：orange; ，应该怎么实现呢？

对于div标签，用jQuery可以这样写：

$("#single").css("background","orange");

效果如下：

Educoder/头歌JAVA——jQuery基础

这是设置单个属性常用的方法。语法总结如下：

$(selector).css(attr,value);

设置多个属性

  1. <p class="more">设置多个属性</p>

如果给上面的p标签添加css属性：

  1. "background":"#ccc";
  2. "text-align":"center";
  3. "line-height":"40px";

应该怎么办呢？

对于p标签，用上面的方法一条一条的写，也是可以的，但是比较麻烦，下面是设置多个css属性的方法：

  1. $(".more").css({
  2. "background":"#ccc",
  3. "text-align":"center",
  4. "line-height":"40px"
  5. })

效果如下：

Educoder/头歌JAVA——jQuery基础

可以看出，设置多个css属性是用对象的方式来实现的。语法总结如下:

  1. $(selector).css({
  2. attr1: value1,
  3. attr2: value2,
  4. ...
  5. })

过滤选择器(重点)

  1. <ul>
  2. <li>第一个li</li>
  3. <li>第二个li</li>
  4. <li>第三个li</li>
  5. <li>第四个li</li>
  6. <li>第五个li</li>
  7. <li>第六个li</li>
  8. </ul>

基础效果图如下：

Educoder/头歌JAVA——jQuery基础

现在分别获取获取指定的li元素，并添加相应的背景色。

利用过滤选择器选择指定的li元素：

  • 获取第一个li标签，添加背景色orange, 代码如下： 获取第一个li标签：$("li:first") 添加背景色： $("li:first").css("background","orange")；

  • 获取最后一个li标签，添加背景色green, 代码如下： 获取最后一个li标签：$("li:last") 添加背景色： $("li:last").css("background","green")； 效果图如下：

  • Educoder/头歌JAVA——jQuery基础

    获取下标为偶数的li标签，添加背景色#ccc, 代码如下： 获取下标为偶数的li标签：$("li:even") 添加背景色： $("li:even").css("background","#eee")；

  • 获取下标为奇数的li标签，添加背景色#ccc, 代码如下： 获取下标为奇数的li标签：$("li:odd") 添加背景色： $("li:odd").css("background","#ccc")。 效果图如下：

  • Educoder/头歌JAVA——jQuery基础

注：下标是从0开始的，li标签第一个下标是0，是偶数，所以背景色是"#eee"。

编程要求

jQuery 已经引入，在右侧编辑器补充begin至end间的代码，实现一个色彩分明的表格。要求如下：

  • 用过滤选择器获取要操作的DOM元素；

  • 设置表头颜色为 yellowgreen；

  • 设置奇数行颜色为 lightyellow；

  • 设置偶数行颜色为 lavenderblush；

  • 提供的代码不允许修改，只允许填充begin至end中间的代码。

提示：

  • 要先设置奇数行和偶数行的颜色，最后设置表头的颜色，否则会被覆盖的；

  • 这里css的背景色用 background, 不用 background-color。

注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。

效果图如下：

Educoder/头歌JAVA——jQuery基础

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
   <table border="1" cellspacing="0"  cellpadding="10" align="center">
  <!--<caption>Monthly savings</caption>-->
  <tr id="tb-head">
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td>北京</td>
  </tr>
  <tr>
     <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td>洛杉矶</td>
  </tr>
  <tr>
     <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td>上海</td>
  </tr>
  <tr>
     <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td>河南</td>
  </tr>
</table>
    <script>
    //-----------begin-----------

    $("tr:even").css("background","lavenderblush")//偶数
    $("tr:odd").css("background","lightyellow")//奇数
    $("tr:first").css("background","yellowgreen")//第0行（表头）
      
    //------------end------------  
    </script>
    
</body>
</html>

第4关：过滤选择器 （二）

相关知识

为了完成本关任务，你需要掌握：1.:eq选择器，2.:not选择器。

获取指定序号的元素

基本的HTML结构如下：

  1. <ul>
  2. <li>第一个li</li>
  3. <li>第二个li</li>
  4. <li>第三个li</li>
  5. </ul>

效果图如下：

Educoder/头歌JAVA——jQuery基础

如何获取上面的第二个li标签，并设置背景色为红色呢？

先用过滤选择器实现，这里用到的是 :eq 选择器，添加如下代码：

$("li:eq(1)").css("background","red")

效果图如下：

Educoder/头歌JAVA——jQuery基础

为什么这里是eq(1)呢？ 因为 eq 选择器的下标是从0开始的。

另一种方法：eq()

eq()也是获取指定序号的元素的，使用方法如下：

$("li").eq(1).css("background","red")

和上面的效果是一样的，这里 eq()的下标也是从0开始的。

:not 选择器

这里要实现的效果图如下：

Educoder/头歌JAVA——jQuery基础

下面是基本的`HTML`结构：

  1. <ul class="box">
  2. <li>第一个li</li>
  3. <li>第二个li</li>
  4. <li>第三个li</li>
  5. <li>第四个li右边没有外边距</li>
  6. </ul>

 效果图如下：

Educoder/头歌JAVA——jQuery基础

这里第四个li标签的右侧没有外边距，该怎么实现呢？

这里用：not选择器，它选取除了指定元素以外的所有元素，代码如下：

$("li:not(:last)").css("margin-right","20px")

效果图如下：

Educoder/头歌JAVA——jQuery基础

编程要求

jQuery 已经引入，在右侧编辑器补充begin至end间的代码，实现下面的效果。要求如下：

  • 用选择器实现下面的效果，相应的方法可以在平台上自行调试；

  • 选取第三行，填充背景色为"#eee"；

  • 除了最后一行，其他都要底边边框，边框样式为：1px dashed #ccc。

注：

  • 这里用类来获取li元素，不用li标签；

  • 背景色用 background， 不用 background-color；

  • 提供的代码不允许修改，只允许填充begin至end中间的代码。

注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。

效果图如下：

Educoder/头歌JAVA——jQuery基础

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ul class="container">
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>
    	<li class="item">
    		点赞！中国自主卫星电话正式放号，从此告别“不在服务
    	</li>	
    	
    </ul>
    <script>
    
    $(function(){
    	 
        //-------------  begin  -------------

        //$("li").eq(2).css("background","#eee");
    	//$("li:not(:last)").css("border-bottom","1px dashed #ccc");
    	$(".item:eq(2)").css("background","#eee");
     $(".item:not(:last)").css("border-bottom","1px dashed #ccc");
    	
    	//------------  end  ---------------
    })

    </script>  
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    	.container{
    		width: 400px;
    		margin: 40px auto;
    		border: 2px solid #ccc;
    		padding: 0 20px;
    	}
    	.container .item{
    		height: 40px;
    		line-height: 40px;
    		padding: 0;
    		overflow: hidden;
    		
    	}
    	.container .item span{
    		width: 30px;
    		height: 40px;
    		line-height: 40px;
    		padding: 0;
    		overflow: hidden;
    		
    	}
    	/*.container .item:not(:last-child){
    		border-bottom: 1px dashed #ccc;
    	}*/
    
    </style>
</body>
</html>

 第5关：tab选项卡

相关知识

为了完成本关任务，你需要掌握：1.层次选择器，2.方法show和hide， 3.操作css类的方法。

层次选择器

  1. <div class="container">
  2. <p>
  3. <span>第一个p标签下的span</span>
  4. <span>第一个p标签下的第二个span</span>
  5. </p>
  6. <p>
  7. <i>i标签</i>
  8. <span>第二个p标签下的span</span>
  9. </p>
  10. </div>

如何获取到上面第一个p标签下所有的span标签？ 这里主要用层次选择器获取一下：

  • 第一步：获取到类container：$(".container")；

  • 第二步：获取到container下第一个p标签：$(".container p:first")；

  • 第三步：获取到第一个p标签下所有的span标签：$(".container p:first span")。

从上面可以看出来，层次选择器和Dom结构是相匹配的，

show()和hide()

  1. <p class="toggle">错误提醒</p>
  2. <p>展示的内容</p>

对于类toggle，有错误时需要出现，解决了错误需要隐藏。这个功能怎么实现呢？这里用show()和hide()：

  • 出现：$(".toggle").show()
  • 隐藏：$(".toggle").hide()

show()的原理相当于css中的 display:block; hide()的原理相当于css中的 display:none;

类的添加和删除

  1. <div id="box"></div>
  3. .active{ background: orange;}
  4. .btn{}

给上面的div添加类active和btn，该如何实现呢？这里用addClass()方法： $("#box").addClass("active btn");

现在要删除一个类btn，这里用removeClass()方法： $("#box").removeClass("btn");

编程要求

jQuery 已经引入，在右侧编辑器补充begin至end间的代码，实现tab切换的功能。要求如下：

  • 当点击上面的tab选项卡时，下面会显示对应的内容，添加的类为active；

  • tab切换静态页面已经写好，初始化已经完成，只需完成切换的功能；

  • 注： 提供的代码不允许修改，只允许填充begin至end中间的代码。

注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。

效果图如下：

Educoder/头歌JAVA——jQuery基础文章来源地址https://www.toymoban.com/news/detail-469354.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="container">
    	<ul class="head">
    		<li>全部实训</li>
    		<li>实训路径</li>
    		<li>在线课堂</li>
    		<li>讨论区</li>
    	</ul>
    	<div class="content">
    		<div>我是全部实训的内容</div>
    		<div>我是实训路径的内容</div>
    		<div>我是在线课堂的内容</div>
    		<div>我是讨论区的内容</div>
    	</div>
    </div>    
    <script>
    
    $(function(){
    	 //tab的初始化
    	$(".head li").removeClass('active').eq(0).addClass('active');
    	$(".content div").hide().eq(0).show();    	
    	$(".head li").on('click', function(){
            // index是点击的li的索引
    		var index = $(this).index();            
    		//-----------begin-----------
            $(".head li").removeClass("active").eq(index).addClass("active");
            $(".content div").hide().eq(index).show(); 
            //------------end------------  
    	})   	
    })
    
    </script>
    
    <style>
    	.container{
    		width: 500px;
    		margin: 40px auto;
    	}
    	ul,li{
    	  list-style-type: none;
    	}
    	.container ul{
    		overflow: hidden;
    		background: #000;
    		color: #fff;
    	}
    	.container li{
    		width: 100px;
    		float: left;
    		text-align: center;
    		line-height: 60px;
    		font-size: 18px;
    		cursor: pointer;
    	}
    	.container li.active{
    		color: orange;
    	}    	
    	.container .content{
    		width: 460px;
    		height: 200px;
    		padding: 20px;
    		background: #ccc;
    		font-size: 18px;
    	}
    </style>
</body>
</html>

到了这里，关于Educoder/头歌JAVA——jQuery基础的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Educoder/头歌JAVA——JAVA高级特性：IO流

    Educoder/头歌JAVA——JAVA高级特性：IO流

    目录 第1关：什么是IO流 相关知识 什么是字节 什么是字符 什么是IO流 第2关：字节流-输入输出 相关知识 输入流 输出流 最佳实践 编程要求  第3关：字符流 - 输入输出 相关知识 Writer Reader 编程要求  第4关：复制文件 相关知识 read()方法 write()方法 使用字节流读写文件 扩展

    2024年02月03日
    浏览(43)
  • Educoder/头歌JAVA——JAVA面向对象：String类

    Educoder/头歌JAVA——JAVA面向对象：String类

    String类的对象的创建 可以按照创建类的对象的一般方法来创建 String 类的对象： String string = new String(); 也可以直接在创建对象时指定字符串内容： String string1 = \\\"Hello World\\\"; //string1字符串内容为\\\"Hello World\\\" String string2 = \\\"\\\"; //string2字符串内容为空 length()方法 String 类中的 length() 方

    2024年02月03日
    浏览(62)
  • Educoder/头歌JAVA实训——JAVA循环与分支语句编程练习

    Educoder/头歌JAVA实训——JAVA循环与分支语句编程练习

    为了完成本关任务，你需要掌握：1、数组的定义； 2、循环语句的熟练使用。 实现思路： 可以通过三层循环的方式，第一层循环用于控制百位数的变化，第二层循环用于控制十位数的变化，第三层循环用于控制个位数的变化。 由于题目要求百位数、十位数、个位数互不重复

    2023年04月08日
    浏览(76)
  • Educoder/头歌JAVA——JAVA面向对象：封装、继承和多态的综合练习

    Educoder/头歌JAVA——JAVA面向对象：封装、继承和多态的综合练习

    目录 第1关：封装、继承和多态进阶（一） 相关知识 面向对象思想 封装 继承 组合和继承 构造函数 super()和this() 编程要求 第2关：封装、继承和多态进阶（二） 相关知识 重写和重载 abstract(抽象类)和interface(接口) final static static的作用 多态 编程要求 第

    2024年02月04日
    浏览(55)
  • Educoder/头歌JAVA——Java Web：基于JSP的网上商城

    Educoder/头歌JAVA——Java Web：基于JSP的网上商城

    目录 一、商品列表 本关任务 具体要求 结果输出 实现代码 二、商品详情 本关任务 JDBC查询方法封装 商品相关信息介绍 具体要求 结果输出 实现代码 三、商品搜索 编程要求 测试说明 实现代码 四、购物车列表 本关任务 JDBC查询方法封装 购物车相关信息介绍 编程要求 测试说

    2024年02月01日
    浏览(81)

  • 【头歌educoder】离散数学实训参考-第二章-关系-part1-关系基础

    目录  第一关：求给定集合的对角线关系(Diagonal Relation)  第二关：关系的合成  第三关：关系的幂运算  第四关：关系的并运算  第五关：转换成关系矩阵  第六关：自反关系的判断  第七关：反自反关系的判断  第八关：对称关系的判断  第九关：非对称关系的判断  第十

    2024年02月07日
    浏览(44)

  • 头歌Educoder云计算与大数据——实验五 Java API分布式存储

    原始电商数据都是存储在关系型数据库或 NoSQL 数据库上的，是面向OLTP(联机事务处理过程)的；数据都是面向业务的，而不是面向分析。因此数据比较复杂，表很多关联的数据是分散的，不利于统计分析；因此需要把数据从多个表里导出来、联合起来，找出分析所需要的数据项

    2023年04月09日
    浏览(63)

  • 头歌（educoder）基本数据处理-通关代码

    以下代码都写在Begin和End注释中，即，主方法中 本关卡题目没说明白，问了人，百了度，确定是题目不清，就直接根据测试集来写代码了。 听说过水仙花，没听说过火仙草。谁知道火仙草数可以私信

    2024年02月06日
    浏览(61)

  • 获取头歌实训参考答案（EduCoder）

    头歌EduCoder平台实训答案在此，里面搜集了一些答案，可以查查有没有想看的。 https://edaser.github.io/ 一定 不要直接复制答案 ，建议还是自己做，实在不会做的，参考看完后要独立完成。 在这里可以查询一些实训的答案，后台的数据库记录了几百个实训关卡的答案，实现的方

    2024年02月11日
    浏览(42)
  • Educoder_头歌实训_离散数学_图论

    Educoder_头歌实训_离散数学_图论

    目录 第1关：图的概念 任务描述 相关知识 图的概念 习题参考 第2关：图的表示 任务描述 相关知识 图的表示 编程要求 测试说明 习题参考 第3关：单源最短通路问题 任务描述 相关知识 单源最短通路 Dijkstra算法 编程要求 测试说明 习题参考 本关任务：学习图的基本概念，完

    2024年02月03日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包