JavaScript with jQuery

js를 통해 열심히 페이지를 작성했는데... 브라우저마다 보이는 화면이 다르면 몹시 슬플 테다.

'모든 웹 브라우저에서 정상적으로 작동하게 만드는' 것은 중요하면서도 꽤나 어려운 일.

이 때문에 다른 사람이 만든 라이브러리를 사용하곤 하는데, 이것이 바로 jQuery!

---

jQuery.html

제일 먼저 html과 우리의 js를 연결.

그런데 jQuery는 다른 사람이 만들어 둔 라이브러리라고 했다. 따라서 요놈도 script로 받아와야 한다!

그럼 누가 만든 라이브러리를 받는디? 구글에 쳐보면 많다! 여기서는 made in 구글을 이용.

 

jQuery.js

희한하게 생긴 $ 가 붙어있다. 

요놈은 jQuery 라이브러리의 함수! 

기본적으로 $(<매개 변수>).메소드(<매개 변수>, <매개 변수>) 의 형태로 사용된다.

 

jQuery에서 객체를 생성하기 위해서는? document, css 선택자, html 문자열을 사용할 수 있다.

 

css 선택자를 이용하면 기존 문서의 객체 선택이 가능하다!

 

아무튼 아까와 같은 코드를 작성하면..!

쨔잔. js를 통해 짝수 번째 h1의 css를 바꿔줬다.

 

jQuery.js

text()와 html()을 이용하면 문서 내 문자를 조작할 수 있다. css()를 통해 디자인 변경도 가능!

 

text()와 html()의 차이는?

→ 여러 개의 문서 객체를 선택할 때 text()는 모든 문서 객체 내부 문자를,

html()은 첫 번째 문서 객체 내부 문자를 출력한다.

또한 text()에서는 <h1>과 같은 html 태그를 사용할 수 없지만(입력한 그대로 출력되고 말았다),

html()에서는 html 태그 사용이 가능하다.

 

jQuery.html

문서 객체의 속성 역시 조작이 가능하다! 

img 태그에다가 사진을 넣고 싶다면?

jQuery.js

img라는 태그를 찾아 attr로 속성을 가져올 수 있다.

내부 src 속성을 통해 해당 이미지를 업로드!

 

그럼 이렇게 이미지가 잘 나온다. 신기하고만.

 

jQuery.js

문서 객체 생성 역시 가능하다! 와우!

 

$('<h1></h1>')을 통해 h1 태그를 하나 만들고,

.text(), .attr(), .css() 등을 통해 문자, 속성, css 등을 지정!

만들어진 객체는 appendTo('body')를 통해 body라는 태그 안쪽 뒤에 추가!

그럼 이렇게 html을 건드리지도 않고도 새로운 객체를 만들 수 있다.