VS code-JQuery

최성현·2023년 7월 24일
addClass("클래스명")afterattr()each문findhtmlnextprev()removeClassremoveClass("클래스명")texttoggle("클래스명")width속성
1

JQuery

목록 보기
3/7

class - jquery문

많이 쓰임

기본 정리

addClass("클래스명") : 클래스 추가
removeClass("클래스명") : 클래스 제거
removeClass() : 모든 클래스 제거
toggle("클래스명") : 클래스추가+제거 번갈아가며 실행

마우스 이벤트 적용

//첫이미지에 마우스올리고 벗어날때 이벤트
            $("img:eq(0)").hover(function(){
                $(this).addClass("select");
            },function(){
                $(this).removeClass("select");
            });
//2번째 toggle로 적용 //==onmouseover+onmouseout
            $("img:eq(1)").hover(function(){
                $(this).toggleClass("select");
            });
//bs(bootstrap)의 class추가
            $("img:eq(2)").hover(function(){
                $(this).toggleClass("rounded-circle img-thumbnail");
            });

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        .select{
            border: 10px inset gray;
            border-radius: 30px 50px 20px 80px;
            box-shadow: 5px 5px 5px gray;
            cursor: pointer;
            margin: 50px 50px;
        }
    </style>
    <script>
        $(function(){

            //많이 쓰임
            
            //addClass("클래스명")   : 클래스 추가
            //removeClass("클래스명")   : 클래스 제거
            //removeClass()   : 모든 클래스 제거
            //toggle("클래스명")    : 클래스추가+제거 번갈아가며 실행
            
            //첫이미지에 마우스올리고 벗어날때 이벤트
            $("img:eq(0)").hover(function(){
                $(this).addClass("select");
            },function(){
                $(this).removeClass("select");
            });

            //2번째 toggle로 적용 //==onmouseover+onmouseout
            $("img:eq(1)").hover(function(){
                $(this).toggleClass("select");
            });

            //bs(bootstrap)의 class추가
            $("img:eq(2)").hover(function(){
                $(this).toggleClass("rounded-circle img-thumbnail");
            });
        });
    </script>
</head>
<body style="background-color: black;">
    <h3 class="alert alert-danger">마우스를 올리면 클래스 추가, 벗어나면 제거</h3>
    <img src="../연예인사진2/다운로드 (14).jpeg"><br><br>
    <img src="../연예인사진2/images (2).jpeg"><br><br>
    <img src="../연예인사진2/images (10).jpeg"><br><br>
</body>
</html>

class - jequery문 문제

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        .lunch{
            width: 200px;
            height: 200px;
            border: 10px dashed purple;
            background-image: url("../연예인사진2/images\ \(8\).jpeg");
            background-size: 30px 30px;
        }
    </style>
</head>
<body>
    <h3>addClass,removeClass,toggleClass 연습</h3>
    <button type="button" class="btn btn-info" id="btn1">스타일 추가</button>
    <button type="button" class="btn btn-success" id="btn2">스타일 제거</button>
    <button type="button" class="btn btn-danger" id="btn3">스타일 추가/제거</button>
    <div></div>

    <script>
        $("#btn1").click(function(){
            $("div").addClass("lunch");
        });

        $("#btn2").click(function(){
            $("div").removeClass("lunch");
        });

        $("#btn3").click(function(){
            $("div").toggleClass("lunch");
        });
    </script>
</body>
</html>

attr

width

attr/css 모두 값 가져올 수 있음

mouseover 사용

//모든 img태그에 마우스를 올리면 src변경
            $("img").mouseover(function(){
                
                imgName=$(this).attr("src");
                $(this).attr("src","../Food/10.jpg");
            });

mouseout 사용

//마우스 벗어나면 원래 사진으로 돌아가기
            $("img").mouseout(function(){
                $(this).attr("src",imgName);
            });

hover 사용

//h3 _ hover이용해서 배경색 변경
            $("h3").hover(function(){
                $(this).css("background-color","red");
            },function(){
                $(this).css("background-color","white");
            });

