Web Development/JavaScript

6. JQuery 사용해서 문서 내 특정 요소로 객체 찾기(JavaScript)

seongduck 2022. 9. 6. 01:21
  • JQuery는 로직을 재사용할 수 있도록 고안된 소프트웨어 라이브러리
  • 이를 사용하기 위해서는 HTML로 로드해야 한다.

<세팅>

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    jQuery( document ).ready(function( $ ) {
      $('body').prepend('<h1>Hello world</h1>');
    });
    </script>
</body>
</html>
  1. JQuery가 있는 파일을 웹페이지에서 구해야 한다. (src = "_" 부분)
  2. 필요한 소스는 다운로드없이 스크립트내에서 가져올 수 있다.
  3. body 태그 아래에 Hello world코드를 만든다.
  4. $('body').prepend('<h1>Hello world</h1>'); 부분외에 나머지는 거의 고정으로 사용한다.

기본 문법 양식

$('li').css('color','red');
-> <li style = "color : red">

# $('_') => JQuery Function
# 'li' => css selector

 

 예제

  • 코드가 길어서 나눠서 쓰겠다.
  • 위의 박스는 DOM방식
  • 아래 박스는 JQuery방식
<!DOCTYPE html>
<html>
<head>
    <style>
    #demo{width:200px;float: left; margin-top:120px;}
    #execute{float: left; margin:0; font-size:0.9em;}
    #execute{padding-left: 5px}
    #execute li{list-style: none}
    #execute pre{border:1px solid gray; padding:10px;}
    </style>
</head>
  • head에는 각각의 박스 모양과 스타일, 크기를 조정해준다.

<body>
<ul id="demo">
    <li class="active">HTML</li>
    <li id="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
  • active라는 클래스를 지닌 HTML, JavaScript
  • active라는 id를 가진 CSS

 

<태그 기준으로>

<ul id="execute">
    <li>
        <pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i&lt;lis.length; i++){
    lis[i].style.color='red';   
</pre>
        <pre>
$('li').css('color', 'red')     </pre>
        <input type="button" value="execute" onclick="$('li').css('color', 'red')" />
    </li>
  • id = execute라는 id를 생성
  • <pre>에는 다음처럼 첫번째 박스, 두번째 박스에 각각 보여줄 문법을 적는다.
  • excute값을 가진 button을 만들고 그것을 클릭했을 때 li태그에 있는 모든 객체의 색깔을 빨간색으로 바꾼다.

 

<ClassName 기준으로>

    <li>
        <pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i &lt; lis.length; i++){
    lis[i].style.color='red';   
}</pre>
        <pre>
$('.active').css('color', 'red')</pre>
        <input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
    </li>
  • ByClassName은 배열형태로 저장되는데 active라는 클래스명을 가지고 있는 객체를 lis라는 배열에 저장
  • for문으로 순회하면서 색깔을 빨간색으로 바꿔주는 과정을 보여준다.
  • execute라는 값을 가지는 button을 만들고 이것을 클릭했을 때 모든 active의 색깔을 빨간색으로 바꿔라.

 

<id 기준으로>

<li>
        <pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
        <pre>
$('$active').css('color', 'red').css('textDecoration', 'underline');
        </pre>
        <input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
    </li>
</ul>
  • active라는 id를 가지고 있는 객체를 찾고 빨갠색을 입혀주고 밑줄을 추가한다.
  • execute라는 값을 지는 button을 만들고 이를 클릭할 시 모든 active의 색깔을 빨간색으로 바꾸고 밑줄을 추가한다.

 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>
  • JQuery를 사용할 것이므로 이처럼 가져온다.
  • <pre>에 있는 문법은 JQuery의 한줄로 만들어지는 과정을 보여준 것이다.

전체코드

<!DOCTYPE html>
<html>
<head>
    <style>
    #demo{width:200px;float: left; margin-top:120px;}
    #execute{float: left; margin:0; font-size:0.9em;}
    #execute{padding-left: 5px}
    #execute li{list-style: none}
    #execute pre{border:1px solid gray; padding:10px;}
    </style>
</head>
<body>
<ul id="demo">
    <li class="active">HTML</li>
    <li id="active">CSS</li>
    <li class="active">JavaScript</li>
</ul>
<ul id="execute">
    <li>
        <pre>
var lis = document.getElementsByTagName('li');
for(var i=0; i&lt;lis.length; i++){
    lis[i].style.color='red';   
</pre>
        <pre>
$('li').css('color', 'red')     </pre>
        <input type="button" value="execute" onclick="$('li').css('color', 'red')" />
    </li>
    <li>
        <pre>
var lis = document.getElementsByClassName('active');
for(var i=0; i &lt; lis.length; i++){
    lis[i].style.color='red';   
}</pre>
        <pre>
$('.active').css('color', 'red')</pre>
        <input type="button" value="execute" onclick="$('.active').css('color', 'red')" />
    </li>
    <li>
        <pre>
var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';</pre>
        <pre>
$('$active').css('color', 'red').css('textDecoration', 'underline');
        </pre>
        <input type="button" value="execute" onclick="$('#active').css('color', 'red').css('textDecoration', 'underline')" />
    </li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>
저작자표시 비영리 변경금지

'Web Development > JavaScript' 카테고리의 다른 글

5. 문서 내 특정 요소로 객체 찾기 (JavaScript)  (0) 2022.09.06
4. 버튼을 누르면 새창 만들기(창 제어하기) (JavaScript)  (0) 2022.09.05
3. JavaScript에서 경고창(alert), 선택창(confirm), 검색창(prompt) 만들기  (2) 2022.09.05
2. HTML에서 JavaScript 로드하고 경고창 만들기  (0) 2022.09.05
1. JavaScript 실습을 위한 Sublime Text 설치하기  (0) 2022.09.05

'Web Development/JavaScript'의 다른글

  • 현재글6. JQuery 사용해서 문서 내 특정 요소로 객체 찾기(JavaScript)

관련글

댓글

티스토리툴바