211014(목) jQuery - arrt() / prop() / CSS

[속성 attribute - attr() / prop()]

 

<exam01>

jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다.
이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다.

1. attr()
- HTML에 작성된 속성값을 문자열로 받아온다 있는 그대로 => prop()와의 차이

그 태그에 이 속성을 추가해라!!!

[형식]
var 변수명 = $("요소").attr("속성이름");               => 값 꺼내기
$("요소").attr("속성이름", "값");                         =>값 하나주기

$("요소").attr({                                              =>값 여러개 주기
      "속성1이름": "값",
      "속성2이름": "값",
      "속성3이름": "값"
});

2. prop()
- 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다
- 자바스크립트의 프로퍼티를 가져온다 : 의미하는 값을
  주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다
- 자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있다

[형식]
.prop("속성이름")        → 속성값을 가져온다 (문자열 x)
.prop("속성이름", "값")   → 속성값을 추가한다

 

<exam02>

클릭이벤트 시 attr 속성을 이용하여 값을 편리하게 출력하는 방법

<exam03>

 

cf) 브라우저마다 다른 모양!

<exam04>

<exam05>

---

[jQuery - CSS]

(1) 속성값 읽기
var 변수명 = $("요소").css("CSS 속성이름");

(2) 속성값 변경 및 추가하기
$("요소").css("속성이름", "값");

$("요소").css({
      "속성1이름": "값",
      "속성2이름": "값",
      "속성3이름": "값"
});
---------------------------

(1) CSS 클래스의 적용 여부 알기
var 변수 = $("요소").hasClass("클래스이름");

(2) 클래스의 적용과 해제

$("요소").addClass("클래스이름");
$("요소").removeClass("클래스이름");

(3) 클래스의 적용과 해제의 반복 처리
- HTML 태그 요소의 CSS 클래스에 대한 적용과 해제를 자동 순환 반복
$("요소").toggleClass("클래스이름"); =>add, remove 번갈아 움직인다

 

<exam01>

<exam02>

 

cf) 스타일시트 : 선없애주는 디테일

<exam03>