#JQuery CRUD문법

1️⃣ Hide and show 2️⃣ HTML (DOM 조작)🔹 JQuery GET 🔹 JQuery SET 🔹 JQuery ADD 🔹 JQuery REMOVE

1️⃣ Hide and show

➖

.hide(1000) 사라지는데 1000ms걸린다. (느려진다.)

➖

.toggle()

안보이는 메뉴는 보이게 하고, 보이는 메뉴는 사라지게 한다. 노션의 토글과 같음

➖

.show() 안보이는 메뉴를 보이게 한다.

2️⃣ HTML (DOM 조작)

🔹 JQuery GET

💡

기본 GET 함수

➖

.text() html태그를 제거하고 텍스트만 표시하게 한다.

➖

.html() 표시된 paragraph의 HTML도 표시한다.

➖

.val() input 태그의 value값을 표시한다.

➖

.attr(”키값”) input태그의 “키값”을 조회하여 value값을 보여준다. (속성값)

🔹 JQuery SET

💡

SET 함수 기본

➖

.text(”Hello world!”) 같은 메소드를 사용하여 괄호안에 문자열을 넣으면 값을 세팅한다.

➖

.html(”<b>Hello world!</b>”)

역시 같은 메소드를 사용하되 쌍따옴표안에 Hello world!가 HTML 적용이 되어서 출력 된다.

➖

.val(”Dolly Duck”)

키값의 속성인 value를 괄호안의 값으로 세팅한다.

💡

function ( a, b ) { return ; } : 콜백 함수

➖

.text(function(i, origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";});

.text(function(a,b){}); 은 text의 콜백 함수로 b는 원래 텍스트이고 a는 인덱스를 나타낸다. b는 스택에서 기존텍스트를 지칭하는 변수로 사용되고, 인덱스는 조건을 만족하는 text()함수의 첫번째 결과값을 지칭한다.

➖

.html(function(i, origText){
return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";
});

위 텍스트 콜백함수와 마찬가지로, html을 위한 콜백 함수이다.

💡

attr ( ) : 속성값 변경

➖

.attr("href", "https://www.w3schools.com/jquery/");});

속성값을 변경하는 함수이다. “href” 키값에 매핑된 속성값을 "https://www.w3schools.com/jquery/" 로 변경한다.

➖

.attr({
"href" : "

https://www.w3schools.com/jquery/

",
"title" : "W3Schools jQuery Tutorial"  });

속성값을 하나 뿐만이 아니라 여러개를 변경할 수 있다.

➖

.attr("href", function(i, origValue){
return origValue + "/jquery/"; });

🔹 JQuery ADD

💡

Append ( ) : 태그 내부 요소 아래에 붙인다.

💡

$("p").append("Appended text."); ”p”태그 내부에 문자열 Appended text. 을 추가한다.

💡

$("ol").append("<li>Appended item</li>"); ”ol” 태그 내부에 문자열 <li>Appended item</li> 을 추가한다.

💡

prepend ( ) : 태그 내부 요소 위에 붙인다.

➖

$("p").prepend("Prepended text. "); ”p”태크 내부 요소 위에 문자열 Prepended text. 을 삽입한다.

💡

before() 와 after () 메소드

➖

$("img").before("Before"); ”img” 태그 위에 문자열 Before 을 붙인다. HTML도 인식한다.

➖

$("img").after("After"); ”img” 태그 뒤에 문자열 After 을 붙인다.

🔹 JQuery REMOVE

💡

remove ( ) 와 empty ( ) 메소드

➖

$("#div1").remove(); id값이 div1을 삭제한다는 뜻이다. div안의 요소들도 모두 삭제한다.

➖

$("#div1").empty(); id 값이 div1의 div는 남고 안에 내용물은 비워졌다.