click 사용

//0번 이미지를 클릭하면 2번 img의 src에 같은 이미지 넣기
            // width는 attr,css 둘 다 적용 가능
            $("img:eq(0)").click(function(){
                var imgImi=$(this).attr("src");
                var imgW=$(this).attr("width");
                $("img:eq(2)").attr({
                    "src":imgImi,
                    "width":imgW
                });

after

특정 태그 이후 추가

-append와의 차이점 - after는 태그 이후 추가/append는 태그 안에 추가

next()

다음태그

prev()

이전태그

html()

js의 innerHTML

text()

js의 innerText

after문 사용 코드

//irum속성 얻어서 2번 img다음에 b태그로 넣기
            //after: 특정태그 이후 추가
            //append: 특정태그 안에 추가
            var irum=$(this).attr("irum");
            $("img:eq(2)").after("<b>"+irum+"</b><br>");

            });

            //figure 아래 img를 클릭하면 아래 사진 4개에 나타나게 하시오
            $("figure>img").click(function(){
                var f1=$(this).attr("src");
                $("img:gt(2)").attr("src",f1);


                //클릭한 이미지 다음 태그 안의 text를 얻어서 2번째 h3에 넣기
                //next() : 다음태그
                //prev() : 이전태그
                //html() : js 의 innerHTML
                //test() : js 의 innerText
                var fooName=$(this).next().text();
                $("h3:eq(1)").text(fooName);
                
            });

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <script>
        $(function(){

            //모든 img태그에 마우스를 올리면 src변경
            /*$("img").mouseover(function(){
                
                imgName=$(this).attr("src");
                $(this).attr("src","../Food/10.jpg");
            });

            //마우스 벗어나면 원래 사진으로 돌아가기
            $("img").mouseout(function(){
                $(this).attr("src",imgName);
            });*/

            //h3 _ hover이용해서 배경색 변경
            $("h3").hover(function(){
                $(this).css("background-color","red");
            },function(){
                $(this).css("background-color","white");
            });

            //0번 이미지를 클릭하면 2번 img의 src에 같은 이미지 넣기
            // width는 attr,css 둘 다 적용 가능
            $("img:eq(0)").click(function(){
                var imgImi=$(this).attr("src");
                var imgW=$(this).attr("width");
                $("img:eq(2)").attr({
                    "src":imgImi,
                    "width":imgW
                });

            //irum속성 얻어서 2번 img다음에 b태그로 넣기
            //after: 특정태그 이후 추가
            //append: 특정태그 안에 추가
            var irum=$(this).attr("irum");
            $("img:eq(2)").after("<b>"+irum+"</b><br>");

            });

            //figure 아래 img를 클릭하면 아래 사진 4개에 나타나게 하시오
            $("figure>img").click(function(){
                var f1=$(this).attr("src");
                $("img:gt(2)").attr("src",f1);


                //클릭한 이미지 다음 태그 안의 text를 얻어서 2번째 h3에 넣기
                //next() : 다음태그
                //prev() : 이전태그
                //html() : js 의 innerHTML
                //test() : js 의 innerText
                var fooName=$(this).next().text();
                $("h3:eq(1)").text(fooName);
                
            });

            
        });
    </script>
</head>
<body>
    <!-- 정해직 속성아니어도 임의로 만들면 속성값을 가져올수 있다 -->
    <img src="../연예인사진2/냥뇽녕냥13.jpeg" width="100" irum="냥뇽녕냥">
    <h3>이미지 속성 변경하기</h3>
    <hr>
    <figure>
        <img src="../Food/1.jpg">
        <figcaption>샌드위치</figcaption>
    </figure>
    <figure>
        <img src="../Food/11.jpg">
        <figcaption>망고빙수</figcaption>
    </figure>

    <h3>figure 아래 이미지 클릭하면 여기 아래 이미지가 바뀝니다</h3>
    <img src="" alt="사진1" width="100">
    <img src="" alt="사진2" width="100">
    <img src="" alt="사진3" width="100">
    <img src="" alt="사진4" width="100">
