1. jQuery
- jQuery는 자바스크립트 라이브러리.
- 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게한다.
- DOM과 관련된 기능을 브라우저에 상관없이 실행하도록 한다.
- 풍부한 jQuery함수 제공.
- CSS선택자를 그대로 사용함.
1-1. 기본 문법
$(선택자).함수명(매개변수); 선택자 = 선택하고 싶은 태그
- $(선택자) = jQuery(선택자) ➡ 둘 다 가능
<script>
var myJQ = jQuery("p"); //jQuey("p")가 담겨졌기 때문애 myJQ는 jQuery객체가 된다.
console.log(myJQ);
var elementP = document.getElementsByTagName("p");
console.log(elementP);
//myJQ와 elementP은 동일한 객체가 아니다. 데이터 타입 자체가 다르다.
//myJQ는 jQuery클래스로 객체가 생성되는 것이고, elementP는 element클래스(자바스크립트 클래스)로 객체가 생성되는 것이다.
</script>
<body>
<p>Hello jQuery!</p>
</body>- myJQ객체와 elemetP객체는 기능은 같지만 객체 자체는 다른 객체이다.
- myJQ는 jQuery라는 라이브러리 객체로 만든 객체.
- elementP는 자바스크립트에서 제공하는 객체로 만든 객체.
2. $(function () {})
-
$(document).ready(function () {콜백함수()})
= 최상위 객체인 DOM객체(jQuery에서 제공하는) 를 불러와서 .ready()안의 함수를 실행시키는 명령. -
$(function () {콜백함수()}
= document생략 가능. 위의 명령과 똑같은 기능.
📌Javascript : window.onload = jQuery : $(document).ready()
➡ 먼저 < body >를 메모리에 올림.
✔ window.onload
- 딱 한 번만 사용. 여러개 선언하여 내용을 담아도 뒤에 선언한 onload에담긴 내용이 전에 선언한 내용을 덮어쓰기 해버림.
✔ $(document).ready()
- 몇 개를 선언해도 덮어쓰기를 하지않고 선언한 만큼의 담긴 내용을 전부 출력할 수 있음.
3. ("셀렉터").html() vs $("셀렉터").text() vs $("셀렉터").val() 의 차이
<script>
//html() / text()
console.log("htmlMethod : " + $("#htmlMethod").html());
$("#htmlMethod").html("<strong>new</strong> " + $("#textMethod").html());
console.log("textMethod : " + $("#textMethod").text());
$("#textMethod").text("new " + $("#textMethod").text());
</script>- html()은 자식태그까지 포함해서 통째로 출력하는 함수.
⚠+ .html()함수로 부른 선택자 태그 안에 자식이 없을 경우, 자기자신의 내용을 불러온다.
-
text()은 자식태그를 제외한 안의 문서(내용)만 출력하는 함수.
-
val()은 input태그에 정의된 value속성의 값을 확인하고자 할때 사용되는 함수.
$("#txt").val("변경내용");val()함수안에 변경할 내용을 기술하면 value값이 변경된다.
4. remove 함수와 empty 함수의 차이
<script>
//remove() // 문서 객체 제거
//empty() // 문서 객체 내부 제거
$("#removeMthod").remove(); //객체 태그 자체가 전부 제거 됨
$("#emptyMthod").empty(); //태그는 남아있고 안의 내용만 제거 됨
</script> - remove()함수는 객체 자체를 메모리에서 제거한다. < body >안에서 사라짐.
- empty()함수는 객체는 남아있고 안의 내용만 제거된다.
