[JS] jQuery Tutorial / Effects / HTML

Yunju·2024년 10월 19일
js
0

[1] jQuery Tutorial

1. jQuery Syntax

(1) 기본 구문 : $(selector).action()

  • jQuery를 정의/접근하기 위한 $ 기호
  • "찾기(또는 찾기)" HTML 요소에 대한 (선택자)
  • 요소(들)에 대해 수행될 jQuery 작업()

(2) 문서준비 이벤트

  • Document가 로딩이 완료되기 전에 jQuery 코드가 실행되면 안됨!
    왜? 브라우저가 HTML 문서를 로딩하는 중에 DOM 요소가 아직 완전히 생성되지 않았을 수 있기 때
  • 만약에 html의 <head>에 <Script>태그를 넣게 된다면 $(function(){}); 이 안에 jQuery를 넣어야됨.

2. jQuery Selectors

(1) jQuery Selectors

  • 이름, id, 클래스, 유형, 속성(attr), 속성 값 등을 기반으로 HTML element를 찾거나 선택하는데 사용된다. 기존의 css 선택기를 기반으로 하며 자체 사용자 지정 선택기를 가지고 있음.
  • jQuery의 모든 선택자는 달러 달러 기호와 소괄호로 시작됨. $().

(2) Selector Examples

  • Element selector : $("p")
  • id selector : $("#test")
  • class selector : $(".test")

3. jQuery Events

(1) jQuery Events

  • Event : 웹페이지가 응답할 수 있는 모든 다른 방문자의 행동
  • mouseenter() : 마우스 포인터가 HTML 요소에 들어갈 때 함수가 실행됨.
  • mouseleave() : 마우스 포인터가 HTML 요소를 떠날때 함수가 실행됨
  • mousedown() : 왼쪽, 가운데 또는 오른쪽 버튼을 누르면 마우스가 html 요소 위에 있는 동안 실행됨.
  • mouseup() : 마우스가 HTML 요소 위에 있는 동안 왼쪽, 가운데 또는 오른쪽 버튼이 놓일 때 기능이 실행됨.
  • hover() : mouseenter() + mouseleave()
$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});
//첫 번째 함수는 마우스가 HTML 요소에 들어갈 때 실행되고, 두 번째 함수는 마우스가 HTML 요소를 떠날 때 실행됩니다.
  • focus() : input 필드가 포커스를 받을 때(그러니까 거기로 커서가 올때) 사용됨
  • blur() : input 필드가 포커스를 잃을 때 실행됨.
  • on() : 메서드는 선택된 요소에 하나 이상의 이벤트 핸들러를 연결함
//click 이벤트를 on으로 넣고싶을때
$("p").on("click", function(){
  $(this).hide();
});

//3개 연결
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

[2] jQuery Effects

Effects Callback 함수 활용

-> 대부분의 Effects에서는 끝나고 callback 함수를 바로 호출하여 끝나자마자 올 동작에 대해서 지정할 수 있음.

1. Hide/Show

(1) hide() and show()

  • $(selector).hide(speed,callback), $(selector).show(speed,callback);
$("button").click(function(){
  $("p").hide(1000);
});

(2) toggle()

  • $(selector).toggle(speed,callback);
  • 표시된 요소는 숨겨져 있고 숨겨진 요소는 표시됨 이렇게 됨.
  • 주로 버튼에 많이 쓰이는듯

2. Fade

(1) fadeIn()

$(selector).fadeIn(speed,callback); 

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

(2) fadeOut()

$(selector).fadeOut(speed,callback);

(3) fadeToggle()

$(selector).fadeToggle(speed,callback);

(4) fadeTo()

$(selector).fadeTo(speed,opacity,callback);

3. SLide

(1) slideDown()

$(selector).slideDown(speed,callback);

$("#flip").click(function(){
  $("#panel").slideDown();
});

(2) slideUp()

$(selector).slideUp(speed,callback);

(3) slideToggle()

$(selector).slideToggle(speed,callback);

  • slideDown()+ slideUp()

4. Animate

  • animate()method is used to create custom animations.
    $(selector).animate({params},speed,callback);
  • params : 애니메이션될 CSS 속성을 정의

여러 속성 컨트롤 가능

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

상대값 사용 가능

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});

속성의 애니메이션 값을 "show", "hide" 또는 "toggle"으로 지정할 수도 있음.

$("button").click(function(){
  $("div").animate({
    height: 'toggle'
  });
});

대기열 기능 사용 (연속으로 할 수 있음)

$("button").click(function(){
  var div = $("div");
  div.animate({height: '300px', opacity: '0.4'}, "slow");
  div.animate({width: '300px', opacity: '0.8'}, "slow");
  div.animate({height: '100px', opacity: '0.4'}, "slow");
  div.animate({width: '100px', opacity: '0.8'}, "slow");
});

