VS code-JQuery

최성현·2023년 7월 24일

:eq()append body전체 click copy first/last gt()/lt()html text 값 얻기 모든 태그

JQuery

목록 보기

2/7

같은 태그 선택

body 전체 변경

//바디 전체 글꼴 변경
$("body*").css("font-family","궁서체");

모든 태그 변경

//모든 b태그 글자색 변경
$("b").css("color","magenta");

eq()

eq(0) - index 시작 0번부터 1개만 지정

방법1

$("b:eq(1)").css("background-color","orange");//방법1 //1번 인덱스 변경

방법2

$("b").eq(2).css("background-color","pink");//방법2 //2번 인덱스 변경

first/last

전체 중복 태그 중 제일 처음

$("b:first").css("border","2px solid red");

전체 중복 태그 중 제일 마지막

$("b:last").css("border","4px dotted green");

gt()/lt()

해당번호 제외 이전 이후 변경

gt() : 해당 번호 이후 / 크다

$("b:gt(1)").css("font-size","30px"); //2번 인덱스부터 모두 변경

lt() : 해당 번호 이전 / 작다

$("b:lt(2)").css("background-color","black"); //1번 인덱스 이전 모두 변경

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <script>
        $(function(){

            //attr("속성"): 해당 속성 값 반환
            //attr("속성","값"): 해당 속성 값으로 변경
            //eq(0): 0번 인덱스, 첫 번째 의미

            //alert("처음 로딩시 호출!!!!");

            //방법1
            //$("#happy").css("color","red");
            //$("#happy").css("background-color","yellow");
            
            //방법2
            //위의 것을 한 줄로
            $("#happy").css({
                "color":"orange",
                "background-color":"gray",
                "width":"300px",
                "border":"2px solid green"
            });

            //selector가 복잡할 경우에도 간단 처리
            $("div.hello>div").css({
                "font-size":"3em",
                "color":"blue",
                "font-weight":"bold"
            });

            //happy의 배경색을 얻어서 div.hello의 글자색으로 적용
            var bg=$("#happy").css("background-color");
            $("div.hello").css("color",bg);

            //bts 아래 이미지 가로 150px로 변경
            $("div.bts>img").css("width","150px");

            //hello클래스 아래 이미지도 가로 200
            $("div.hello>img").css("width","200px");

            //바디 전체 글꼴 변경
            $("body*").css("font-family","궁서체");

            //bts div 전체 속성을 변경, 위치 이동
            $("div.bts").css({
                "position":"absolute",
                "left":"300px",
                "top":"400px",
                "width":"300px",
                "height":"250px",
                "border":"3px groove gold"
            });

            //모든 b태그 글자색 변경
            $("b").css("color","magenta");

            //b태그 중에서 1번, 2번 인덱스만 변경
            //eq(0)부터 시작 / body에 제일 처음 쓴 것이 0번
            $("b:eq(1)").css("background-color","orange");//방법1 //1번 인덱스 변경
            $("b").eq(2).css("background-color","pink");//방법2 //0번 인덱스 변경

            //전체 b태그 중 첫번째 마지막
            $("b:first").css("border","2px solid red");
            $("b:last").css("border","4px dotted green");

            // gt(3):3번 이후 lt(3):3번 이전 //gt 크거나 같다 lt 작거나 같다
            // 해당번호 제외 이전 이후 변경
            $("b:gt(1)").css("font-size","30px"); //2번 인덱스부터 모두 변경
            $("b:lt(2)").css("background-color","black"); //1번 인덱스 이전 모두 변경
        });
    </script>
</head>
<body>
    <div class="hello">
        div class hello
        <div>
            div hello 아래 div
        </div>
    </div>
    <div class="bts">
        <b>div bts 아래 b태그</b>
        <img src="../연예인사진/19.jpg">
    </div>
    <div class="hello">
        div class hello2
        <img src="../연예인사진/15.jpg">
        <div>div hello 아래의 div 태그</div>
    </div>
    <b>단독 b태그#1</b>
    <b>단독 b태그#2</b>
    <b>단독 b태그#3</b>
    
    <h2 id="happy">h2 is happy</h2>
    <h3 class="happy2">h3 class happy2</h3>
</body>
</html>

같은 태그 선택

html()

자바스크립트의 innerHTML()에 해당

$("h2").eq(0).html("<b>H2태그입니다</b>");
$("h2:eq(0)").html("<b>H2태그입니다</b>");
$("h2:first").html("<b>H2태그입니다</b>");
$("h2").first().html("<b>H2태그입니다</b>");