</body>
</html>

attr 문제

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <script>
        $(function(){

            //h3아래 b태그 글자색 배경 변경
            $("h3 b").css({

                "color":"blue",
                "background-color":"cadetblue"
            });

            //h3아래 span도 글자체나 글자색 알아서 변경
            $("h3 span").css({
                
                "color":"cadetblue",
                "font-family":"Cute Font"
            });

            //이벤트 : 음식명 누르면
            //span에 있는 경로가 img에 음식명은 맨아래 h3에 나오게 출력
            $("h3 span").click(function(){
                var text=$(this).prev().prev().text();
                $("h3:eq(3)").text(text);
                
                var span=$(this).text();
                $("img").attr("src",span);
            });

            $("h3 b").click(function(){
                var text=$(this).text();
                $("h3:eq(3)").text(text);
                
                var span=$(this).next().next().text();
                $("img").attr("src",span);
            });
        })
    </script>
</head>
<body>
    <h3>
        <b>샌드위치</b>
        <br>
        <span>../Food/1.jpg</span>
    </h3>

    <h3>
        <b>숯불꼬치구이</b>
        <br>
        <span>../Food/2.jpg</span>
    </h3>

    <h3>
        <b>토마토에그모짜</b>
        <br>
        <span>../Food/12.jpg</span>
    </h3>

    <hr>
    <img src="" class="photo"> <!-- 위에 span 태그에 있는 이미지 띄울 것-->
    <br>
    <h3></h3> <!-- 요기에 b태그에 있는 음식명 출력 -->
</body>
</html>

each문

b태그 갯수만큼 자동 반복
i는 index: 0부터
element는 인덱스에 해당하는 태그(생략가능)

사용법

//$("b").each(function(index i,b태그를 가르키는 element(element는 안써도 됨)){
$("b").each(function(i,elt){
	//$(elt).text(i); //b태그 0~5까지 반복
      $(this).text(i);
});

each문 사용 2가지 방법

방법1

$("ul li").each(function(idx){
     $(this).addClass("bg_"+idx);
}); 밑이랑 똑같음

방법2

$("ul li").each(function(idx,ele){
	$(ele).addClass("bg_"+idx);
});

find문

하위 태그 중에서 find로 찾는 태그를 찾는다

$("ul li").mouseout(function(){

	//현재 이벤트가 발생하는데 li태그의 다음 태그를 제거
    //$(this).next().remove();

   	//find: 하위 태그 중에서 find로 b태그를 찾는다
    $(this).find("b").remove();
    //==$("ul li b").remove();
});

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        .bg_0{background-color: aqua; color: black;}
        .bg_1{background-color: blueviolet; color: white;}
        .bg_2{background-color: blue; color: lightgray;}
        .bg_3{background-color: brown; color: white;}
        .bg_4{background-color: cadetblue; color: white;}
        .bg_5{background-color: magenta; color: gray;}
    </style>
</head>
<body>
    <!-- 태그 반복할 때 사용하는 each문 -->
    <b></b><b></b><b></b><b></b><b></b><b></b>
    <script>
        //b태그 갯수만큼 자동 반복
        //i는 index: 0부터
        //element는 인덱스에 해당하는 b 태그(생략가능)
        //$("b").each(function(index i,b태그를 가르키는 element(element는 안써도 됨)){
        $("b").each(function(i,elt){
            //$(elt).text(i); //b태그 0~5까지 반복
            $(this).text(i);
        });
    </script>
    <hr>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>키위</li>
        <li>오렌지</li>
        <li>포도</li>
        <li>자몽</li>
    </ul>
    <script>
        // $("ul li").each(function(idx){
        //     $(this).addClass("bg_"+idx);
        // }); 밑이랑 똑같음
        $("ul li").each(function(idx,ele){
            $(ele).addClass("bg_"+idx);
        });

        //append    &   after
        $("ul li").mouseover(function(){

            $(this).append("<b>***</b>");
        });

        $("ul li").mouseout(function(){

            //현재 이벤트가 발생하는데 li태그의 다음 태그를 제거
            //$(this).next().remove();

            //find: 하위 태그 중에서 find로 b태그를 찾는다
            $(this).find("b").remove();
            //==$("ul li b").remove();
        });
    </script>
