jQuery 요약1 ex1~20(#, '.' , .text , if조건주는것)

jQuery로 html/css 조작하기

태그변경 - replaceWith()

지정한 태그를 다른 태그로 변경하고자할때

엘리먼트 내용까지 변경된다.

태그제거 - remove()

지정된 태그들을 삭제.

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

224부터 중요 셀렉터

wp_ch7부터

필요한것만

ready - javascript 실행 타이밍

var object = $("selector");

object.func();

ex3 (객체 선언, 객체의 값 설정 및 wrap하는거)

$(function(){
        setTimeout(function(){//타임아웃이므로 밑에 시간이 지나고 실행됨
            var $li= $("li");//html의 li태그들 객체?
            $li.css("color","#f00");//객체들의 색상 설정
            
            //jquery object?
            console.log($li.length);
            console.log($li[0] + ":"+typeof $li[0]);//HTMLelement
            console.log($li.get(0) + ":" + typeof $li[0]);
            //error
            //li[0].css("color","#f00");
            $li[0].style.color = "#00f";//객체선언 후 컬러의 값을 지정(확장)
            $li.get(3).style.color = "#00f";
            //wrap query object 
            //객체에 값을 설정할때는 위형식으로 쓰거나 .css으로 쓰려면 wrapping을 해야된다.
            $($li[1]).css("color","#00f");
            $($li.get(2)).css("color","#00f");
            //래핑하고쓴다. jquery는 배열의 확장 하나씩 쓸때는 element의 확장
            },2000);
        });
        </script>

ex4 (html 코드에서 미리 id값 지정 후, 그에 대한 값 설정, 함수 체인)

$(function(){
            setTimeout(function(){
            $("#first").css("color","red");
            //jquey에서 select하는 문법 #을 붙여줘야된다.
            $("#fourth").css("color","#00f");
            //html 코드에서 id값을 지정한 후 jquery에서 id값에 대한 색상추가
            
            /* var $third = $("#third");
            $third.css("color","#0f0");
            $third.css("font-weight","bold");
             */
             $("#third").css({
                 color:"#0f0",
                 "font-weight" : "bold"
             });
            //모든 jQuery API 함수들은 jQuery Object를 다시 반환한다.
            
            console.log($("third").css("color","f00"));
            //따라서 함수 체인을 사용 할 수 있다.
            $("#second").css("color","#f00").css("fontWeight","bold").
            html("<strong>hello!</strong>")
            },1000);
        });

ex5 (.red 는 태그에서 class 설정값 변경시 사용//앞에 .으로 시작하는경우 class)

$(function(){
            setTimeout(function(){
            $(".red").css("color","red");
            //.red는 태그에 class 값 지정한것을 설정할때
            
            //함수 체인
            $(".blue").
            css("color","blue").
            html("<em>hello jQuery!</em>");
            });
        });

ex6 (순서대로 적기 class이름 후 다른 값)

$(function(){
            $(".red strong").css("color","red")
            $(".blue strong").css("color","blue")
        });
        //순서대로 적는다 class이름 뒤 태그를 적는다.

ex7(태그 뒤 * 일시)

$(function(){
            $("li *").css("color","red");
        });
        //태그 뒤 *이 있으면 태그뒤에 다른태그가 아무거나 있는것을 취급

ex8(id값의 설정은 #적고 쓴다.)

$(function(){
            $("#first, #third").css("color","red");
            $("#second, #fourth").css({
                color:"blue",
                fontSize:"2em",
                fontWeight : "bold"
            });
        });
        //id는 #으로 쓴다. 밑의 2,4는 전형적인 쓰는형식

ex9(제이 쿼리중 태그 사이의 '>'의 의미) - 아마 바로밑에 ㅔstrong인것들만 바꾸는듯

$(function(){
            $("li > strong").css("color","red");
            //>하나 안하느냐 차이
        });

ex10(태그 + 태그 일 경우)

$(function(){
            $("#second + li").css("color","red");
            $("#second + li+li").css("color","blue");
        });
        //second + li는 second바로밑의 li를 나타냄

ex11(li:first-child,  li:nth-child(2)   표현법)

$(function(){
            //css2
            $("li:first-child").css("color","red");
            $("li:last-child").css("color","blue");
            //li element 중에 첫째자식
            //li중에서도 ul이 다시 시작되면 frist부터 다시시작 인덱스는 1부터
            
            //css3 (인덱스는 1부터 시작)
            $("li:nth-child(2)").css("color","green");
        });

중요!!! ex12(if문처럼 class나 id가 x일때 조건을 줄 수 있다.)

$(function(){
            $("li[id]").css("color","red");    
            $("li[class]").css("color","blue");    
            
            $('li[class="second"]').css("fontStyle","italic");
            $('li[class!="second"]').css("textDecoration","underline");
            //if문을처럼 쓸수 있다. id,class둘다 사용가능
        })

ex13(타이틀도 마찬가지 바로 밖은 "로 묶어주고 안을 '로 써주면된다.)

$(function(){
            // ex12
            $("[class]").css("color","blue");
            // ex13
            $("[title='second']").css("color","red");
        });

ex14 마찬가지

ex15 li:first

ex16 마찬가지

$(function(){
            $("li:odd").css("color","red");
            $("li:even").css("color","blue");
        });//짝수 홀수 

중요!!! ex17(내용이 같은것들일때 쓰는것)

$(function(){
    $("li:contains('샘플')").css("color","red");//내용이 샘플인것만
    $("li:has(strong)").css("color","red");//strong가지고있는 li를
});
</script>
</head>
<body>
    <ul>
        <li><strong> 텍스트</strong> 텍스트 텍스트 텍스트 텍스트 </li>
        <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
        <li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
        <li> 샘플 샘플 샘플 샘플 샘플 샘플 </li>
    </ul>

중요!!! ex18(.text쓰는법,특수기호 파라미터로 문자열을 넘기면 태그안의 텍스트를 문자열로 변경한다.)

1 < 2은 참입니다. 2> 1도 참입니다. &..  

(function(){
    setTimeout(function(){
    $("#p2").text( "가나다라마바사아자차카타라하" );
    $("#p3").text( "<strong>밥은 먹고 다니냐?</strong>" );
    //<strong>밥은 먹고 다니냐?</strong>
    // &lt;strong&gt;밥은 먹구 다니냐? &li;/strong&gt;
    
    console.log($("#p4").text());//read
    console.log($("#p5").text());//read
    },1000);
});
</script>
</head>
<body>
    <p id="p1"> 1 &lt; 2은 참입니다. 2&gt; 1도 참입니다. &amp;.. &nbsp;</p>
 

ex19()