05/02 javascript & jQuery

📍 이론 

• Edit > replace  :: 한번에 글씨 변경 가능
• li{$}*7 :: 1~7까지 숫자가 찍힌  li 생성
• listBox_text1 = document.getElementsByClassName("listBox_text1");
  모든 요소를 검색하여 특정 클래스 이름을 가진 요소를 찾아서 NodeList(요소의 컬렉션)으로 반환한다.
• 자바스크립트  반복문/배열
• jQuery , React , NodeJS  > 자바스크립트 라이브러리 
• jQuery > CDM > jQuery 3.x
• jQuery > $  / jQuery(document).ready 

 

📍실습

http://hyejux.dothome.co.kr/html_hj/index.html

 

- 텍스트 값 변경하기 JS - innerHTML

for (let i = 0; i<jusoA.length; i++){            
    listBox_text0[i].innerHTML = nameA[i];            
    listBox_text1[i].innerHTML = jusoA[i];           
}

 

- 페이지 전환 JS (zIndex)

window.onload=function(){
    var menu0, menu1;
    
    menu0 = document.querySelector('.persnal');
    menu1= document.querySelector('.edu');

    wrap0  = document.querySelector('.wrap0');
    wrap1  = document.querySelector('.wrap1');


    menu0.onclick=function(){  //menu0 을 눌렀을 때
        wrap0.style.zIndex = 10;
        wrap1.style.zIndex = 0;
    }
    
    menu1.onclick=function(){  
        wrap0.style.zIndex = 0;
        wrap1.style.zIndex = 10;
    }
 }

 

 

-페이지 전환 JS - display

    popMenu0 = document.getElementById('popMenu0');
    //popMenu0 = document.querySelector('#popMenu0');
    popMenu1 = document.getElementById('popMenu1');


    let at0= document.querySelector('.at0');
    let at1 = document.querySelector('.at1');

    let at0_text= document.querySelector('.at0_text');
    let at1_text = document.querySelector('.at1_text');


    popMenu0.onclick=function(){ 
        // at0_text.innerHTML = "문제 해결 능력 입니당";
        at0.style.display = "block";
        at1.style.display = "none";

    }

    popMenu1.onclick=function(){    
        // at1_text.innerHTML = "네트워크 능력입니딍~";
        at0.style.display = "none";
        at1.style.display = "block";
        
    }

 

 

- 페이지 전환 jQuery (hide/show)

$(function(){ 
        $("menuBox div").on("click",function(){
            num = $(this).attr("class"); // 해당 클래스 값 가져오기
            num = num.substring(4,5); //문자열 자르기 (인덱스 값만 가져오기)
            $(".show").hide(); // id show  == 창 (전부) 숨기고 
             $(".wrap"+num).show(); // 열고 싶은 창만 선택해서 열기
         })

 

 

---

 

- 공통 배열

const wrap5_picA = [
            "usagi1.jpg",
            "usagi2.jpg",
            "usagi3.jpg", ........]
            
const wrap5_pic_textA =[
            "좀비 파르페 빤토",
            "빵 엎은 빤토", ....... ]

 

 

- 그림 한번에 넣기 jQuery (배열)

:eq() 메소드 :: 선택한 요소 집합에서 지정된 인덱스에 해당하는 요소를 선택합니다. 이 메소드는 0부터 시작하는 인덱스를 사용하며, 선택한 요소 집합에서 지정된 인덱스에 해당하는 요소를 반환합니다.

   for ( i = 0; i < wrap5_picA.length; i++){
            
            $(".wrap5_box div:eq("+i+")").css("background", "url(img/"+ wrap5_picA[i])
            .css("backgroundSize","100% 100%");
            $(".wrap3_text"+i).html(wrap5_pic_textA[i]);
  
        }

 

 

- 클릭 시 창 열리는 기능  jQuery 

      $(".wrap5_box div").on("click", function() {
            $(".wrap5_tv").show(); // tv 창 보여주기
            no=$(this).index(); //클릭한 div 의 index 값 가져오기
            $(".wrap5_tv_text").html(wrap5_pic_textA[no]); // 텍스트 박스에 글씨 넣기
            $("#pic").attr("src","img/" + wrap5_picA[no]); // 그림 박스에 그림 넣기

        })

 

- 닫기 버튼으로 창 닫기 jQuery 

        $(".wrap5_tv_close").on("click", function() {
            $(".wrap5_tv").hide(); // tv 창 숨기기
        })

 

 

---

 

- 공통 배열

let no;
const popup_picA=["usagi1.jpg","usagi2.jpg","usagi3.jpg","usagi4.jpg","usagi5.jpg"]
const popup_picB=["usagi1.jpg","usagi2.jpg","usagi3.jpg","usagi4.jpg","usagi5.jpg"]
const topicA = [" <strong style='color:#FC85AE;'> 문제해결능력 </strong> 매우 중요합니다.",
"문제 <strong style='color:#FC85AE;'> 아주 2</strong> 중요합니다.",
"문제 <strong style='color:#FC85AE;'> 아주 3</strong> 중요합니다."
];

const topicB = ["파르페","빵","히치하이킹","지하철"]

 

 

- 글씨값 변경  jQuery 

    for (let i  =0; i < topicA.length; i++){
        $(".at"+i+"_text").html(topicA[i]);
    }
    

    for (i = 0; i < topicB.length; i++){
        $("#text"+i).html(topicB[i]);
    }

 

 

- 색상 변경  jQuery

hover 와 다르게 클릭 시 색상이 유지됨 (어떤 걸 선택했는지 확인 가능)

    $("nav div").on("click",function(){
        $("nav div").css("background","#fff");
        $(this).css("background","#fc85af79");  
    })

    $(".listBox li").on("click",function(){

        no=$(this).attr("class"); // 아이디 알아내서 저장하기 
        // this 로 해야 유동값으로 설정된
        no=no.substring(7,8); // 아이디 뒤 알아내기
        // alert(no)
        $(".popup_pic").attr("src","img/"+ popup_picA[no]);

        
        $(".listBox li").css("background","#fff");       
        $(this).css("background","#fc85af79");
        // $(".sec0 .at .listBox .at0_picBox img")css("backgroundImage","");
    })

	$(".at2Box li").on("click",function(){
            $(".at2Box li").css("background","white");
            $(this).css("background","#fc85af79");
            
        })

 

 

- 이미지 넣기  jQuery 

   num = $(".at2Box li div:first-child img").attr("class");
        //num = num.substring(11,12);
        //alert(num);
        for (j= 0 ; j<popup_picB.length; j++){
            $(".listBox_img"+ j).attr("src","img/"+popup_picB[j]);
        }

 

---

 

- 페이지내에서 페이지 여는 방법 (iframe)

           <div class="wrap4_left">
 <!-- javascript -->
               <iframe name="ch" src="" frameborder="0"></iframe>

            </div>

            <div class="wrap4_right">
               <p> 
                  <a href="https://cssgradient.io/" target="ch">
                     CSS
                  </a>
               </p>
               <p>
                  <a href="info.html" target="ch">INFO</a>
               </p>
               <p> <a href="info.html" target="ch">INFO</a></p>
               <p> <a href="info.html" target="ch">정보력</a></p>
               <p> <a href="info.html" target="ch">정보력</a></p>
               <p> <a href="info.html" target="ch">정보력</a></p>
               <p> <a href="info.html" target="ch">정보력</a></p>
   
            </div>