Fiori/UI5

[JavaScript] jQuery

clode 2023. 3. 7. 17:39
728x90
반응형

jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.

jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

<script src="https://code.jquery.com/jquery-3.5.1.js" 
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" 
        crossorigin="anonymous"> </script>

를 입력해주면 jQuery를 사용하겠다라는 말이 된다. 사용하는 script로직 이전에 넣어줘야한다. 순서에 유의하지 않으면 jQuery문법이 html에서 먹지않는다.


제어 대상 찾기 예제

<body>
  <ul>
    <li>WEB</li>
    <li>HTML</li>
    <li class=active>CSS</li>
    <li id=javascript>Javascript</li>
    <li>SAPUI5</li>
  </ul>

jQuery

  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"> </script>
  <script>
    $("li").css("color", "gray");
    $(".active").css("color", "skyblue");
    $("#javascript").css("font-size", "20px").css("color", "green"); //css사용뒤 또 css사용가능
  </script>
</body>

태그, Class, Id 모두 사용가능하다.

Javascript

 <script>
    var aLiTag = document.queryselectorAll("li");
    for (var i=0; i<aLiTag.length; i++){
    aLiTag[i].style.color = "red";
    }
 </script>
</body>

자바스크립트에선 이런식으로 변수를 선언해서 데이터를 변수에 넣은 뒤 사용했다. jQuery에서는 변수선언을 하지 않고 $로 바로 사용할 수 있는 편리함이 있다.


속성 예제

daum 텍스트를 클릭하면 daum 페이지가 나온다. 버튼을 클릭한뒤 다시 daum 텍스트를 클릭하면 naver 페이지가 나오게 한다. 

<body>
  <ul>
    <li><a id=target target="_blank" href="https://www.daum.net">daum</a></li>
  </ul>
  <button onclick="changeHref();">change</button>

jQuery

  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"> </script>
  <script>
    function changeHref() {
      $("#target").attr("href", "https://www.naver.com");
    }
  </script>
</body>

Javascript

 <script>
   var oTag = document.querySelector("#target");
   oTag.setAttribute("href", "https://www.naver.com");
 </script>
</body>
728x90
반응형