OPEN between Secret

15.01.28 jQuery 문서 객체 조작 메소드 본문

java/Java script & jQuery

15.01.28 jQuery 문서 객체 조작 메소드

해가꿈꾸는달 2015. 1. 28. 17:46
반응형

jQuery 메서드 




( 1 ) addClass()

    

->문서 객체의 클래스 속성을 추가한다.


  a.


<script>


$(document).ready(function(){

$('h1').addClass('item');

});

</script>


</head>

<body>


<h1>item - 0</h1>

<h1>item - 1</h1>

<h1>item - 2</h1>

<h1>item - 3</h1>

<h1>item - 4</h1>


</body>


---> 이렇게 하고 돌려보면 <h1> 태그 안에 class 가 추가되어 있다.



  b.


<script>

$(document).ready(function(){

$('h1').addClass(function (index) {

return 'class' + index;

})

});

</script>


--->  이런 방법도 가능






( 2 ) removeClass()


                           -> 문서 객체의 클래스 속성을 제거한다.

a.


<head>

<script>


$(document).ready(function(){

$('h1').removeClass('select');

});

</script>


</head>

<body>


<h1 class="item">item - 0</h1>

<h1 class="item select">item - 1</h1>

<h1 class="item">item - 2</h1>

</body>







( 3 ) attr()

    

--> 속성과 관련된 모든 기능을 수행


 


1)  속성 값을 알고 싶을때

var src = $('img').attr('src');

--> src 변수에 img의 src의 값을 알아낸다



2) 속성을 추가 할때 

$(selector).attr(name,value);

$(selector).attr(name, function(index,attr){});

$(selector).attr(object);







( 4 )    removeAttr()

          

  ->문서 객체의 속성 제거


<script>

$(document).ready(function () {

$('h1').removeAttr('data-index');

} )

</script>


--->h1의 속성 data-index을 없애줌







( 5 )     CSS()

       

     ->문서 객체의 스타일 검사


a. 스타일 검색


<script>

$(document).ready(function () {

$('h1').css('color');

} )

</script>


---> color의 값이 무엇인지를 보여줌



b. 스타일 추가

$(selector).css(name,value);

$(selector).css(name, function(index,attr){});

$(selector).css(object);








( 6 )    html(), text()

    

 ---> 문서 객체 내부의 글자와 관련된 모든 기능을 수행.


  a.


<script>

$(document).ready(function () {

$('h1').html();

} )

</script>


---> 첫번째 h1 태그의 내용을 가져온다.


  b.


<script>

$(document).ready(function () {

$('h1').text();

} )

</script>


---> 선택자로 선택한 h1 태그들의 모든 내용 값을 가져온다.








( 7 )

--->문서 객체의 내부 추가


$(selector).html(value);

$(selector).text(value);

$(selector).html(function(index, html){});

$(selector).text(function(index, text){});







( 8 )

a. 문서 객체 삽입 1


$(A).appendTo(B)                    --> A를 B의 뒷부분에 추가한다.

$(A).prependTo(B)                    --> A를 B의 앞에 추가한다.

$(A).insertAfter(B)                    --> A를 B의 뒤에 추가한다.

$(A).insertBefore(B)                  --> A를 B의 앞에 추가한다.



b. 문서 객체 삽입 2


$(A).append(B)                    --> B를 A의 뒷부분에 추가

$(A).prepend(B)                   --> B를 A의 앞부분에 추가

$(A).after(B)                      --> B를 A의 뒤에 추가

$(A).before(B)                     --> B를 A의 앞에 추가







( 9 )    문서 객체 이동


<script>


$(document).ready(function(){

$('img').css('width',250);

//2초 마다 실행

setInterval(function () {

$('img').first().appendTo('body');

},2000);

});

</script>

</head>


<body>

<img src="maven.PNG"/>

<img src="Annotation.PNG"/>

</body>



---> append 랑 appendT를 잘 알아야 한다.

---> setInterval은 매번 반복 시







출처 : 모던 웹을 위한 javascript + jquery 입문

반응형
저작자표시

'java > Java script & jQuery' 카테고리의 다른 글

15.1.29 Ajax  (0) 2015.01.29
15.1.29 jQuery 이 벤 트 !  (0) 2015.01.29
15.1.8 객체  (0) 2015.01.08
15.1.8 객체 마지막  (0) 2015.01.08
15.01.07(5장)  (0) 2015.01.07
'java/Java script & jQuery' Related Articles more