본문 바로가기
반응형

Jquery, Javascript17

[Jquery] 제이쿼리로 class 추가 (addclass) 제이쿼리를 이용해서 클래스가 없는 태그나, 클래스가 있는데 class를 더 추가할수 있어요. addClass()를 이용하면 되는데요. 사용법을 알려드리겠습니다. $(document).ready(function(){ $("p").addClass("blue"); $("span").addClass("important"); }); 일단 p태그에 blue라는 클래스를 추가한것이고, span태그에는 important의 클래스를 추가했습니다. p{font-size:16px;} .important { font-weight: bold; font-size: 24px; } .blue { color: blue; } 각각에는 현재 이렇게 css를 적용해놓았구요. 가나다라마바사아 ABCDEFG 이런식으로 작성을 하면. p태그에 .. 2022. 6. 17.
[Jquery] alert 이용해서 알림창 띄우기 웹상에서 알림창이 뜨면서 내용을 확인후에 확인을 누르셨던 경험을 아마 인터넷을 이용하시는분들은 다들 경험해보셨을 것입니다. 기본적으로 이렇게 작성하는데 작성하게되면 해당페이지에 접속하면 알림창이 바로 떠버립니다. 그래서 버튼이나, 행동을 추가해서 사용해주는 것이 좋은데요. 버튼을 클릭할시에 알림창을 띄워보겠습니다. 알림창버튼 버튼을 클릭시 alert창이 띄워지게 작성을하면 페이지 접속할시 알림창이 바로뜨지않고 버튼을 클릭했을시 알림창이 나오게 됩니다. 2022. 6. 16.
[Jquery] 클릭시 슬라이드 sildeup(),slidedown(),slidetoggle() 웹에서 클릭했을시 클래스가 있는 다른 div박스를 slide하는 방법입니다. slideDown() : slide되면서 내려옴 slideUp() : slide되면서 올라감(사라짐) slideToggle() : slide되면서 내려옴, 올라감 .box{width:200px;height:200px;background:#ff0000;display:none;} 일단 박스를 200x200사이즈로 셋팅해놓고 display는 none해놓았습니다. 빨간 상자가 숨어져있음. 클릭 html코드는 두개만 설정헀고 스크립트 는 head안에 넣었습니다. $(document).ready(function(){ $(".click").click(function(){ $(".box").slideToggle(); }); }); 클릭텍스트를.. 2022. 5. 3.
[Jquery] hide(),show(),toggle() 안녕하세요 기본적이지만 자주쓰이는 제이쿼리문인 hide,show,toggle입니다. hide : 숨기기 show : 보이기 toggle : 숨기기/보이기 버튼 클릭시 동작이 되도록 코딩했습니다. 문구입니다. 클릭하세요 클릭하세요 버튼을 클릭했을시, p태그 문구입니다를 hide()하면서 숨겨줍니다. 이건 클릭하세요 버튼을 클릭시에 보여줍니다. hide 되거나 css에서 display:none 되어있는 부분을 보여지게 합니다. toggle도 동일하게 사용하며, 클릭시 보여질때 숨겨지고, 숨겨졌을때 보여지게 해줍니다. 2022. 4. 26.
반응형