Programming/JQery15 JQuery hide::show::toggle::fadein::fadeout::fadeToggle::slideDown::slideUp::slideToggle 다음코드를 복사한다음에 버튼을 클릭하면 효과가 나타나게 됩니다. DOCTYPE html> jqery01 $(document).ready(function(){ $("h1").html(" jquery is a javascript library."); //js의 innerHtml과 같은 역할 $("#btn1").click(function(){ $("h1").hide(); }); $("#btn2").click(function(){ $("h1").show(); }); $("#btn3").click(function(){ $("h1").toggle(); }); $("#btn4").click(function(){ $("h1").fadeIn(); }); $("#btn5").click(function(){ $("h1")... 2023. 6. 23. JQuery ajax를 이용하여 파일가져오기 아래와 같은 3가지 파일이 있을 때 JQuery를 이용하여 파일을 가져오는 방법입니다. 1. data.txt 홍길동, 서울, 컴퓨터공학과 2. data.xml 홍길동 서울 컴퓨터공학과 3.data.json {"name":"홍길동","address": "서울","department":"컴퓨터공학과"} DOCTYPE html> ajax //txt파일 가져오는 방법 $(document).ready(function(){ $("#btn1").click(function(){ $.ajax({ url: "data.txt", success: function(result){ var dataArr = result.split(","); if (dataArr.length === 3) { $("#title").text("이름: .. 2023. 6. 23. JQuery 추가, 삭제, 토글, css추가 클래스 제이쿼리에는 기존 html에 클래스를 추가하여 사용 할 수도 있습니다. .addClass() .remonveClass() .toggleClass() .css() 의 사용법은 다음의 코드를 복사하여 버튼을 클릭해보시길 바랍니다. DOCTYPE html> addclass $(document).ready(function(){ $("#btn1").click(function(){ $("#box1").addClass("go-right"); }) $("#btn2").click(function(){ $("#box1").removeClass("go-right"); }) $("#btn3").click(function(){ $("#box1").toggleClass("go-right"); }) $("#btn4").click(.. 2023. 6. 23. JQuery로 carousel 기능 구현하기 carousel(캐러셀)이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성 요소입니다 해당 코드의 경우에는 양쪽에 화살표이미지를 클릭하거나 이미지 하단에 있는 검은색 버튼을 클릭하게 되면 해당화면으로 혹은 다음화면으로 넘어가도록 설정을 해보았습니다. DOCTYPE html> jquery02-1 $(document).ready(function() { var currentIndex = 0; var slideInterval = setInterval(moveNext, 3000); function moveNext() { currentIndex++; if (currentIndex >= $(".slider_image").length) { currentIndex = 0; } var willMoveL.. 2023. 6. 23. JQuery를 사용하여 accrodion(아코디언)기능을 만들기 DOCTYPE html> jquery01-6 $(document).ready(function() { $(".accordion").click(function() { var clickedAccordion = $(this); var panel = clickedAccordion.next(); if (clickedAccordion.hasClass("active")) { // 현재 클릭된 아코디언이 이미 열려있는 경우 clickedAccordion.removeClass("active"); panel.css("max-height", "0px"); } else { // 현재 클릭된 아코디언을 열고 다른 아코디언을 닫음 $(".accordion").removeClass("active"); $(".panel").css(".. 2023. 6. 23. JQuery .addclass :: .click 사용하기 .add class는 html클래스에 내용을 추가하는 것으로 기본 사용법은 다음과 같습니다. $("#box").addClass("class_name"); 예를 들어서 박스를 클릭하면 css에서 그림자가 생성되는 함수는 다음과 같습니다. 그림자 body태그에 다음과 같은 table이 있을 때 첫번째 행의 배경색을 검은색, 글자를 흰색으로 변경하는 방법입니다. 이름주소 홍길동서울시 이순신제주시 왕건경기도 버튼 다음과 같이 body태그가 주어졌을때 css코드에 배경과 흰색을 설정 한 후 버튼을 클릭하면 색이 바뀌는 제이쿼리는 다음과 같습니다. $(document).ready(function(){ $("#btn2").click(function(){ $("tr:first").addClass("colum"); }).. 2023. 6. 23. 이전 1 2 3 다음