//h2마지막 태그에 html로 넣고 css(글꼴색)
$("h2:last").html("<b>마지막 H2태그입니다</b>").css("color","cadetblue");//eq(2)도 됨

text()

자바스크립트의 innerText()에 해당

//h2태그중에서 2번째에 text로 2번째h2태그입니다
$("h2:eq(1)").text("<b>2번째h2태그입니다</b>");

append

기존값 뒤에 추가하기

$("h2:eq(0)").append("<img src='../flower_ani/f1.png'>");

//3번째 h2태그 뒤에 이미지 추가, 너비,높이 100
$("h2:eq(2)").append("<img src='../연예인사진/19.jpg'>");

//append로 이미지 추가 하고 바로 css하면 해당 태그가 css 먹어서 따로 지정할 태그 정해주고 css 줘야 적용 가능
$("h2:eq(2) img").css({
      "width":"100px",
      "height":"100px"
});

click 이벤트

//첫번째 h2를 클릭시 자기가 가지고 있는 text를 alert에 반환 /무슨 태그인지는 모르고 text값만 나옴
//html()로 반환하면 태그 확인 가능 / 기존과 반대
$("h2:eq(0)").click(function(){
    alert($(this).text());
});

//마지막 h2 클릭시 자신의 html을 경고창에 반환
$("h2:last").click(function(){
    alert($(this).html())
});

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <h4>html(): 자바스크립트의 innerHTML()에 해당</h4>
    <h4>text(): 자바스크립트의 innerText()에 해당</h4>
    <h4>append(): 추가</h4>
    <hr>
    <h2>1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <script>
        //h2중에서 1번째에 html태그 넣기
        //방법 4가지
        //$("h2").eq(0).html("<b>H2태그입니다</b>");
        //$("h2:eq(0)").html("<b>H2태그입니다</b>");
        //$("h2:first").html("<b>H2태그입니다</b>");
        $("h2").first().html("<b>H2태그입니다</b>");

        //h2태그중에서 2번째에 text로 2번째h2태그입니다
        $("h2:eq(1)").text("<b>2번째h2태그입니다</b>");

        //h2마지막 태그에 html로 넣고 css(글꼴색)
        $("h2:last").html("<b>마지막 H2태그입니다</b>").css("color","cadetblue");//eq(2)도 됨

        //append는 기존값 뒤에 추가하기
        $("h2:eq(0)").append("<img src='../flower_ani/f1.png'>");

        //3번째 h2태그 뒤에 이미지 추가, 너비,높이 100
        $("h2:eq(2)").append("<img src='../연예인사진/19.jpg'>");

        //append로 이미지 추가 하고 바로 css하면 해당 태그가 css 먹어서 따로 지정할 태그 정해주고 css 줘야 적용 가능
        $("h2:eq(2) img").css({
            "width":"100px",
            "height":"100px"
        });

        //이벤트
        //첫번째 h2를 클릭시 자기가 가지고 있는 text를 alert에 반환 /무슨 태그인지는 모르고 text값만 나옴
        //html()로 반환하면 태그 확인 가능 / 기존과 반대
        $("h2:eq(0)").click(function(){
            alert($(this).text());
        });

        //마지막 h2 클릭시 자신의 html을 경고창에 반환
        $("h2:last").click(function(){
            alert($(this).html())
        });
    </script>
</body>
</html>

Copy

click이벤트로 copy

//h3.a를 클릭시 "안의 코드 복사함"라고 나오게 한 후
$("h3.a").click(function(){

// var를 지워서 전역변수로 사용
	tag=$(this).html(); //코드 복사 (html()하면 태그까지 복사하기 때문)
    alert("안의 코드 복사함");
});

//h3.b를 클릭시 위의 내용이 그대로 복사되도록
$("h3.b").click(function(){
            
	// 변수에 var를 지우고 전역변수화해서 사용
    //$(this).html(tag); //일회용 복사추가
      $(this).append(tag); //재사용 가능한 복사추가
});

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <h3 class="a"></h3>
    <hr>
    <h3 class="b">h3 내용을 이곳에 복사하세요</h3>

    <script>
        $("h3.a").html("꽃 이미지 입니다").append("<img src='../flower_ani/f1.png'>");

        //h3.a를 클릭시 "안의 코드 복사함"라고 나오게 한 후
        $("h3.a").click(function(){

            // var를 지워서 전역변수로 사용
            tag=$(this).html(); //코드 복사 (html()하면 태그까지 복사하기 때문)
            alert("안의 코드 복사함");

        });
        //h3.b를 클릭시 위의 내용이 그대로 복사되도록
        $("h3.b").click(function(){
            
            // 변수에 var를 지우고 전역변수화해서 사용
            //$(this).html(tag); //일회용 복사추가
            $(this).append(tag); //재사용 가능한 복사추가
        });
    </script>
