본문 바로가기
HTML, CSS, ECMA6/자바스크립트(Java Script)

[자바스크립트] jQuery 시작하기

망고방고 2019. 7. 8. 15:31

jQuery 시작하기

실행 환경 {

‘IDE’ : ‘Eclipse’

‘Java_Version’ : ‘JDK 1.8’

‘Browser’ : ‘Chrome’

‘JQuery_Version’ : 3.1.1

}

JQuery CDN 또는 다운로드하여 JQuery Library version 확인

파일명 : jq-ex01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN을 사용하는 방 -->
<!-- script src="https://code.jquery.com/jquery-3.1.1.js"></script-->
<!-- 내려받아 사용하기 -->
<script type="text/javascript" src="assets/js/jquery/jquery-3.1.1.js"></script>
<script>
console.log($().jquery);
</script>
</head>
<body>
    <h1>jQuery Library Version 확인</h1>
</body>
</html>

Element를 선택하는 방법

파일명 : jq-ex02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN을 사용하는 방 -->
<!-- script src="https://code.jquery.com/jquery-3.1.1.js"></script-->
<!-- 내려받아 사용하기 -->
<script type="text/javascript" src="assets/js/jquery/jquery-3.1.1.js"></script>
<script>

//Element 선택1 (바닐라스클비트 사용)
window.onload = function(){
    console.log(document.getElementById('header'));
};

//Element 선택2 (JQuery함수를 사용)
jQuery(document).ready(function(){
    console.log($('header'));
});

//Element 선택3 (JQuery함수를 사용, alias $)
$(document).ready(function(){
    console.log($('header'));
});

