Jaba Script

1. cookie

   -Cookie 는 Web 사용 흔적을 담기 위해 만들어졌다.
   -Html 간에 데이터 공유가 이루어 지지 않아 Cookie 를 활용 할 수 있다.
   -java Script 에서 제어 가능 하고, 사용자 PC 에 저장된다는 점 때문에 보안상 사용을 권하지 않고 있다

2. json

   Java Script Object Notation (자바스크립트 오브젝트 표기법)
   데이터 전송을 위해 text <-> json 변환을 이용한다.

JSON 에서 알아둬야 할 두 가지 자료 구조
var obj = { “key” : value };
var arr = [ 1, 2, 3, 4, 5 ];
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}

J-Query

J-Query 는 JavaScript 의 Library 이다
Library는 직접 구현이 어려운 기능을 만들어 모아 놓은 ProgramGroup

• Select

<script>
        // 기초
        console.log($("#one")); // 아이디가 one 인 요소 가져오기
        console.log($(".cls")); // 클래스가 cls 인 요소 가져오기
        console.log($("p")); // 태그가 p 인 요소 가져오기

        // 000 중에서...
        console.log($("h2.cls")); // h2 태그 중에서 클래스가 cls인 요소
        console.log($("p:first")); // p 태그 중에서 첫번째 요소

        // 요소와 요소 사이에 공백이 있거나 > 가 있으면 부모자식이다.
        console.log($("ul li")); // ul 자식 li
        console.log($("ul li:first")); // 첫 ul 자식 li중에서 첫번째
        console.log($("ul li:first-child")); // 모든 ul의 첫li

        $("p").click(function(e){ // e: 이벤트 객체
            console.log($(this)); // 이벤트가 걸린 당사자

        }); 

        //속성으로 가져오기
        console.log($("a[href]")); // a 태그 중에서 href 속성이 있는 요소
        console.log($('a[target="_blank"]')); // a 태그 중에서 target 속성이 _blank 인 요소
        console.log($('a[target!="_blank"]')); //a 태그 중에서 target 속성이 _blank 아닌 요소
    </script>

1. 부모 관계

   <script>
          console.log($("span").parent()); // 지정된 요소의 바로 윗 부모
          $('span').parent().css({"border-color":"red"});
          //css 값 변경
         <!-- parent 와 parents 차이 구분-->       
          console.log($('span').parents('div'));
          //기본적으로 선택 요소부터 html까지 올라간다.
          //매개변수에 입력된 셀렉터를 html까지 올라가면서 찾는다.
          //매개변수를 넣었을때와 넣지 않았을때 차이를 이해하자  
          console.log($('span').parentsUntil('.ancestor'));
          //지정된 요소와 매개변수 사이의 값을 찾는다
          //지정된 요소와 지정된 조상요소는 제외한다.
          //parents('div') : html 까지 올라가면서 div 다찾음
          $('span').parents('div').css({'border':'2px solid red'});
          // closest('div') : html 까지 올라가면서 최초의 div 찾음       
        $('span').closest('div').css({'border':'2px solid blue'});
   </script>

 2. 자식 관계

<script>
   //children : 특정 요소의 바로 아래 자식요소
   console.log($('div.ancestors').children());
   //find : 끝까지 내려가서 원하는 요소를 찾는다.
   console.log($('div.ancestors').find('span'));            
</script>

 
3. 형제 관계

<script>
        //siblings() : 형제요소 전부 선택
        //siblings("span") : 형제요소들 중에서 span 만 선택
        //$('p').siblings().css({'border':'2px solid red'});
        //$('p').siblings('span').css({'border':'2px solid blue'});

        //next() : 선택한 요소의 바로 다음(아래줄)
        //$('#item').next().css({'border':'2px solid red'});
        //prev() : 선택한 요소의 바로 전(윗줄)
       //$('#item').prev().css({'border':'2px solid blue'});
        // item의 nextAll과 prevALL 을 사용해 보자
        //$('#item').nextAll().css({'border':'2px solid red'});
        //$('#item').prevAll('span').css({'border':'2px solid blue'});
        //매개변수에 셀렉터를 넣으면 해당 요소만 찾아낸다
        //until 은 두 선택지는 제외된다.
        $('#item').nextUntil('p').css({'border':'2px solid red'});
        $('#item').prevUntil('p').css({'border':'2px solid blue'});
    </script>
    
4. Filterling

<script>
        // 배열개념
        console.log($('div p')); // div 자식인 p태그
        console.log($('div p').first());// 그중에서 첫번째
        console.log($('div p').last());// 그중에서 마지막
        console.log($('div p').eq(2));// 그중에서 2번 인덱스
        // 필터개념(가져온 내용을 셀렉터로 한번 더 걸러주는 개념)
        console.log($('div p').filter('.sel'));//그중에서 클래스가 sel인 요소
        console.log($('div p').not('.sel'));//filter 의 반대
       
    </script>

• event

<script>
        //이벤트 등록 1
        //$(selector).on("이벤트",실행함수);
        $("#btn").on('click',function(){
            $('body').append('<button>click</button>');
            $('body').append('<button class="newBtn2">click2</button>');
            // .newBtn2 에 대해서 이벤트를 걸어주려면
            // 태그가 생성된 이후에 걸어줘야 한다.
        });

        function clickEvt(){
            alert("click!!");;
        };
       
        //이벤트 등록 2
        //$(selector).이벤트(실행함수);
        $("evtDel").click(function(){
            $("#btn").off('click'); // on으로 추가한 이벤트는 off로 제거 가능
        });
        
        // .newBtn2 를 클릭했을때 alert("click!!"); 을 실행 해 보자
        // 처음 소스가 읽히면서 이벤트를 걸 당시에 .newBtn2라는 요소가 없었기때문에
        // 이벤트를 걸 수 없엇다.
        //$('.newBtn2').click(function(){
        //    alert("click!!");
        //});
    </script>

// on을 사용하면 한번에 여러 이벤트를 추가할 수 있다.
$('#mousezone').on({
mouseenter:function(){
$(this).css({'background-color':'red'});
},
mouseup:function(){
$(this).css({'background-color':'lightseagreen'});
}
});
// off 안에 이벤트 명을 넣지 않으면 모든 이벤트를 지운다.
$('#mousezone').off('mouseup');
$('#mousezone').off('mousedown');
// hover() : mouseenter() + mouseout()