0706 수업내용

hide()함수는 j쿼리에서 지원하는 함수이기 때문에 arr은 hide()사용 못함 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

 

const p = document.querySelector("#p1")

아이디속성은 중복되지 않기 때문에 하나만 찾아옴. 

p.style.color='red';

p, 어쩌고~~ = ~~ 

아이디 속성이 p1인 것에 스타일을 

여기서는 css가 .css("color", "red"). ㅡ 컬러값을 red로 변환해라

 

$("#p1").slideUp(2000)

2초동안 천천히 슬라이드 업 해라 

 

$("#p1").slideDown(2000);

2초동안 천천히 슬라이드 다운해라 

 

method chaining

= . . . < 으로 계속 이어가는거 

$("#p1").css("color", "red").slideUp(2000).slideDown(2000); << 이렇게 

  

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Get Content - text(), html(), and val()

this.innerHTML 

이 값을 가져와서 변수에 담고싶음 

let data = this.innerHTML  < 이건 자바식

 

let data2 =  $(this).html(); < jquery 

 

자바스크립트 innerHTML 이랑 j쿼리 html() 같다고 보면 됨 

 

 

----------------------

바디요소 다 반환 받고 싶으면  - innerHTML

바디안에 텍스트만 반환받고 싶으면 (start, end) -innerText  

---------------------

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Set Content - text(), html(), and val()

 

Set Attributes - attr()

<img src="a,jpg"> jpg의 속성을 가져오고 싶을 때 

let s = this.src; - 자바스크립트

let s = $(this).attr('src') < jquery에서는 이렇게 가져옴 

 

속성 값 변경하고 싶을 때

this.src = "b.jpg";- 자바스크립트

$(this).attr("src","b.jpg"); 

 

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

jQuery - Add Elements

jquert 요소 객체를 추가할 때 

 

append()

선택된 요소 끝에 추가한다 (자바스크립트 ,lastchild에 주는거랑 똑같음)  - 자식으로서

prepend()

선택된 요소 제일 앞에 추가한다 (자바스크립트, firstchild에 주는거랑 똑감음)  - 자식으로서

after()

어느 요소 다음에 삽입 - 형제로서 

before()

어느 요소 앞에 삽입 - 형제로서 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

 

css 스타일용 함수

add 클래스 속성을 추가하는 거 

remove 클래스 속성을 제거하는거