Dom 응용실습

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>jQuery - 셀렉터</title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <style>
      body {
        font-size: 17px;
        font-family: Arial, Helvetica, sans-serif;
        background: #f4f4f4;
        line-height: 1.5em;
      }
      header {
        background: #333;
        color: white;
        padding: 20px;
        text-align: center;
        border-bottom: 4px solid black;
        margin-bottom: 10px;
      }
      #container {
        width: 90%;
        margin: auto;
        padding: 10px;
      }
    </style>
  </head>

  <body>
    <header>
      <h1>jQuery Dom 사용</h1>
    </header>
    <div>
      <button id="btn1">버튼 1</button>
      <p class="para1">첫번째 문장입니다.</p>
      <p class="para2">두번째 문장입니다.</p>
      <div id="myDiv"></div>
    </div>

</html>

script

만약 p태그의 para1의 color와 background color을 바꾸자고 한다면

$("p.para1").css("color", "red");

$("p.para1").css("background", "yellowgreen");

이렇게 작성했을 것이다.

위의 두 줄을 한줄로 줄여서 아래와 같이 사용가능하다.

// css를 여러개 입력 시 객체형식으로 가능{키:'값',....}

$("p.para1").css({ color: "red", background: "yellowgreean" });

그리고 아예 css를 따로 만들어서 원하는 태그를 선택하여 클래스를 추가해 줄 수 있음.

예)

.myclass 추가

.myclass {

color: skyblue;

background-color: gray;

}

script

$("p.para2").addClass("myclass");

p태그의 para2에 myclass이름을 가진 클래스 추가

그리고 버튼을 눌러서 해당 클래스를 숨겼다가 다시 나타나게 할 수 있다. (toggle)

$("#btn1").on("click", function () {

$("p.para2").toggleClass("myclass");

});

버튼을 누르면 꺼지고 한번 더 누르면 켜짐

**태그 내 텍스트와 html 사용하기

$("#myDiv").text("글자만 넣기");

$("#myDiv").html("<div>첫번째</div> <div>두번째</div>");

리스트

     <ul>
        <li>리스트 아이템1</li>
        <li>리스트 아이템2</li>
        <li>리스트 아이템3</li>
        <li>리스트 아이템4</li>
      </ul>

$("ul").append("<li>아이템추가append</li>"); //자식들 중 가장 아래에 추가

$("ul").prepend("<li>아이템추가prepend</li>"); //자식들 중 가장 위에 추가

순서를 정하는것도 가능함

//순서를 정함

$(".para1").appendTo(".para2"); // para1을 para2 아래로 보낸다.

//태그 제거

$("ul").empty(); //ul 안의 내용 제거

리스트 아이템 삭제 됨.

$("ul").detach(); //ul 태그까지 제거

empty()는 ul안의 li태그들만 삭제되는데, detach()를 사용하게되면 ul 태그까지 제거된다.

input 에 입력하고 enter를 클릭하면 list에 추가되는 코드 작성하기

input 태그를 ul태그 위에 작성 id="newItem"

      <input type="text" id="newItem" />

      <ul>
        <li>리스트 아이템1</li>
        <li>리스트 아이템2</li>
        <li>리스트 아이템3</li>
        <li>리스트 아이템4</li>
      </ul>

출력화면

script

$("#newItem").on("keyup", function (e) {

let code = e.which; //키 코드

if (code === 13 && e.target.value.length > 0) {

// 13은 enter를 뜻함, null이 아닌경우

$("ul").append("<li>" + e.target.value + "</li>"); // ul 자식들 중 가장 아래에 값 추가

e.target.value = ""; //리스트에 추가하고 input 값 공백으로 변경

}

});

'FRONTEND > 기타' 카테고리의 다른 글

로또 번호 가져오기 (0)	2023.10.06
jQuery 를 활용해 AJAX 사용 load() (1)	2023.10.06
jQuery - event (0)	2023.10.05
jQuery ? (1)	2023.10.05
id로 DB검색하여 결과 출력 (0)	2023.10.04

**태그 내 텍스트와 html 사용하기

리스트

input 에 입력하고 enter를 클릭하면 list에 추가되는 코드 작성하기

'FRONTEND > 기타' 카테고리의 다른 글

티스토리툴바