본문 바로가기
코리아 IT아카데미/Javascript·Jquery~~~

3일차 | Jquery(가로메뉴, 마우스 hover, 선택자, 제이쿼리 함수)

by Sharon kim 2022. 3. 16. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script> 

    <style>
        /* 기본스타일 */
        *{margin: 0; padding: 0; border: 0; list-style: none;}

        /* 레이아웃스타일 */
        #menu{ width: 500px; height: 25px;  border: 1px solid #ccc;}
        #menu > ul > li{ float: left; width: 100px; text-align: center; line-height: 25px;}
        #menu ul.sub{ width: 100px; border: 1px solid #ccc; box-sizing: border-box;}
        #menu ul.sub > li{border-bottom: 1px solid #ccc;}
    </style>
    </head>
<body style="height: 5000px;">
   
    <nav id="menu">
        <ul>
            <li>menu
                <ul class="sub">
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                </ul>
            </li>
            <li>menu
                <ul class="sub">
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                </ul>
            </li>
            <li>menu
                <ul class="sub">
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                </ul>
            </li>
            <li>menu
                <ul class="sub">
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                </ul>
            </li>
            <li>menu
                <ul class="sub">
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                    <li>s_mn</li>
                </ul>
            </li>
        </ul>
    </nav>
    <script>  
        $(document).ready(function(){
           //$(".sub").css({display:"none"});
           $(".sub").hide();

        $("#menu > ul > li").hover(
            function(){
              //$(this).find(".sub").show(1000);
               //$(".sub").css({display:"block"});  
               //제이쿼리에서 애니메이션 시간 1000이 1초를 의미
               //$(this).find(".sub").fadeIn(1000);
               //$(this).find(".sub").slideDown(700);
               $(this).find(".sub").stop().show().css({opacity:"0"}).animate({opacity:"1"},1000);
            },
            function(){
              //$(this).find(".sub").hide(500);
               //$(".sub").css({display:"none"});
               //$(this).find(".sub").fadeOut(500);
               //$(this).find(".sub").slideUp(700);
               $(this).find(".sub").stop().css({opacity:"1"}).animate({opacity:"0"},1000);
            }
        );

         
        });
    </script>
    
  
</body>
</html>
제이쿼리 함수
 
         1. 크로스브라우징
            자바스크립트 -> 플래시 -> 제이쿼리 -> 동영상(html5)
         2. 코드 간단. 대상을 선택이 직관적(스타일시트 선택자, html태그명)
         3. 기본적으로 적게 쓰고 간단하지만 극대화
         4. DOM(Document Object Model) html문서의 구조를 기본해서 작업

                     header  logo
                             info_mn
                             main_nav

         #wrap       main_im 이미지1......이미지5

                     contents con1 ,con2, con3, con4


                     footer info_mn
                            address

         제이쿼리기본형식  $(대상).메소드();    
       
         $(이벤트가 일어날 대상).이벤트(function(){
             $(효과가 적용될 대상).메소드();
             $(효과가 적용될 대상).메소드1().메소드2();
         });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
   
</head>
<body>
    <script>
        // 제이쿼리 선택
        $(document).ready(function(){//document 문서 / ready 문서를 읽었다면 이벤트

            //$("ul").css({color:"red"}); //태그명으로 선택
            //$(".li02").css({color:"red"}); // 클래스명으로 선택
            //$("#li03").css({color:"red"}); // 아이디명으로 선택
            $("#list > .li02").css({color:"red"}); //자식선택자로 선택
            $(".li02 + li").css({color:"red"});   //인접형제선택자로 선택
            $(".li02 ~ li").css({color:"red"});   //형제선택자로 선택
            $("#list > li:first").css({color:"red"}); //첫번째 자식요소
            $("#list > li:last").css({color:"red"}); //마지막번째 자식요소
            $("#list > li:nth-child(2)").css({color:"red"}); //몇번째 자식요소
        });
        
    </script>

    <ul id="list">
        <li>1-1-1</li>
        <li class="li02">1-1-2</li>
        <li id="li03">1-1-3</li>
        <li>1-1-4</li>
        <li>1-1-5</li>
    </ul>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
   
</head>
<body>
    <script>
        // 제이쿼리 메소드로 선택
        $(document).ready(function(){
         $("#list li").eq(2).css({color:"red"});    //eq(번째);
         //형제요소를 찾을때는 시작번호가 1부터
         //프로그램 언어는 0부터

         var list_num = $("#li03").index(); //형제들과 비교해서 자신의 인덱스 값을 생성
         console.log(list_num);
        });
        
        //var list_cnt = $("#list li").length// 해당대상의 개수를 추출
        console.log("리스트의개수:" + list_cnt);
    </script>

    <ul id="list">
        <li>1-1-1</li>
        <li class="li02">1-1-2</li>
        <li id="li03">1-1-3</li>
        <li>1-1-4</li>
        <li>1-1-5</li>
    </ul>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
   
</head>
<body>
    <script>
        // 제이쿼리 each문
        $(document).ready(function(){
          $("#list li").each(function(){
              $(this).css({color:"red"});
          });
        });
    </script>
    <!-- each() 메소드를 사용하여 ul엘리먼트 자식엘리먼트를 순환하여 모두 색 적용 -->
    <ul id="list">
        <li>1-1-1</li>
        <li class="li02">1-1-2</li>
        <li id="li03">1-1-3</li>
        <li>1-1-4</li>
        <li>1-1-5</li>
    </ul>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
   
