출처: https://bumcrush.tistory.com/182 [맑음때때로 여름]

minified

 

jQuery Core – All Versions | jQuery CDN

jQuery Core – All Versions jQuery Core & Migrate - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery Core - All 3.x Versions jQuery Core 3.5.1 - uncompressed, minified, slim, slim minified jQuery Core 3.5.0 - uncompressed, minified, slim, slim minified jQue

code.jquery.com

 

 

***

            $('body').html('abc') 
            // abc만 출력됨(덮어쓰기)
            
            $('body').html(
                $('body').html()+output
            );            
            //document.body.innerHTML +=output;와 같다

 

 

 

$(document).ready( )

- jQuery를 사용한 모든 웹 페이지는 다음 코드로 시작

 

$(document).ready( )

- 이벤트 연결

 

        // 제이쿼리 객체를 만들고 객체의 메소드를 사용하는 형태
        // jquery(자바스크립트 객체 또는 선택자) : jquery 객체 생성
        $(document).ready(function(){
            alert('1');
        });
        
        $(document).ready(function(){
            alert('2');
        });
        
        $(document).ready(function(){
            alert('3');
        });

 

 

기본 선택자

- jQuery 메서드의 가장 기본적인 형태
- 선택자는 jQuery에서 가장 중요한 역할

 

    <script>
        //선택자로 제이쿼리 객체 생성 : $('선택자')
        $(document).ready(function(){
            console.log('onload=ready()')
            $('*').css('color','red');            
        });
        
                        
    </script>
</head>
 
<body>
    
    <h1>jquery test</h1>
    <p>제이쿼리 테스트</p>   
    
    
    
    
</body>
 
</html>

 

 

속성 선택자

		$(document).ready(function(){
            // 속성타입으로 선택
            $('input[type=text]').css('padding',10);
            $('input:text').css('color','pink');
            
            $('input:button').css('background-color', 'black');
        });
        
        //
        
    <input type="text"><br><br>
    <input type="button" value="버튼"><br>

 

필터 선택자

입력 양식 필터 선택자 - 필터 선택자는 기본 선택자 뒤에 사용

<script>
        $(document).ready(function() {
            // select에서 선택한 항목
            var value = $('select>option:selected').val(); // get 기능
            console.log(value);
 
            setTimeout(function() {
                var value = $('select>option:selected').val();
                console.log(value);
            }, 3 * 1000)
        });
    </script>
</head>
 
<body>
 
    <select>
        <option>2021</option>
        <option>2020</option>
    </select>

 

위치 필터 선택자

 <script>
        $(document).ready(function() {
            $('table tr:odd').css('background','pink');
            $('table tr:even').css('background','black');
            
            $('table tr:first').css('background','blue');
            $('table tr:last').css('background','green');            
        });
    </script>
</head>
 
<body>
 
    <table border="1" style="width: 400px">
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>8</td>
        </tr>
        
 
    </table>

'front-end > Javascript & jquery' 카테고리의 다른 글

[jquery] 특정태그 선택 / xml 파싱 / $.parseXML()  (0) 2020.12.02
[jquery] 문서 객체 선택과 탐색 / filter / end / eq / first / last / add  (0) 2020.12.02
[jquery] 배열관리 / each / addclass  (0) 2020.12.02
[자바스크립트 ] 이벤트 삭제  (0) 2020.11.30
[자바스크립트] 이벤트 전달 / 막기 (bubbling) / stopPropagation  (0) 2020.11.30
[자바스크립트] 유효성검사  (0) 2020.11.30
[자바스크립트] 이벤트  (0) 2020.11.30

+ Recent posts

티스토리툴바