//Element 선택4 ($함수를 사용)
$(function(){
    console.log($('header'));
}


</script>
</head>
<body>
    <h1 id='header'>Element를 선택해야 하는 시점</h1>
</body>
</html>

JQuery 동작

jQuery에서 jQuery.fn = jQuery.prototype 등으로 플러그인을 만들면 jQuery로 뽑아낸 함수 모두에서 사용할 수 있다.

파일명 : jq-ex03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN을 사용하는 방 -->
<!-- script src="https://code.jquery.com/jquery-3.1.1.js"></script-->
<!-- 내려받아 사용하기 -->
<script type="text/javascript" src="assets/js/jquery/jquery-3.1.1.js"></script>
<script>

var $obj ={
        "0" : document.getElementById('header'),
        length : 1
}

$obj.__proto__ = jQuery.fn;

$(function(){

    var $h1 = $('#header');

    /* JQuery 객체 */
    console.log($h1.length);
    //console.log(typeof($h1)+":"+($h1 instanceof $h1[0]));
    console.log($h1[0] + ":" + typeof($h1[0]));
    console.log($h1.get(0) + ":" + typeof($h1[0]));

    $h1.click(function(){
        $(this).css();
    })
})


</script>
</head>
<body>
    <h1 id='header' class='header'>Element를 선택해야 하는 시점</h1>
    <h1 class='header'> 22222222 Element를 선택해야 하는 시점</h1>
</body>
</html>

jQuery Selector 사용하기

파일명 : jq-ex04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- CDN을 사용하는 방 -->
<!-- script src="https://code.jquery.com/jquery-3.1.1.js"></script-->
<!-- 내려받아 사용하기 -->
<script type="text/javascript" src="assets/js/jquery/jquery-3.1.1.js"></script>
<script>
$(function(){
    setTimeout(function(){
        //1. tag selector
        $li = $('li');
        $li.css('color','#f00'); //jQuery를 이용하여 css를 변경하는 방법 

        //2. id selector
        $('#text1').css('color','#0ff');
        $('#text2').css('color','#0ff');

        //3. class selector 
        $('.red').css('color','#f00');
        $('.blue').css('color','#00f');


        //4. 전체 선택자 
        $('*').css('font-size', '1.1em');

        // **1, 2, 3, 4 에 대한 내용 조합하여 5번, 6번 사용 가능**
        //5. child selector(자식 선택자)
        $('div > ul > li').css('font-weight','bold');


        //6. 하위 (자손) 선택자 
        $('div li');
        $('div ul strong').css('font-weight','normal');

        //7. 그룹
        $('#text2, .red').css('text-decoration', 'underline');

        //8. 인접 객체 찾기 #first로 부터 2칸 넘어서의 li값인 car에 표시 
        $('#first + li + li').css('color','black');

        //9. 특정 속성을 가지고 있는 것을 찾기
        //id있는 태그 찾기
        $('li[id]').css('text-decoration','line-through');
        // class=blue 찾기
        $('li[class="blue"]').css('font-style', 'italic');


        //10. filter
        $('li:first').css('background-color','#aaa')
        // ul태그 아래 li를 가진 첫째는 모두 색변경  
        $('ul li:first-child').css('background-color','#00f')
        $('ul li:last').css('background-color','yellow')
        $('li:odd')
        $('li:even')
        $('li:contains("Cat")')
        $('li:has("strong")')


    }, 2000);
})


</script>
</head>
<body>
    <h1>선택자</h1>
    <ul>
        <li>텍스트-1</li>
        <li>텍스트0</li>
        <li id='text1'>텍스트1</li>
        <li id='text2'>텍스트2</li>
        <li class='red'>텍스트3</li>
        <li class='blue'>텍스트4</li>
    </ul>

    <div>
        <ul>
            <li id='first'>bag</li>
            <li>cat</li>
            <li>car</li>
            <li>dog</li>
        </ul>
    </div>
</body>
</html>

기존 tabbox 예제를 통하여 jQuery로 변경시키기

파일명 : ex06.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>리스트를 이용한 메뉴 만들기</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>

<style type="text/css">
* { margin:0; padding:0 }
body { font-family: '맑은 고딕' '돋움'; font-size:0.75em; color:#333 }
ul, ol {list-style-type:none;}

.tab-box{
    margin:20px auto;
    width: 520px;
    border: 1px solid #333; 
}
.tab-box ul li{
    float:right; 
    width:100px;
    height:22px; 
    border:1px solid  #999;
    background-color:#ccc;
    text-align:center; 
    padding-top: 5px;
    margin-right: 2px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    cursor:pointer;
}

.tab-box ul li.selected{
    background-color:#fc6;
}
.tab-box ul li:hover{
    background-color:#fff;
}

.tab-box ul{
    height: 29px;
}

.tab-box div{
    width:516px;
    margin-top:-1px;
    border:1px solid #999;
    text-align:center;
    height:200px;
    line-height:200px;

}
</style>
<script>
var tabBox = {
    init : function(){
        $('.tab-box li').click(function(){
            var $li = $(this);
            $('li.selected').removeClass('selected');
            $li.addClass('selected');
        });
        /* 변경 전 바닐라스크립트
        *var divTabBox = document.getElementsByClassName('tab-box')[0];
        var ulTabBox = divTabBox.childNodes[1];
        var lisTab = ulTabBox.getElementsByTagName('li');

        for(i = 0; i < lisTab.length; i++){
            lisTab[i].addEventListener('click', this.onTabClicked);
        }
    },
    onTabClicked : function(event){
        // click이벤트를 받은 타겟
        var liClicked = event.target;
        if(tabBox.liSelected != null){
            tabBox.liSelected.className = '';
        }
        liClicked.className='selected';
        tabBox.liSelected = this;

    }
    */
    }
}
/*
window.onload = function(){
    // init함수만으로 호출하기 위해 
    tabBox.init();
}
*/
</script>
</head>
<body>
<div class="tab-box">
    <ul>
        <li>메뉴 1</li>
        <li>메뉴 2</li>
        <li>메뉴 3</li>
        <li>메뉴 4</li>
        <li>메뉴 5</li>
    </ul>
    <div>
        탭뷰입니다.
    </div>
</div>    
</body>
</html>

바닐라스크립트보다 훨씬 직관적이고 간편하게 문제를 해결할 수 있다.

저작자표시

'HTML, CSS, ECMA6 > 자바스크립트(Java Script)' 카테고리의 다른 글

[자바스크립트] Event 처리  (0) 2019.07.08
[자바스크립트] 심화4 - Escape 다루기  (0) 2019.07.04
[자바스크립트] 심화3 - String 다루기  (0) 2019.07.04
[자바스크립트] 심화2 - Array 다루기  (0) 2019.07.04
[자바스크립트] 심화1 - 객체 다루기  (0) 2019.07.04

'HTML, CSS, ECMA6/자바스크립트(Java Script)' Related Articles

티스토리툴바