記錄

jquery) .each, empty&remove 본문

Web/Jquery

jquery) .each, empty&remove

surhommejk 2018. 3. 16. 10:57

jquery basics






jQuery each


$(function () {

//$(selector).each(function(index){this})
// p태그가 여러 개니까 배열로 가져오고 파라미터가 인덱스로 돈다
// (자바스크립트에서 'var index in ~' 과 유사)
$('p').each(function(index) {
// 인덱스를 파라미터로 설정함으로써 p태그 하나하나 돈다
console.log('index: ' + index);
console.log('this: ' + $(this).text());
// .attr()을 이용해서 하나하나 돌 때에 id 와 같은 attribute 설정 가능
$(this).attr('id','param-' + index); // param-1, param-2, param-3 이 된다
// .attr()을 이용해서 속성을 설정 할 것인데
// 다중으로 한 번에 설정하고자 한다면 jason을 활용
$(this).attr(
{
'id':'param-' + index,
'style':'color:red',
}
);
});
// $(selector).each(function(index,element){element}) 70%
$('p').each(function(index, element) {
console.log('index : ' + index);
// jQuery내에 element를 집어넣어서 해당 element를 모두 돌면서 조작 가능
console.log('element : ' + element + '/' + $(element).text());
});
// Quiz ---------------------------------------------------------------------
var array = [
{"name":"naver" , "link":"www.naver.com"},
{"name":"daum" , "link":"www.daum.net"},
{"name":"bit" , "link":"www.bit.com"}
];
//문제 : name 값 , link 값 을 출력 ()
//$(selector).each(function(index,element){element})
$(array).each(function(index, el) {
document.write(el.name + '/' + el.link + '<br />');
});

// -> 셀렉터 내부에 들어가는 것은 배열로 인식
// (위에서 'p'였던 케이스에도 결국 복수의 'p' 를 선택하게 되므로
배열을 받는다고 인식)
//    그리고 뒤에 오는 element는 셀렉터로 받은 배열의 요소로 인식
//    (돌면서 한 싸이클 마다 셀렉터로 받은 요소를 한 번씩 받아주는 변수 개념)
// Quiz ---------------------------------------------------------------------
/*
$(selector).each(function(){this}) : body 안에 있는 태그 정보
$.each(selector , function(){this}) : script 내부에 있는 자원(배열 ,객체)

★★★ 정해진건 아니지만 하다보면 저렇게 쓰게 된다고 하심 ★★★

*/
var board = {
values:[
{no:1,title:'hello'},
{no:2,title:'world'},
{no:3,title:'korea'}
],
search:"검색"
}

//$.each() 을 사용해서 no 값 , title 값을 출력하세요

$(board.values).each(function(index, el) {
// $.each(board.values, function(index, el) {
document.write(el.no + '/' + el.title + '<br />');
});
// -> script 내에 변수에 접근할 때에는 선택자 내부여도 ''가 없어야 한다
// -> 선택자 내에 배열이 들어갔으므로 index로 돈다!!
// ***********************************************************************
//      cf)
// 선택자로 잡힌 대상에 따라 each로 도는 방식이 다르다!!
//
//      정리!!!!
//      선택자로 잡힌 대상이 array 면? index, element 로 회전
//      선택자로 잡힌 대상이 jason 객체면? key, value 로 회전
// ***********************************************************************
// Quiz ---------------------------------------------------------------------
//$.each() 문을 통해서 no , title , search 값을 출력하세요
//hint) javascript typeof 함수 활용
//hint) $.each(){ $.each(){ } } 중첩 each 가능
/*
var board = {
values:[
{no:1,title:'hello'},
{no:2,title:'world'},
{no:3,title:'korea'}
],
search:"검색"
}
*/
$.each(board,function(key,value){
// 파라미터로 잡았던 value
// object 에 jason object가 속하니까 잡히게 된다
if(typeof(value) == "object"){
// 이제 선택자로 잡힌 대상은 board.values 전체 = 즉, '배열' 이다
$.each(value,function(index, obj){
console.log("index : " + index + "-" + obj.no + ":" +obj.title)
});
//
}else{
console.log("key : " + key);
console.log("text : " + value);
}
});
});










empty & remove


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        table, tr, th ,td{
            border: 1px solid blue;
            border-collapse: collapse;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
    <script type="text/javascript">


// 행, 열 입력받아서 table 만드는 소스

    
    $(document).ready(function(){
            $('#btncreate').click(function(){
                var row = $('#row').val();
                var col = $('#col').val();

                var strtable = "<table>";
                    for(var i = 0 ; i < row ; i++){
                        strtable+="<tr>"
                        for(var j = 0 ; j < col ; j++){
                            strtable+="<td>(" + i + ")행(" + j + ")열</td>";
                        }
                        strtable+="</tr>"
                    }
                strtable += "</table>";
                console.log(strtable);
                $('#divtable').append(strtable);
            });


// ***********************************************************************
//  remove() - Removes the selected element (and its child elements)
//  empty() - Removes the child elements from the selected element
// ***********************************************************************

// -> remove(): 자신제거 (자식 제거)
// -> empty() : 자식요소 제거

        $('#btndelete').click(function(){
                $('#divtable').empty(); //div 태그 안에 자식 요소 삭제
                //$('#divtable').remove(); // div 자체 삭제
            });
        });
    </script>

</head>
<body>
    <span id="lbldisplay">Table Create</span>
    <input type="text" id="row">행
    <input type="text" id="col">열
    <input type="button" value="테이블 동적 생성" id="btncreate">
    <input type="button" value="테이블 동적 제거" id="btndelete">
    <div id="divtable">
    </div>


</body>
</html>


저작자표시

'Web > Jquery' 카테고리의 다른 글

jquery) jquery ui datepicker 형식 설정  (0) 2018.04.14
jquery) Ajax + 외부 API  (0) 2018.03.27
jquery) Ajax  (0) 2018.03.22
jquery&json) 연습문제  (0) 2018.03.16
jquery) selector, event, get, set, add  (0) 2018.03.15
'Web/Jquery' Related Articles more
Comments