</body>
</html>

addClass 문제

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            font-size: 13pt;
            margin-bottom: 10px;
        }
        .hello_0{
            border: 10px groove orange;
            font-family: 'Cute Font';
            background-color: bisque;
            color: brown;
        }
        .hello_1{
            border: 10px groove green;
            font-family: 'Diphylleia';
            background-color: pink;
            color: black;
        }
        .hello_2{
            border: 10px groove gray ;
            font-family: 'Dokdo';
            background-color: cyan;
            color: white;
        }
        .hello_3{
            border: 10px groove magenta;
            font-family: 'Cute Font';
            background-color: gray;
            color: chartreuse;
        }
        .hello_4{
            border: 10px groove black;
            font-family: 'Cute Font';
            background-color: lightblue;
            color: gray;
        }

    </style>
    <script>
        $(function(){
            //적용버튼 누르면 모든 div에 인덱스별로 클래스가 적용된다
            $("button:eq(0)").click(function(){
                $("div").each(function(idx){
                    $(this).addClass("hello_"+idx);
                });
            }); 
            
            //제거 누르면 인덱스별 적용된 클래스가 제거된다
            $("button:eq(1)").click(function(){
                $("div").each(function(idx){
                    $(this).removeClass("hello_"+idx);
                });
                // each문 안써도 $("div").removeClass(); 모두 제거
            }); 
        })

    </script>
</head>
<body>
    <button type="button" class="btn btn-outline-info">스타일 적용</button>
    <button type="button" class="btn btn-outline-danger">스타일 제거</button>

    <div>안녕하세요</div>
    <div>오늘은 JQuery</div>
    <div>반복문과 addClass를</div>
    <div>배우고 있어요</div>
    <div>화이팅!!!</div>
</body>
</html>

0724 숙제

코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        .sty{
            border: 3px groove green;
            border-radius: 10px;
            box-shadow: 5px 5px 5px gray;
        }
    </style>
    <script>
        /*  1.스타일 시트에 클래스 하나 만들기: 보더 둥글게,섀도우(css)
            밑 부터 script
            2.작은이미지 사진에 쇼핑몰사진 1~10까지 차례대로넣기(each)
            3.작은사진 너비,높이,보더 예쁘게 주기
            4.큰사진도 알아서 스타일시트 예쁘게 주기
            5.이벤트 : 작은 이미지에 마우스를 올리면 큰 사진에 나오게 한다
            (작은 이미지에 마우스 올리면 1의 addClass 주고 벗어나면 원래대로) */
            $(function(){
                $("img:lt(9)").each(function(idx){
                    $(this).attr({
                        "src":"../쇼핑몰사진/"+(idx+1)+".jpg",
                        "width":"100"
                    });
                });

                $("img:last").attr("width","300").css({
                    "border":"3px groove gray",
                    "border-radius":"10px",
                    "box-shadow":"5px 5px 5px gray"
                });

                $("img:lt(9)").mouseover(function(){
                    
                    $(this).addClass("sty");

                    var sml=$(this).attr("src");
                    $("img.large").attr("src",sml);
                });

                $("img:lt(9)").mouseout(function(){

                    $(this).removeClass();
                });
            });

    </script>
</head>
<body>
    <h3>0724과제물_10개이상의 이미지태그에 each문으로 사진 넣기</h3>
    <img src="" class="small">
    <img src="" class="small">
    <img src="" class="small">
    <img src="" class="small">
    <img src="" class="small">
    <img src="" class="small">
    <img src="" class="small">
    <img src="" class="small">
    <img src="" class="small">
    <br><br>
    <img src="" class="large">
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

VS code-JQuery

다음 포스트

VS code-JQuery

0개의 댓글