Educoder:jQuery遍历

目录:

  • 第1关:jQuery——遍历DOM元素的祖先元素
  • 第2关:jQuery——遍历DOM元素的后代元素
  • 第3关:jQuery——遍历DOM元素的兄弟元素
  • 第4关:jQuery遍历——过滤

第1关:jQuery——遍历DOM元素的祖先元素

任务描述
本关任务:用 jQuery 遍历 DOM 的祖先元素。效果如下:

Educoder:jQuery遍历_第1张图片
参考答案

doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">script>

    <style>
    .container{
     
        width: 300px;
        margin: 30px auto;
        border: 2px solid #000;
    }
    .item{
     
        font-size: 60px;
        text-align: center;
        color: red;
    }
    style>
head>
<body>
    <div class="container"> 
         <p class="item">
              404
         p>
    div>
   <script>

    $(function(){
             
        //------------ Begin -----------
		$(".item").parent().css("background","#fff");
        $(".item").parents().css("background","#ccc");
        //------------ End --------------
    })

   script>

你可能感兴趣的:(web前端,前端)