jQuery 함수 정리

11 Dec 2020 in Programming on JavaScript

함수가 DOM에 접근해서 속성을 제어해주는 함수

1. css : Style 에 존재하는 속성을 제어하고자 할 때
2. attr : 태그가 가진 attribute를 제어하고자 할 때
3. removeAttr : 태그가 가진 attribute를 삭제하고자 할 때
4. addClass : 태그의 속성 중, class 속성에 관련된 값을 제어할 때 사용
5. removeClass : 태그의 속성 중, class 속성에 관련된 값을 제거할 때 사용

태그의 글을 제어

text() : 태그를 인식하지 못한다.

var target = $("#result");
var myTxt = "<p style='color:blue'>무궁화 꽃이 피었습니다.</p>";
target.text(myTxt);

• 일게하면 화면에 p 태그가 보임

html() : 태그를 인식 (innerHTML)과 굉장히 유사

var target = $("#result");
var myTxt = "<p style='color:blue'>무궁화 꽃이 피었습니다.</p>";
target.html(myTxt);

$("div.tree").empty();
$("div.tree").remove();

is와 prop를 같이 사용

$(function(){
    $("#allCheck").click(function(){

        if($(this).is(":checked")){
            $('div.wrapper td>input:checkbox').prop("checked",true);
        }else{
            $('div.wrapper td>input:checkbox').prop("checked",false);
        }
    })

})

-

addclass

var temp2 = '';
$('h2').each(function(index,item){
    $(item).addClass("sample")
});

$('h2').css("background","orange").filter(":even").css('color','white').filter(":odd").css('color','red')

	$('h2').css("background","orange").filter(":even").css('color','white').filter(":even").css('color','red').end().css('color','pink')

mouseover, mouseout이 한 쌍 –> 근데 jquery에서는 이것 보다는

mouseenter, mouseleave를 사용하는게 좋다 . even bubbling 때문에

동적으로 클래스를 줄 수 있다. addClass, removeClass

1)
$(function(){
  $('img').css({"width":200,"height" : 150});
})


2)
$(function(){
    $('img').attr({"width":200,"height" : 150});
})


$('img').attr("width", function(index){
    return (index+1)*100;
});
})

둘이 유사하다.