jquery educoder

最新推荐文章于 2023-07-28 14:46:41 发布

好啊啊啊啊

最新推荐文章于 2023-07-28 14:46:41 发布

阅读量2.6k

点赞数 19

分类专栏： web 文章标签： jquery js

本文链接：https://blog.csdn.net/qq_46675545/article/details/117842447

版权

web 专栏收录该内容

6 篇文章 5 订阅

订阅专栏

这篇博客介绍了jQuery的基本使用，包括选择器（id、类、元素选择器）、过滤选择器的应用，以及事件处理（点击、键盘、表单和窗口事件）。通过实例展示了如何修改元素内容、属性，添加和删除元素，以及实现简单的选项卡效果。同时，讲解了DOM操作，如获取和设置文本内容、属性，以及添加和删除DOM元素。这些内容是理解jQuery核心功能的关键。

摘要由CSDN通过智能技术生成

jQuery

写在前面：educoder是真的坑，改代码改到我差点崩溃，我也不知道为啥一会儿必须用background一会让用background-color，一会儿只可以用类定位元素，一会儿只可以用标签，无语子，老师说检查代码不好写，他也想哭...

出错时提供两个比较有用的方法：

1.看评论区，很多同学走过的坑都有在那儿提到

2.大家可以看测试文件，但是不是每一个关卡都可以看

jQuery 入门

第1关：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 x=$("#content");
       x.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基本选择器

