본문 바로가기

언어/javascript

jQuery3 --attribute 다루기

A> attr -- 어트리뷰트 가져오기 , 수정하기

     --여기서 요소란 alt, value 같은 property들

     attr('요소') -- 요소의 값 가져오기

     attr('요소','바꿀 값') --요소의 값을 '바꿀 값'으로 수정

     attr('요소','객체') --요소의 값을 객체를 읽어서 반영

     attr('요소',function() ) --요소의 값을 function을 통해 반영

    --예시

1
2
3
 $("img").attr("src", function() {  
           return "../images/" + this.title;  
       });
  cs

 2라인의 this는 img태그를 가리킨다.

 

--어트리뷰트 제거하기는 

removeAttr 로 한다.

 

 

B> addClass --class 추가하기

 

--예시

1
$('span').addClass('redtext');
cs

 이런것도 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
      $("button").click(function() {
         $("li").addClass(function(index, currentClass) {
            var addedClass;
            if (currentClass === "red") {
               addedClass = "green";
               $("p").text(index + "번째 항목에 그린 배경색이 생김" );
            }else{
            addedClass = "yellow";
         }
            return addedClass;
         });
      });
   });
cs

3라인의 index는 li의 인덱스값이다. 몇번째인지의 정보이다.

currenClass는 index에 해당하는 번째의 li 태그의 현재 클래스 정보이다.

즉 현재 클래스가 red 인 태그의 클래스를 green 으로 바꾼것이다.

만약 그렇지 않다면 클래스를 yellow로 한다.

 

 

--클래스 지우기는 

removeClass 로 한다.

 

 

 

C> toggleClass()

      toggleClass('클래스)    --클래스가 있으면 추가 없으면 제거

 

D> hasClass()

     hasClass('클래스')  --클래스가 있으면 ture 없으면  false     

      

E> .html() --태그 안의 내용을 가져오거나,   값을 수정하기

     1. $(this).html() 과 같이 쓰인다.

         innerHTML 과 같은 역할을 한다.

   

     2. $('태그').html(넣을 내용)

'언어 > javascript' 카테고리의 다른 글

jQuery4 --DOM 조작하기  (0) 2021.02.17
jQuery3 --DOM 탐색  (0) 2021.02.16
jQuery2 - 필터( filter)  (0) 2021.02.16
jquery1 --기본 선택자  (0) 2021.02.15
javascipt - 웹 워커(web worker)  (0) 2021.02.15