</head>
<body>
    <script>
        // 제이쿼리 each문
        $(document).ready(function(){
            var el = $("#list li");  
            
            el.first().css({color:"red"});
            el.last().css({color:"blue"})
  
        });
    </script>
    <!-- each() 메소드를 사용하여 ul엘리먼트 자식엘리먼트를 순환하여 모두 색 적용 -->
    <ul id="list">
        <li>1-1-1(첫번째 글자색이 red)</li>
        <li class="li02">1-1-2</li>
        <li id="li03">1-1-3</li>
        <li>1-1-4</li>
        <li>1-1-5(마지막 글자색이 blue)</li>
    </ul>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
   
</head>
<body>
    <script>
        // 제이쿼리 위치에 의한 선택 메소드로 
        // next, parent, find, children, is
        $(document).ready(function(){

            //children
            //var el = $("#list").children(); $("#list")의 자식 엘리먼트
            //el.css({color:"red"});

            // next
            //var el = $(".li03").next(); $(".li03")의 다음에 오는 엘리먼트
            //var el = $(".li03").nextAll();
            //el.css({color:"red"});

            //find
            // var el1 = $("#list > li").eq(1).find("ul");
            // var el2 = $("#list > li").eq(1).find(".li2");
            
            // el1.css({color:"red"});
            // el2.css({color:"blue"});

            //is
            //  var el = $("#list > li").eq(1).is(".li2");
            //  if(el){//확인하고
            //     alert('존재합니다');
            //  }else{
            //     alert('존재하지 않습니다');
            //  }


            //parent
            var el = $("#list > li").eq(1).find(".li2");
            el.parent("ul").css({color:"blue"})  // ../비슷하게 이해
        });
    </script>

    <ul id="list">
        <li>1-1-1</li>
        <li>1-1-2
            <ul>
                <li>1-1-2-1</li>
                <li class="li2">1-1-2-2</li>
                <li>1-1-2-3</li>
                <li>1-1-2-4</li>
            </ul>
        </li>
        <li class="li03">1-1-3</li>
        <li>1-1-4</li>
        <li>1-1-5</li>
    </ul>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script> 
</head>
<body style="height: 5000px;">
    <script>
        
        $(document).ready(function(){
            //  $("p").click(function(){
            //      alert("텍스트 선택되었습니다");
            //  });

            //  $(".btn2").dbclick(function(){
            //      alert("텍스트 선택되었습니다");
            //  });

            //******************$(this)예약어 현재 마우스가 이벤트가 적용된 대상을 의미

            // $(".btn3").hover(  
            //     function(){
            //      $(this).css("background-color","yellow");
            //     },//마우스 호버했을때
            //     function(){
            //      $(this).css("background-color","pink");
            //     } //마우스 호버했다가 나갈때
            // );

            // $(".btn3").mouseover(function(){
            //     $(this).css("background-color","yellow");
            // });
            // $(".btn3").mouseout(function(){
            //     $(this).css("background-color","pink");
            // });

            // $(".btn4").mouseenter(function(){
            //     $(this).css("background-color","yellow");
            // });
            // $(".btn4").mouseleave(function(){
            //     $(this).css("background-color","lightblue");
            // });

            // $(document).mousemove(function(event){ //e, event 함수의 매개변수
            //     $("span").text(event.pageX + "," + event.pageY);
            // });


            // $("div").focusin(function(){
            //     $(this).css("background-color","#ffffcc");
            // });
            // $("div").focusout(function(){
            //     $(this).css("background-color","#ffffff");
            // });
 
            $(".btn5").mouseup(function(){
                $(this).after("<p style='color:green'>마우스UP</p>"); 
            });
            $(".btn5").mousedown(function(){
                $(this).after("<p style='color:red'>마우스DOWN</p>");
            });
    
  
            //  하나의 대상에 여러가지 이벤트 적용할 on()메소드를 사용합니다.

        //    $(".btn6").click(function(){
        //     $(this).css("background-color","blue");
        //    });

        //    $(".btn6").mouseover(function(){
        //     $(this).css("background-color","red");
        //    })

             $(".btn6").on({
                click:function(){
                    $(this).css("background-color","blue");
                },
                mouseover:function(){
                    $(this).css("background-color","red"); 
                }
             });
         
        });
    </script>

   <p><b>여기를 클릭해보세요</b></p>
   <p class="btn2"><b>여기를 더블클릭해보세요</b></p>
   <p class="btn3"><b>이곳에 마우스를 가져다 대 보세요</b></p>
   <p class="btn4"><b>마우스의 포인틀르 이곳에 대 보세요</b></p>
   
   <br><br><br><br><br><br>
   
   <p>마우스좌표:<span></span>.</p>

   <br><br><br><br><br><br>

   <div style="border:1px solid #000; padding:10px">
       이름: <input type="text"><br>
       주소: <input type="text">
   </div>
   <p> 텍스트 박스를 클릭하면 focus 얻습니다.
       바깥쪽을 클릭하면 focus를 잃습니다. </p>

    <br><br><br><br><br><br>
    <p class="btn5"><b>여기를 클릭해보세요</b></p>


    <br><br><br><br><br><br>



    <p class="btn6"><b>여기를 클릭하거나 마우스를 오버를 했을때</b></p>

</body>
</html>

'코리아 IT아카데미 > Javascript·Jquery~~~' 카테고리의 다른 글

6일차 | 자동 슬라이드 배너, 자식부모관계, 박스사이즈, 스크롤값, 드래그값  (0) 2022.03.17
5일차 | 기본적인 갤러리, 일반적인 슬라이드 갤러리  (0) 2022.03.17
4일차 | jquery(가로메뉴, 세로메뉴 , 애니메이션, 풀다운 메뉴)  (0) 2022.03.17
2일차 | 반복문, 함수  (0) 2021.12.01
1일차 | 연산자, 조건문  (0) 2021.12.01

관련글

티스토리툴바