JQuery - Html5 data-, Travarsing, Shadow DOM

JQuery - Html5 data-, Travarsing, Shadow DOM

Web/Js 2018. 9. 4. 13:05

JQuery CDN

<script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

Html5 data-, Travarsing

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="./layout.css" />
  <title>Vacation Packages</title>
  <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script type="text/javascript">

    $(document).ready(function() {

    $('#vacations').find('.vacation').find('button').click(function() {
        
        // $(this).detach() // element는 제거하고 DOM은 제거하지 않음.
        // var price = $('<p> From $399.99 </p>')
        // $(this).after(price)

        // var price = $('<p> From $399.99 </p>')
        // $(this).closest('.vacation').append(price) // 인접한 해당 태그 부모를 찾는다.
        // $(this).remove() // element와 DOM을 다 제거, 후에 this사용 불가, remove를 후에 사용

        var vacation = $(this).closest('.vacation')
        var amount = vacation.data('price')
        var price = $('<p> From $'+ amount + '</p>')

        vacation.append(price)
        $(this).remove()

        $(price).click(function() { 
          alert($(this).text())
        })
        
    })

    $('#vacations').find('.vacation').find('li').click(function() {
        alert($(this).text())
    })

    $('fieldset').find('p').click(function() { 
        alert($(this).text())
    })

    $('#vacations').find('.vacation').find('h2').click(function() {
        alert($(this).text())
    })

    $('fieldset').find('h1').click(function() { 
        alert($(this).text())
    })

    $('fieldset').find('h3').click(function() { 
        alert($(this).text())
    })

    $('fieldset').children('legend').click(function() { 
        alert($(this).text())
    })

    })
  </script>
  </head>
<body>
  <!-- 
    html5에는 변수가 있다. 
    Tag안에 data-변수명으로 사용가능하고 소문자만 사용가능하다.
  -->
  <fieldset>
    <legend>Vacations</legend>
    <h1>Vacation Packages</h1>
    <h3>jQuery Travels</h3>
    <div id="vacations">
      <ul>
        <li class='vacation' data-price = "399.99">
          <h2>Hawaiian Vacation</h2>
          <p>Comments on this deal:</p>
          <ul class="comments">
            <li>"Amazing Deal!"</li>
            <li>"Can't wait to take this trip!"</li>
          </ul>
          <div>
            <button>GET PRICE</button>
          </div>
        </li>
      </ul>
      <ul>
        <li class='vacation' data-price = "499.98">
          <h2>Olando</h2>
          <p>Comments on this deal:</p>
          <ul class="comments">
            <li>There aren't any comments on this deal yet.</li>
          </ul>
          <button>GET PRICE</button>
        </li>
      </ul>
      <ul>
        <li class='vacation' data-price = "599.99">
          <h2>Visit Japan</h2>
          <p>Comments on this deal:</p>
          <ul class="comments">
            <li>"Never been, but can't wait!</li>
            <li>&nbsp;</li>
          </ul>
          <button>GET PRICE</button>
        </li>
      </ul>
    </div>
    <p class="call">Call us at 555-2593 to make a reservation today!</p>
  </fieldset>
</body>
</html>

layout.css

body {
  background-color: #ccc;
  background-image: url('./imgs/background.jpg');
  padding: 10px;
}

legend {
  color: #FFF;
  font-weight: bold;
  text-align: center;
}

h1 {
  color: #f3f3f3;
  font-size: 23px;
  font-weight: bold;
  margin: 0px;
}

h3 {
    margin: 0px;
    color: #999;
    font-size: 14px;
    font-weight: bold;
}

li {
  display: block;
}

ul {
  margin-top: 30px;
  padding: 0px;
}

.vacation {
  padding: 10px;
  width: 190px;
  background: rgba(0, 0, 0, 0.3);
}

.vacation h2 {
  margin: 0px;
  font-size: 21px;
  color: #999;
}

.vacation p {
  color: #aaa;
  margin-bottom: 0px;
}

