Взаимное расположение элементов

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Новая страница: «В этой статье собраны основные термины, которые используют для описания взаимного распол…»)
(Дочерние элементы)
Строка 4: Строка 4:
Дочерними элементами для элемента А будут являться все элементы, находящиеся непосредственно внутри этого элемента.
Дочерними элементами для элемента А будут являться все элементы, находящиеся непосредственно внутри этого элемента.
-
Например, для <tt>ul</tt>-элемента, дочерними являются  
+
Например, для <tt>ul</tt>-элемента, дочерними являются
 +
<codeditor demoWindowHeight="400px">
 +
<!DOCTYPE>
 +
<html>
 +
<head>
 +
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 +
  <style>
 +
    body{
 +
      font:10pt Arial,sans-serif;
 +
      color:#555;
 +
    }
 +
    ul{
 +
      float:left;
 +
      margin:3px; margin-left:15px;
 +
      padding:10px 10px 5px 10px;
 +
      border:2px solid #ddd;
 +
    }
 +
    ul.matched{
 +
      background:url('/tags/images/matched.png') 0% 2% no-repeat;
 +
    }
 +
    ul.result{
 +
      position:relative;
 +
      left:-3px;
 +
      border:3px solid #ff8888;
 +
    }
 +
    li{
 +
      position:relative;
 +
      float:left;
 +
      margin:7px;
 +
      padding:2px;
 +
      width:60px;
 +
      height:60px;
 +
      background-color:#e1e1e1;
 +
      border:2px solid #e1e1e1;
 +
    }
 +
    li.matched{
 +
      background:#e1e1e1 url('/tags/images/matched.png') 5% 5% no-repeat;
 +
    }
 +
    li.result{
 +
      margin-left:6px;
 +
      margin-right:6px;
 +
      width:60px;
 +
      height:60px;
 +
      border:3px solid #ff8888;
 +
    }
 +
    p{
 +
      position:relative;
 +
      float:left;
 +
      width:16px;
 +
      height:16px;
 +
      margin:2px;
 +
      background-color:#f4f4f4;
 +
      font-size:1pt;
 +
    }
 +
    p.matched{
 +
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
 +
    }
 +
    p.result{
 +
      width:12px;
 +
      height:12px;
 +
      border:2px solid #ff8888;
 +
    }
 +
    .matched_addit{
 +
      background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
 +
    }
 +
    .srce{
 +
      padding:16px 0;
 +
      text-align:center;
 +
    }
 +
    .srce tt{
 +
      color:#0088ff;
 +
    }
 +
    .tgName{
 +
      position:absolute;
 +
      top:11px; left:45%;
 +
      font-size:8pt;
 +
      color:#b2ada1;
 +
    }
 +
    li .tgName{
 +
      top:24px;
 +
      left:18px;
 +
    }
 +
    li p .tgName{
 +
      top:0;
 +
      left:1px;
 +
      font-size:7pt;
 +
    }
 +
    .top-element{
 +
      padding-top:20px;
 +
    }
 +
    .clear{clear:both}
 +
  </style>
 +
</head>
 +
<body>
 +
  <tt class="tgName">‹ul›</tt>
 +
  <ul>
 +
    <li><tt class="tgName">‹li›</tt></li>
 +
    <li></li>
 +
    <li>
 +
      <p><tt class="tgName">‹p›</tt></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <li></li>
 +
    <li></li>
 +
    <div class="clear" />
 +
  </ul>
 +
  <ul>
 +
    <li></li>
 +
    <li></li>
 +
    <li></li>
 +
    <li>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <li>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <div class="clear" />
 +
  </ul>
 +
  <ul>
 +
    <li>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
      <p></p> <p></p> <p></p>
 +
    </li>
 +
    <li></li>
 +
    <li></li>
 +
    <li></li>
 +
    <li></li>
 +
    <div class="clear" />
 +
  </ul>
 +
 
 +
  <div class="clear top-element"><p class="result"></p> – найденные элементы.</div>
 +
 
 +
  <script>
 +
    $('li:eq(1)').addClass("result");
 +
    $('ul:last p:eq(4)').addClass("result");
 +
  </script>
 +
 
 +
</body>
 +
</html>
 +
</codeditor>
== Элементы потомки ==
== Элементы потомки ==

Версия 14:11, 16 ноября 2013

В этой статье собраны основные термины, которые используют для описания взаимного расположения элементов в дереве DOM (элементы на странице).

Дочерние элементы

Дочерними элементами для элемента А будут являться все элементы, находящиеся непосредственно внутри этого элемента.

Например, для ul-элемента, дочерними являются

Элементы потомки

Потомками элемента A будут являться все элементы, лежащие внутри него

Соседние элементы

Соседними элементами называют элементы, лежащие в общем элементе. находящиеся на одном уровне иерархии в дереве дом. Или другими словами, это все элементы, которые находятся в другом элементе.

От автора jquery.page2page.ru

 
Мини-игра про поход за продуктами во время карантина.

за Comic Sans извени

Личные инструменты