Programming/JQery15 JQuery 정리 JQuery 의 기본문법 $(선택자).행동() 읽을 때 "$(선택자)를 행동 한다" 로 읽으면 해석하기 편합니다. "."이 은/는/이/가 or /을/를 로 생각하면 좋습니다. ex) $(this).hide() 이런 구문이 있으면 "this"를 숨깁니다. 라고 읽어줍니다. JQuery를 시작할때에 다음과 같은 문법을 항상 사용해주는데 뜻이 문서가 시작되면 함수를 시작한다 하고 {} 2023. 8. 18. JQuery traversing(4) Filtering traversing이란? 체인을 계속하는 것을 뜻합니다. DOCTYPE html> $(document).ready(function(){ //Filtering // $("div").first().css("background-color", "yellow"); //div의 첫번째 것을 찾아줌 // $("div").last().css("background-color", "yellow"); //div의 마지막 것을 찾아줌 // $("p").eq(1).css("background-color", "yellow"); //p태그의 1번째 것을 찾아줌 // $("p").filter(".intro").css("background-color", "yellow"); // p태그에서 intro클래스가 있는 것을 찾아줌 // $(.. 2023. 6. 23. JQuery traversing(3) 형제를 찾는 메서드 traversing이란? 체인을 계속하는 것을 뜻합니다. DOCTYPE html> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } $(document).ready(function(){ //Siblings 형제를 찾는 메서드 // $("h2").siblings().css({"color": "red", "border": "2px solid red"}); //형제클래스 위 아래로 다 찾아줌★ // $("h2").next().css({"color": "red", "border": "2px solid red"}); // 바로 다음것 1개만 찾아줌 // $("h2").nex.. 2023. 6. 23. JQuery traversing(2) 자식을 찾는 메서드들 traversing이란? 체인을 계속하는 것을 뜻합니다. DOCTYPE html> .descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } $(document).ready(function(){ //Descendants 자식을 찾는 메서드 들 // $("div").children("p.first").css({"color": "red", "border": "2px solid red"}); div의 p.first의 자식을 1개 찾아줌 // $("div").find("span").css({"color": "red", "border": "2px solid red"}); div.. 2023. 6. 23. JQuery traversing(1) 부모 찾는 메서드 traversing이란? 체인을 계속하는 것을 뜻합니다. DOCTYPE html> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } $(document).ready(function(){ // Ancestors 부모를 찾는 메서드 // $("span").parent().css({"color": "red", "border": "2px solid red"}); //부모 1개만 찾기★ // $("span").parents().css({"color": "red", "border": "2px solid red"}); //부모 모두 찾기 ★ // $("span").parent.. 2023. 6. 23. JQuery 스크롤이벤트 웹페이지를 보다가 스크롤을 내릴때 무언가 이벤트를 추가하고 싶으시다면 다음과 같이 사용하시면 됩니다. $(document).ready(function(){ $(window).scroll(function(){ if($(window).scrollTop()>1200){ $("#box2 h1").addClass("animate__animated").addClass("animate__slideInLeft"); } }); 해당 코드의 경우 스크롤이 1200지점에 도달하면 box h1에 애니메이트 클래스의 애니메이션이 작동하여 움직입니다. 해당 addClass부분에 원하는 스크롤 발생 이벤트를 추가하고 원하는 위치의 스크롤지점에 설정하시면 됩니다. 내가 원하는 스크롤 지점은 consol.log를 이용하여 현재 커서위.. 2023. 6. 23. 이전 1 2 3 다음