</body>
</html>

값 얻기

click이벤트로 값 얻기

$("img").click(function(){

            //값들 얻기
            var selSrc=$(this).attr("src");
            var selW=$(this).attr("width");
            var selTit=$(this).attr("title");

            //사진넣기
            var copyImg="<img src='"+selSrc+"' width='"+selW+"''>";
            $("hr").after(copyImg);

            //타이틀 카피해서 div에 1번만 넣기(글자크기)
            $("div").html(selTit).css({
                "font-size":"3em",
                "font-weight":"bold"
            });
        });

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <h3>이미지 클릭시 src,width를 얻어서 hr태그 다음에 같은 이름의 이미지 넣기</h3>
    <img src="../연예인사진/15.jpg" width="200" title="나는 수지!!!">
    <hr>
    <div></div>

    <script>
        $("img").click(function(){

            //값들 얻기
            var selSrc=$(this).attr("src");
            var selW=$(this).attr("width");
            var selTit=$(this).attr("title");

            //사진넣기
            var copyImg="<img src='"+selSrc+"' width='"+selW+"''>";
            $("hr").after(copyImg);

            //타이틀 카피해서 div에 1번만 넣기(글자크기)
            $("div").html(selTit).css({
                "font-size":"3em",
                "font-weight":"bold"
            });
        });
    </script>
</body>
</html>

copy 문제

Q.세개의 이미지에 마우스를 올리면 다른 사진으로 바뀌며
마우스가 벗어나면 원래 이미지로 돌아가게 하세요

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
</head>
<body>
    <h3>Q.세개의 이미지에 마우스를 올리면 다른 사진으로 바뀌며<br>
            마우스가 벗어나면 원래 이미지로 돌아가게 하세요</h3>
    <img src="../flower_ani/f17.png" width="150">
    <img src="../flower_ani/f18.png" width="150">
    <img src="../flower_ani/f19.png" width="150">

    <script>

        //방법1

        // $("img:eq(0)").mouseover(function(){
        //     $("img:eq(0)").attr("src","../연예인사진/15.jpg");
        // });

        // $("img:eq(1)").mouseover(function(){
        //     $("img:eq(1)").attr("src","../연예인사진/15.jpg");
        // });

        // $("img:eq(2)").mouseover(function(){
        //     $("img:eq(2)").attr("src","../연예인사진/15.jpg");
        // });

        // $("img:eq(0)").mouseout(function(){
        //     $("img:eq(0)").attr("src","../flower_ani/f17.png");
        // });

        // $("img:eq(1)").mouseout(function(){
        //     $("img:eq(1)").attr("src","../flower_ani/f18.png");
        // });
        
        // $("img:eq(2)").mouseout(function(){
        //     $("img:eq(2)").attr("src","../flower_ani/f19.png");
        // });

        //방법2

        // $("img:eq(0)").mouseover(function(){
        //     $("img:eq(0)").attr("src","../연예인사진/15.jpg");
        // })

        // $("img:eq(1)").mouseover(function(){
        //     $("img:eq(1)").attr("src","../연예인사진/15.jpg");
        // });

        // $("img:eq(2)").mouseover(function(){
        //     $("img:eq(2)").attr("src","../연예인사진/15.jpg");
        // });
        
        // $("img:lt(3)").mouseout(function(){
        //     $("img:eq(0)").attr("src","../flower_ani/f17.png");
        //     $("img:eq(1)").attr("src","../flower_ani/f18.png");
        //     $("img:eq(2)").attr("src","../flower_ani/f19.png");
        // });

        //방법3

        $("img").mouseover(function(){
            imgsrc=$(this).attr("src");
            $(this).attr("src","../연예인사진/15.jpg");
        });

        $("img").mouseout(function(){
            $(this).attr("src",imgsrc);
        });
    </script>
</body>
</html>

최성현

백엔드 개발자로서 성장해 나가는 성현이의 블로그~

이전 포스트

VS code-JQuery

다음 포스트

VS code-JQuery

1개의 댓글

happy

2023년 7월 24일

잘 읽었습니다. 좋은 정보 감사드립니다.

답글 달기