본문 바로가기
풀스택/jQuery

jQuery요약 2 ex20~36(append,prepend)

by woohyun22 2019. 2. 12.

ex20(데이터 추가 ,append,prepend )


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(function(){
    setTimeout(function(){
    $("#p1").html( "<strong>가나다라마바사아자차카타라하</strong>" );
    
    // 1. 데이터 가져오기
    // ajax...
    
    
    // 2.html 만들기(render)
    var htmls = "<li>"+"메세지4" + "</li>";
    
    // 3. 추가하기
    //$("#gb-list").html(htmls);
    $("#gb-list").append(htmls);
    $("#gb-list").prepend(htmls);
    
    },1000);
});
</script>
</head>
<body>
    <p id="p1"> 이 안에 HTML를 바꿉니다.</p>
    <ul id="gb-list">
        <li>메시지1</li>
        <li>메시지2</li>
        <li>메시지3</li>
    </ul>
cs



ex22(prepend쓰는법)


1
2
3
4
5
6
$(function() {
        /* 코드를 완성하세요 */
        setTimeout(function() {
            $("#p1").prepend("<strong>가나다라</strong>");
        }, 1000);
    });
cs



ex24(before,after 앞뒤로 문자열 옮기기)


1
2
3
4
5
6
$(function() {
        /* 코드를 완성하세요 */
        setTimeout(function() {
            $("#p1").before("<h1>타이틀입니다.</h1>");
        }, 1000);
    });
cs



ex26(prependTo, appendTo) a to b  - a를 b 앞으로보내다.


1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
    /* 코드를 완성하세요 */
    setTimeout(function() {
        $("#p2 strong").prependTo("#p1");
    }, 1000);
});
</script>
</head>
<body>
    <p id="p1">EFGHIJKLMNOPQRSTUVWXYZ</p>
    <p id="p2">
        <strong>ABCD</strong>efghijklmnopqrstuvwxyz
cs



ex28(insert, before after )


1
2
3
4
5
6
$(function() {
    /* 코드를 완성하세요 */
    setTimeout(function() {
        $("p").insertAfter("h1");
    }, 1000);
});
cs



ex30(wrap 태그를 태그로 감싸준다? 바꿔준다.) - parent는 값이 아니고, css 바꿔줄떄 사용 ////parent 자세히 다시


1
2
3
4
5
6
7
8
9
$(function() {
        /* 코드를 완성하세요 */
        setTimeout(function() {
            $(".d1").wrap("<h1>");
            $(".d2").wrap("<h2>").
            parent().
            css("padding-left","20px");
        },1000);
    });
cs




ex31(wrapAll) - wrap시 보이진않지만 f12로 보면 바뀐다. 내용까지 바뀌어서 출력


1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
        /* 코드를 완성하세요 */
        setTimeout(function() {
            $("strong,p").
            wrapAll("div").
            parent().
            css({
                "border":"1px solid #999",
                "padding" : "10px",
                "width" : "200px"
            });
        }, 1000);
    });
cs



ex32(replaceWith) - 괄호안의 것으로 바꿔줌


1
2
3
4
5
6
7
$(function() {
        /* 코드를 완성하세요 */
        setTimeout(function() {
            //cf.html()
            $("p").replaceWith("<h1>변경후</h1>");
        }, 1000);
    });
cs



ex33(add, remove 삭제)


1
2
3
4
5
6
$(function() {
        setTimeout(function() {
            /* 코드를 완성하세요 */
            $("li:nth-child(3),li:nth-child(5)").remove();
        }, 1000);
    });
cs



ex34(attr 속성값 변경, 속성값 적용) - 다시 보기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
        /* 코드를 완성하세요 */
        $("h1 a").attr({
            "href" : "http://www.douzone.com",
            "target" : "_blank",
            "title" : "우리회사 홈페이지"
        });
        
        $("a:link, a:visited, a:active , a:hover").css({
            textDecoration : "none",
            color :"#333",
            font : "0.75em"
        });
        console.log($("h1 a").attr("href"));//읽기
    });
cs



ex35(위에서 html로 설정을 해주고 jquery에서는 값을 넣어주기만 한다.) 선택이라기 보다는 색깔만 바뀐다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
li.on {
    background-color: #287FC2;
    color: #fff
}
</style>
<script type="text/javascript" src="./jquery/jquery-1.9.0.js"></script>
<script type="text/javascript">
    $(function() {
 
        /* 코드를 완성하세요 */
        $("ul li").mouseover(function(){
            //이벤트 핸들러 안에서 this는 HTMLElement 객체다.
            //따라서 jQuery API를 사용하기 위해서는 $() 래핑을 한다.
            //this.css()
            //$(this).css({
            //    backgroundColor : "#287fc2",
            //    color : "#fff"
            //});
            $(this).addClass("on");
            //이렇게 바꿔주면 디자이너가 on class만 바꾸면된다.
            //li.on을 사용한다.
        })
        .mouseout(function(){
            /* $(this).css({
                backgroundColor : "#fff",
                color : "#333"
            }); */
            $(this).removeClass("on");
        });
    });
cs



ex36()



728x90

'풀스택 > jQuery' 카테고리의 다른 글

jquery전 ajax 정의  (0) 2019.04.17
jqery 활용 mysite2에 적용시키기 -보충  (0) 2019.02.14
jQuery 요약1 ex1~20(#, '.' , .text , if조건주는것)  (0) 2019.02.12

관련글

댓글

티스토리툴바