개발일지

제이쿼리 기초 문법 본문

javascript/jquery

제이쿼리 기초 문법

eodovo 2022. 9. 2. 12:54
728x90

* 기본형식

 

$('선택자'). 메서드();

 

체이닝 기법 사용 (한 줄에 여러 메서드 사용 가능)

  • $('선택자'). 메서드(). 메서드() 메서드() 메서드();
  • $('선택자'). css({속성 : '값',})
  • jQuery('선택자'). css('속성', '값');
  • $('선택자'). 메서드('속성' , function(index){return 값})  
<body>
    <h1>타이틀 제목</h1>
    <p>단락 내용 입니다.</p>
    <ul class="list">
        <li>목록 내용 1부분</li>
        <li id="list2">목록 내용 1부분</li>
        <li>목록 내용 1부분</li>
    </ul>
    <div>
        <p>단락요소입니다</p>
    </div>



    <script>
        $('div p, h1, #list2').css('color', 'green').css('background', '#999')
        .css('textAlign', 'center').css('fontSize', '20px').css('listStyle', 'none');
        //여러 메소드를 중첩하여 사용가능.
    </script>
</body>
----
    <h3>Header-0</h3>
    <h3>Header-1</h3>
    <h3>Header-2</h3>
    <h3>Header-3</h3>
    <h3>Header-4</h3>
    <h3>Header-5</h3>


    <script>
        $('h3:even').css({
            background: 'black',
            color: 'white'
        })
    </script>

 

odd (홀수번째 위치한 문서 객체를 선택)/ even(짝수) /first/last

 

요소:eq(n) => n번째 위치하는 문서 객체 / 요소:nth-of-type() 사용

filter() 메서드

$(선택자). fliter(function(){

rerturn true});

 

return 되는 값이 true여야 함.

 

end() 메소드 => 문서 객체 선택을 한 단계 뒤로 돌린다.

 

메소드가 실행 되기 전 코드 상태로 이동

저작자표시

'javascript > jquery' 카테고리의 다른 글

시각적 효과  (0) 2022.09.05
이벤트 연결  (0) 2022.09.05
문서 조작 메서드  (0) 2022.09.05
스타일 메서드  (0) 2022.09.02
jQuery의 기초  (0) 2022.09.02
'javascript/jquery' Related Articles more
Comments