5. stop()

  • stop() method is used to stop an animation or effect before it is finished.
  • $(selector).stop(stopAll,goToEnd);
  • stopAll 매개 변수는 애니메이션 대기열을 지워야 하는지 여부를 지정합니다. 기본값은 false이며, 이는 활성 애니메이션만 중지되어 대기열에 있는 애니메이션이 나중에 수행될 수 있음을 의미합니다. --> (optional)
  • goToEnd 매개 변수는 현재 애니메이션을 즉시 완료할지 여부를 지정합니다. 기본값은 거짓입니다.--> (optional)
$("#stop").click(function(){
  $("#panel").stop();
});

6. Callback

  • 자바스크립트 문은 한 줄씩 실행됩니다. 그러나, 효과를 사용하면, 효과가 완료되지 않았더라도 다음 코드 줄을 실행할 수 있습니다. 이것은 오류를 만들 수 있다. 이를 방지하기 위해 콜백 함수를 만들 수 있습니다.
  • 콜백 함수는 현재 효과가 100% 완료된 후에 실행됩니다.
//callback함수가 있을때
$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});
//callback 함수가 없을때
$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

7. Chaining

  • 여러 jQuery 명령을 하나의 줄에 연결해서 실행하는 기술
  • 코드가 더 간결해지고, 브라우저가 동일한 요소를 여러 번 찾지 않아 효율성이 향상됨.
  • 체이닝을 사용하면 동일한 요소에 대해 여러 작업을 순차적으로 실행할 수 있음. 각 메서드는 호출될 때 해당 요소에 대해 동작을 실행하고, 그 다음 메서드가 그 결과를 바탕으로 이어짐.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

--> id가 p1인 요소에 대해 다음 작업을 순차적으로 수행:
1. css("color", "red"): 텍스트 색상을 빨간색으로 변경
2. slideUp(2000): 요소를 2초 동안 슬라이드 업하여 숨김
3. slideDown(2000): 요소를 2초 동안 슬라이드 다운하여 다시 표시함.

[3] jQuery HTML

1. Get

  • jQuery의 매우 중요한 부분 중 하나는 DOM을 조작할 수 있는 가능성이다. jQuery는 요소와 속성에 쉽게 접근하고 조작할 수 있는 DOM 관련 메서드와 함께 제공된다.

(1) contents 얻기 - text(), html(), val()

  • text() - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
  • html() - 선택한 요소의 내용을 설정하거나 반환합니다 (HTML 마크업 포함)
  • val() - 양식 필드의 값을 설정하거나 반환합니다.
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn3").click(function(){
  alert("Value: " + $("#test").val());
});

(2) attributes 얻기 - attr()

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

2. Set

(1) contents 설정 - text(), html(), val()

  • text() - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
  • html() - 선택한 요소의 내용을 설정하거나 반환합니다 (HTML 마크업 포함)
  • val() - 양식 필드의 값을 설정하거나 반환합니다.
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

(2) attributes 설정 - attr()

$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

//Callback 함수
//버튼을 클릭할 때마다 id="w3s"를 가진 요소(주로 링크)의 href 속성 값이 변경됩니다. 구체적으로, 기존 href 값에 "/jquery/"가 추가됩니다.

$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery/";
  });
});

3. Add

  • append()- 선택한 요소의 끝에 내용을 삽입합니다.
  • prepend()- 선택한 요소의 시작 부분에 내용을 삽입합니다.
function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}
  • after()- 선택한 요소 뒤에 내용을 삽입합니다.
  • before()- 선택한 요소 앞에 내용을 삽입합니다.
function afterText() {
  var txt1 = "<b>I </b>";                    // Create element with HTML 
  var txt2 = $("<i></i>").text("love ");     // Create with jQuery
  var txt3 = document.createElement("b");    // Create with DOM
  txt3.innerHTML = "jQuery!";
  $("img").after(txt1, txt2, txt3);          // Insert new elements after <img>
}

4. Remove

  • remove()- 선택한 요소(및 자식 요소)를 제거합니다.
    $("p").remove(".test")
  • empty()- 선택한 요소에서 자식 요소를 제거합니다
    $("p").remove(".test, .demo");

5. CSS Classes

  • addClass()- 선택한 요소에 하나 이상의 클래스를 추가합니다.
$("button").click(function(){
  $("h1, h2, p").addClass("blue");
  $("div").addClass("important");
});
  • removeClass()- 선택한 요소에서 하나 이상의 클래스를 제거합니다.
$("button").click(function(){
  $("h1, h2, p").removeClass("blue");
});
  • toggleClass()- 선택한 요소에서 클래스 추가/제거 사이 전환(껐다 켰다 할수있음)
$("button").click(function(){
  $("h1, h2, p").toggleClass("blue");
});

6. css()

  • css속성 반환
    : 스타일 속성을 설정하거나 반환합니다.
    css("propertyname");
  • css속성 설정
    css("propertyname","value");
$("p").css("background-color", "yellow");
  • css 여러 속성 설정
    css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color": "yellow", "font-size": "200%"});

7. Dimensions

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()


    --> resize도 가능
profile
Yunju
이전 포스트

[JS] jQuery Learning Roadmap

다음 포스트

[LeetCode] Reverse a Linked List

0개의 댓글