Educoder/头歌JAVA——jQuery基础

<!doctype html&gt;
<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();

从上面可以看出：

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

这里再提醒一下：

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

类选择器

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

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

效果如下：

$Rightarrow$

从上面可以看出：

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

元素选择器

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

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

$Rightarrow$

编程要求

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

用id选择器，获取id="box"的div，添加内容为我是id选择器添加的内容；
用类选择器，获取class="box"的div，添加内容为我是类选择器添加的内容；
用元素选择器，获取 p 标签，添加内容为我是元素选择器添加的内容。

提示：

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

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

    <!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关：过滤选择器（一）

编程要求

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

用过滤选择器获取要操作的DOM元素；
设置表头颜色为 yellowgreen；
设置奇数行颜色为 lightyellow；
设置偶数行颜色为 lavenderblush；
提供的代码不允许修改，只允许填充begin至end中间的代码。

提示：

要先设置奇数行和偶数行的颜色，最后设置表头的颜色，否则会被覆盖的；
这里css的背景色用 background, 不用 background-color。

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

效果图如下：

<!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关：过滤选择器（二）

:not 选择器

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

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

<ul class="box">
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li右边没有外边距</li>
</ul>

效果图如下：

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

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

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

效果图如下：

编程要求

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

用选择器实现下面的效果，相应的方法可以在平台上自行调试；
选取第三行，填充背景色为"#eee"；
除了最后一行，其他都要底边边框，边框样式为：1px dashed #ccc。

注：

这里用类来获取li元素，不用li标签；
背景色用 background，不用 background-color；
提供的代码不允许修改，只允许填充begin至end中间的代码。

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

效果图如下：

<!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 选项卡

show()和hide()

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

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

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

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

类的添加和删除

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

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

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

编程要求

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

当点击上面的tab选项卡时，下面会显示对应的内容，添加的类为active；
tab切换静态页面已经写好，初始化已经完成，只需完成切换的功能；
注：提供的代码不允许修改，只允许填充begin至end中间的代码。

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

效果图如下：

<!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>