编程要求

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----------
    			let x=$("#box");
                x.html("我是id选择器添加的内容");
    			//----------end------------
    		}
    		if(inner == "类"){
    			//----------begin----------
    			let x=$(".box");
                x.html("我是类选择器添加的内容");
    			//----------end------------
    		}
    		if(inner == "元素"){
    			//----------begin----------
    			let x=$("p");
                x.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关：过滤选择器

<!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:odd").css("background","lightyellow");
    $("tr:even").css("background","lavenderblush");
    $("tr:first").css("background","yellowgreen");
      
    //------------end------------  
    </script>
    
</body>
</html>

第4关：过滤选择器

<!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  -------------
    	$(".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选项卡

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

Jquery事件

第1关：Jquery鼠标事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>step1</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
    <h1>鼠标事件演示</h1>
        <input type="button" value="button" class="button">
        <p></p>
</div>

<script>
    $(function(){    

       //-----------begin-----------
        $("input").click(function(){
            $("p").html("这是个click事件");
        });
        $("input").dblclick(function(){
            $("p").html("这是个dblclick事件");
        });
        $("input").mouseenter(function(){
            $("p").html("这是个mouseenter事件");
            $("input").css("background","#e7e7e7");
        });
        $("input").mouseleave(function(){
            $("p").html("这是个mouseleave事件");
            $("input").css("background","#4CAF50");
        });
            
       //------------end------------ 
    })

</script>

<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
    .button{
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
    }
</style>
</body>
</html>

第2关：Jquery键盘事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>step2</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
		
		<h1>键盘事件演示</h1>

        <input type="text" class="input1" placeholder="输入你的名字">
		<p>按键的次数: <span>0</span></p>

		<input type="text" class="input2" placeholder="这里输入文字">

</div>

<script>
    $(function(){    
       //-----------begin-----------
        i=0;
        $(".input1").keypress(function(){
            $("span").text(i+=1);
        });
        $(".input2").keydown(function(){
            $(this).css("background-color","yellow");
        });
        $(".input2").keyup(function(){
            $(this).css("background-color","pink");
        })
       //------------end------------ 
        
    });

</script>

<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
</style>
</body>
</html>

第3关：Jquery表单事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>step3</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
		
		<h1>表单事件演示</h1>

        <input type="text" class="input1">

		<br><br><select id="mySelect">
		  <option value ="显示">显示</option>
		  <option value ="不显示" selected = "selected">不显示</option>
		</select>

		<br><div id="box" style="width:200px;height:100px;background:red;display:none;"></div>

		<br><br><input type="text" class="input2" value="www.educoder.net">

</div>

<script>
    $(function(){    
       //-----------begin-----------

		//1.获取焦点失去焦点事件
		$(".input1").focus(function(){
            $(this).css("background-color","yellow");
        });
        $(".input1").blur(function(){
            $(this).css("background-color","green");
        });
		//2.改变文本事件
		$("#mySelect").change(function(){
            $(this).find("option:selected").text()=="显示"?$("#box").show():$("#box").hide();
        });
		//3.选中文本事件
		$(".input2").select(function() {
            $(".input2").after("Textselect!")    
        });
       //------------end------------ 
        
    });

</script>

<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
</style>
</body>
</html>

第4关：Jquery文件/窗口事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>step4</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
		
		<h1>文档/窗口事件演示</h1>

　　	<div id="target" style="overflow: scroll; width: 300px; height: 100px;">
		  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
		  sed do eiusmod tempor incididunt ut labore et dolore magna
		  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
		  ullamco laboris nisi ut aliquip ex ea commodo consequat.
		  Duis aute irure dolor in reprehenderit in voluptate velit
		  esse cillum dolore eu fugiat nulla pariatur. Excepteur
		  sint occaecat cupidatat non proident, sunt in culpa qui
		  officia deserunt mollit anim id est laborum.
		</div>
		<p>滚动状态 - <span>Scroll not happened</span></p>
</div>

<script>
    $(function(){    
       //-----------begin-----------
		
		//1.窗口大小改变事件
		$(window).resize(function(){
            alert("不建议调整窗口大小!");
        })
		//2.滚动文本内容事件
		$("#target").scroll(function(){
            $("p").html("Scroll happened!").css("display","inline").fadeOut("slow");
        })
       //------------end------------ 
        
    });

</script>

<style>
    .container{
        width: 500px;
        margin: 40px auto;
    }
</style>
</body>
</html>

jQuery DOM操作

第1关：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>
    <style>
    .container{
        width: 300px;
        margin: 30px auto;
    }
    .box{
        border: 2px solid #000;
        background: #eee;
        padding: 10px;
    }
    p{
        font-size: 18px;
    }
    input{
        height: 30px;
    }
    button{
       margin-bottom: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
       <button class="btn1">获取文本内容</button>
        <button class="btn2">获取内容</button>
        <button class="btn3">获取表单value值</button>
       <div class="box">
           <p>我是第一行</p>
           <p>我是第二行</p>
           输入框:<input class="getVal" type="text" value="Hello Educoder"/>
       </div>
    </div>
     
   <script>

    $(function(){        
        //------------ Begin -----------
        $(".btn1").click(function(){
            alert($(".box").text());
        })
        $(".btn2").click(function(){
            alert($(".box").html());
        })
        $(".btn3").click(function(){
            var getValue = $(".getVal").val() + "---" + $(".getVal").attr("type");
            alert(getValue);
        })
        //------------ End --------------
    })

   </script>
</body>
</html>

第2关：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>

    <style>
    .container{
        width: 300px;
        margin: 30px auto;
    }
    .box{
        border: 2px solid #000;
        background: #eee;
        padding: 10px;
    }
    p{
        font-size: 18px;
    }
    input{
        height: 30px;
    }
    button{
       margin-bottom: 30px;
    }
    </style>
</head>
<body>
    <div class="container">
       <button class="btn1">填充文本内容</button>
        <button class="btn2">填充内容</button>
        <button class="btn3">填充value值</button>
       <div class="box">
           <p class="first"></p>
           <p class="second"></p>
           输入框:<input class="getVal" type="text" value="Hello Educoder"/>
       </div>

    </div>
     
   <script>

    $(function(){        
        //------------ Begin -----------
            $(".btn1").click(function(){
                $(".first").text("我是第一行");
            })
            $(".btn2").click(function(){
                $(".second").html("<span>我是第二行</span>");
            })
            $(".btn3").click(function(){
                var typeAttr=$(".getVal").attr("type","password");
                $(".getVal").val(typeAttr);
            })
        //------------ End --------------
    })

   </script>
</body>
</html>

第3关：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>

  <style>
   button{
    margin-top:20px;
   }
  </style>
</head>
<body>
   <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
  <tr id="tb-head">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th>住址</th>
  </tr>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td>洛杉矶</td>
  </tr>
  <tr>
    <td>3</td>
    <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>4</td>
    <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td>河南</td>
  </tr>
</table>
    <script>    
    $(function(){
      var count = 4;        
      //---------表格下面添加【添加内容】按钮-------------
	  //------------------- Begin ---------------
		var addBtn='<button class="btn">添加内容</button>';
        $(".tab").after(addBtn);
      //------------------- End -----------------
       function loadData(){
          for(var i =0; i<2; i++){
            count ++;
             var tr = '<tr>' +
                  '<td>' + count + '</td>'+
                  '<td>王五</td>'+
                  '<td>男</td>'+
                  '<td>26</td>'+
                  '<td>河南</td>'+
                '</tr>';

         //---------表格底部添加内容------------
		 //------------------- Begin ---------------
           $(".tab").append(tr);
         //------------------- End -----------------
          }
       }
        //-------------点击事件-----------------
		//------------------- Begin ---------------
		$(".btn").click(function(){
            loadData();
        })
       //------------------- End -----------------
    })
    </script>

</body>
</html>

第4关：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>

  <style>
   button{
    margin-top:20px;
   }
  </style>
</head>
<body>
   <table class="tab" border="1" width="100%" cellspacing="0"  cellpadding="10" align="center">
  <tr class="line">
    <th>序号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
    <th class="final">住址</th>
  </tr>
  <tr class="line">
    <td>1</td>
    <td>张三</td>
    <td>男</td>
    <td>20</td>
    <td class="final">北京</td>
  </tr>
  <tr class="line">
    <td>2</td>
    <td>李四</td>
    <td>男</td>
    <td>30</td>
    <td class="final">洛杉矶</td>
  </tr>
  <tr class="line">
    <td>3</td>
    <td>丽丽</td>
    <td>女</td>
    <td>24</td>
    <td class="final">上海</td> 
  </tr>
  <tr class="line">
    <td>4</td>
    <td>王五</td>
    <td>男</td>
    <td>26</td>
    <td class="final">河南</td>
  </tr>
</table>
<button class="btn1">删除最后一行</button>
<button class="btn2">删除最后一个住址</button>
    <script>
    //-----------begin-----------
    $(".btn1").click(function(){
        $(".line").last().remove();
    })
    $(".btn2").click(function(){
        $(".final").last().empty();
    })
    //------------end------------  
    </script>
    
</body>
</html>

好啊啊啊啊

关注

19
点赞
踩
38

收藏

觉得还不错? 一键收藏
3
评论
jquery educoder

jQuery 入门编程要求jQuery 已经引入，在右侧编辑器补充begin至end间的代码，实现tab切换的功能。要求如下：当点击上面的tab选项卡时，下面会显示对应的内容，添加的类为active； tab切换静态页面已经写好，初始化已经完成，只需完成切换的功能；注：提供的代码不允许修改，只允许填充begin至end中间的代码。注意：为了方便评测，这里统一用双引号 "" 来表示字符串，切记。效果图如下：...
复制链接

扫一扫

专栏目录