javascript 아홉번째

Park In Kwon·2022년 11월 30일

1. jQuery

1-1. 라이브러리

자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고
한다.
자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을
높여주는 코드들

1-2. jQuery

jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록
돕는 도구이다.
엘리먼트를 선택하는 강력한 벙법
선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공
자바스크립트 라이브러리

2. jQuery 셀렉터

<body>
    <div class="welcome"></div>
    <div class="welcome"></div>

    <script>
        // $('.welcome') : 제어 대상
        // .method() : 명령
        $('.welcome').html('hello world! coding everybody!!!');
        $('.welcome').css('background-color','tomato');
    </script>
    
</body>

2-1. 기본 셀렉터

태그이름 selector
클래스 .selector
id #selector

2-2. 조합형 셀렉터

id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태
셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
태그, 클래스, 아이디를 독립적으로 명시할 때 보다 우전적으로 적용된다.
두 조건을 모두 만족해야한다.
tag.class

tag#id

<body>
   <input type="button" id="pure" value="pure" />
   <input type="button" id="jQuery" value="jQuery" />

   <script>
       // pure : javascript
       // 버튼클릭시 alert, 'pure'
       let target = document.getElementById('pure');
       target.addEventListener('click', function(){
           alert('pure');
       });

       // jQuery : jquery
       // 버튼클릭 alert, 'jQuery'
       $('#jQuery').on('click',function(){
           alert('jQuery');
       });
   </script>
</body>

3. chain

한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다.

코드가 간결해진다.

<body>
   <a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>

   <script>
       // attr : 속성
       //$('#tutorial').attr('href', 'http://www.naver.com');
       //$('#tutorial').attr('target','_blank');

       $('#tutorial').attr('href', 'http://www.naver.com')
               .attr('target','_blank')
               .attr('color','tomato');
   </script>
</body>

4. event

$("#btn").click(function(event){
// 실행할 내용
});

// bind : 이벤트를 특정 요소에 연결하는 것을 이벤트 바인딩
$("#btn").bind("click", function(event){
// 실행할 내용
});

$("#btn").on("click",function(event){
// 실행할 내용
});

<body>

   <script>
       function clickHandler(){
           alert('thank you');
       }
       
       $(document).bind('ready', function(){
            $('#click_me').bind('click', clickHandler);
        })
   </script>

   <input id="click_me" type="button" value="click me" />

</body>
-------------------------------------------------------
<body>
   <script>
       function clickHandler(){
           alert("event helper");
       }
       // event helper
       $(document).ready(function(){
           $("click_me").click(clickHandler);
       });
       
   </script>

   <input type="button" id="click_me" value="click me" />
   
</body>
-------------------------------------------------------
<body>
   <h1>on()</h1>
   <p>여기를 클릭해 주세요</p>

   <script>
       $('p').on("click",function(){
           alert("문장이 클릭되었습니다.");
       });
   </script>
   
</body>

Park In Kwon

개발자로 진로 변경을 위해 준비하고 있습니다

이전 포스트

javascript 여덟번째

다음 포스트