웹캠프 9일차: JQuery1 (21/1/14)

binarywoo 2021. 1. 20. 00:31

2021. 1. 20. 00:31

정답: [href]

The Document Ready Event

거의 모든 jQuery 문서에서 함수 시작 앞에 $(document).ready 부분을 보았을 것이다. 이건 모든 페이지가 로딩이 되고 난 뒤에 javascript효과를 적용시켜 혹시나 HTML 태그가 로딩이 되기 전에 javascript를 적용하려는 시도로 인한 에러를 막을 수 있다.

이건 내가 몰랐던 문법이었는데, function의 이름이 없을때는 그냥 익명함수라는 뜻이 아니라, $(document).ready(function(){}); 을 간단하게 표현한 방법이다.

jQuery Selectors

특정 HTML 요소를 선택하고 조작하기 위해 요소의 태그 name, id, classes, types, attributes,를 기반으로 jQuery selector를 적용하면 원하는 요소들만 css 효과, 이벤트-함수호출 를 이끌어낼 수 있다.

그냥 <p>태그 사용하기: $("p")

id 속성 --> #test 사용하기: $("#test")

class 속성 --> .test 사용하기: $(".test")

$("[href]") --> href 속성(property)를 가지는 selector에 특정 css 적용하기

The on() Method

jQuery 기능들 중에서,

hide/show : 특정 요소를 숨기고/보이기

fade in/fade out: 특정 요소를 서서히 보이고/ 서서히 숨기기 (마치 파도 물결같은 효과: 밀물 / 썰물)

slideToggle() : 슬라이드가 서서히 보이고/사라지게 하는 함수

jQuery Callback Functions*** 매우중요

callback함수는 특정 효과가 완료되고 나서야 실행되는 함수를 지정할 때 그 함수를 callback 함수라고 합니다.

즉, 뭔가가 실행이 완료가 되고 다시 순서대로, 원래 흐름으로 되돌아 온다고 해서 callback이라고 함.

JavaScript 문은 본래 한 줄씩 실행됩니다. 그러나 효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있습니다. 이로 인해 오류가 발생할 수 있습니다.

이를 방지하기 위해 콜백 함수를 생성 할 수 있습니다.

현재 효과가 완료된 후 콜백 함수가 실행됩니다.

일반적인 구문 : $ ( selector ) .hide ( speed, callback );

위 예제를 돌리면, 첫번째에서 p태그가 완전히 사라지고 난 뒤에야 그때 alert창이 뜹니다.

jQuery - Chaining

jQuery를 사용하면 액션 / 메소드를 함께 연결할 수 있습니다.

체이닝을 사용하면 단일 문 내에서 여러 jQuery 메서드 (동일한 요소에서)를 실행할 수 있습니다.

이 방식의 장점은 같은 요소를 여러번 선택할 필요없이 여러 기능을 묶어서 한번에 실행할 수 있다는 점입니다.

(코드 간결화)

지금까지 우리는 한 번에 하나씩 jQuery 문을 작성했던 것을,

동일한 요소에서 여러 jQuery 명령을 차례로 실행할 수 있도록 chaining하는 기법이 추가되었다.

jQuery DOM Manipulation

jQuery에는 HTML 요소 및 속성을 변경하고 조작하는데 매우 유용합니다.

jQuery의 매우 중요한 부분 중 하나는 DOM을 jQuery라이브러리에서 제공하는 DOM관련 함수로 조작 할 수 있다는 것입니다.

www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set

Tryit Editor v3.6

$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html(" Hello world! "); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); }); This is a paragraph. T

www.w3schools.com