.vacation ul.comments {
  width: 100%;
  margin: 0px;
  color: #777;
  font-size: 12px;
  font-weight: bold;
}

.vacation button {
  margin-top: 20px;
  width: 100%;
  height: 30px;
  background-color: #66FF66;
  border: none;
  font-weight: bold;
}

p.call {
  color: #F3F3F3;
  font-weight: bold;
  text-align: center;
}

div#vacations ul {
  display: inline-block;
  margin-right: 40px;
  vertical-align: top;
}

div#vacations ul:LAST-CHILD {
  margin-right: 0px;
}

Shadow DOM

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./layout.css" />
    <title>Vacation Packages</title>
    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
    <script type="text/javascript">

      $(document).ready(function() {
        
        $('button').click( function() { // btn click
          var price = $('<p>From $399.99 </p>') // Shadow DOM, JQuery가 직접만든 객체, 렌더링 이후 만들어진 객체
          $('.vacation').append(price) // before - 전에, after - 후에, append - 내부에 제일 밑에 붙음, prepend
          $(this).remove()

          var worstDeal1 = $('<li> "Worst Deal!!!!!" </li>')
          $('fieldset').find('.vacation').children('.comments').prepend(worstDeal1)

          var worstDeal2 = $('<li> "Worst Deal2!!!!!" </li>')
          $('fieldset').find('.vacation').children('.comments').append(worstDeal2)

          var worstDeal3 = $('<li> "Worst Deal3!!!!!" </li>')
          $('fieldset').find('.vacation').children('.comments').eq(0).after(worstDeal3) // li순서는 eq로 지정 0부터 시작

          $('fieldset').find('.vacation').children('h2').text('Seoul Vacation')

        })

      })

    </script>
  </head>
  <body>
    <fieldset>
      <legend>Vacations</legend>
      <h1>Vacation Packages</h1>
      <h3>jQuery Travels</h3>
      <ul>
        <li class='vacation'>
          <h2>Hawaiian Vacation</h2>
          <p>Comments on this deal:</p>
          <ul class="comments">
            <li>"Amazing Deal!"</li>
            <li>"Can't wait to take this trip!"</li>
          </ul>
          <button>GET PRICE</button>
        </li>
      </ul>
      <p class="call">Call us at 1-555-jquery-air to make a reservation today!</p>
    </fieldset>
  </body>
</html>

children, parent

<!-- Page 121 ~ 123 -->
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Adventures</title>
    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
      <script type="text/javascript">

        $(document).ready(function() {

          // $('#destinations > li.promo').text("Seoul")
          // alert( $('li.promo').text() )
          // console.log( $('li.promo').text() )

          // console.log( $('.promo').text('$') )
          // console.log( $('.promo').text('Seoul').text() )

          // $('#destinations li').text('Seoul')

          $('#destinations').find('li.promo').text('Tokyo') // DOM Traversing

          $('.promo').parent() // 하위에서 상위로 찾아가는법
          $('.promo').parent().parent() // body
          console.log( $('.promo').parent().parent().find('h1').text() )
          
        })

      </script>
  </head>
  <body>
    <h1>Where do you want to go?</h1>
    <h2>Travel Destinations</h2>
    <p>Plan your next adventures</p>
    <ul id='destinations'>
      <li>Rome</li>
      <li>Paris</li>
      <li class='promo'>Rio</li>
    </ul>
  </body>
</html>

저작자표시 비영리

'Web > Js' 카테고리의 다른 글

React 프로젝트(CRA) 생성시 TypeScript 사용하기 (0)	2020.03.05
React 사용 중인 프로젝트에 TypeScript 사용하기 (0)	2020.03.05
js 주석처리 (0)	2018.07.10
자바스크립트 계산기 (0)	2017.11.17
자바스크립트 오전/오후 원하는 날짜 시간 (0)	2017.09.27

인기포스트 MORE POST

ABOUT ME

상무 상무

'Web > Js' 카테고리의 다른 글

티스토리툴바

인기포스트 MORE POST

ABOUT ME

'Web > Js' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바