본문 바로가기

개발일지

 (233)
[jquery] focus()명령어 결과는 똑같지만 코드가 너무 길어져서 헷깔린다면 변수를 설정해서 간단하게 쓸수도 있다. 결과는 똑같으니 취향에 맞게 써주면 된다. $(function(){ $('#input1').focus(function(){$('#input1').addClass('active');}); $('#input1').blur(function(){$('#input1').removeClass('active');}); }); 위에서 본 기존의 코딩이다. $(function(){ var element = $('#input1'); element.focus(function(){element.addClass('active');}); element.blur(function(){element.removeClass('active');}); }..
[jpuery] click 명령어 div!!! $('#div1').click(function(){$('#div1').text('클릭되었네요');}); $('#div1').click(); div1가 클릭을 하면 안에 있는 것을 실행해라 function(){$('#div1').text('클릭되었네요');} div1에 '클릭되었네요' 텍스트를 출력해라 여기서 text는 html로 활용이 가능하다. text와 html의 차이? $('#div1').click(function(){$('#div1').html('클릭되었네요');}); 클릭하면 글씨가 두꺼워짐
[jquery] 사진 불러오고 효과주기 appendTo()명령어 제이쿼리로 사진 불러오기 var div1 = $('#div1'); 설정 쉽게 부르기 위해서 해준다. $("").appendTo(div1); ==> 사진을 갖고와서.div1에 추가하다. css에 .dordered와 div에게 효과를 먼저 준다. img.addClass('bordered'); 이미지에 css에서 설정한 선 효과를 준다. img.appendTo(div1); 사진을 div에 추가한다. img.fadeOut(2000); img.fadeIn(2000); 없어졌다가(fadeOut) 다시 나타나기(fadeIn) 여기서 2000은 2초 라는 뜻! 강아지 사진에 효과를 입힌다.
[jquery] append() 명령어 baseket apple banana orange 제이쿼리에 아무 값도 안 준 상태 $(function(){ var baseket = $('#baseket'); var apple = $('apple'); var banana = $('banana'); var orange = $('orange'); }); 변수만 선언했기 때문에 아무 변화가 없다. 값을 쉽게 부르기 위해서 변수 선언을 해준다. 그럼 이름만 불러도 쉽게 적용이 된다. basket.append(apple); 변수선언 해준 곳 바로 밑에 추가해줬다. basket.append(apple); basket안에 apple을 첨부하다. basket.append(apple); basket.append(banana); basket.append(orange);..
[jquery ] addClass(),removeClass() 명령어 div1 div2 div3 div4 div2~4까지 검은색 박스를 선언했지만 alert 설정으로 div4가 빨간선이 되었음. 대신에 위의 box의 설정이 내려와서 3px solid는 같다. $(function(){ $('#div1').addClass('box'); //내가 지정해준 클래스를 추가해라 addClass }); $('#div1').addClass('box'); div1에 addClass명령으로 box 값을 추가해주었더니 검은선이 추가 되었다. $('#div2').removeClass('box'); $('#div2').removeClass('box'); 말 그대로 remobeClass는 지워주는 역할이다. div2에서 box를 지웠더니 선이 없어졌다. $('#div3').addClass('ale..
[jquery] 기본 명령어 예제 몇 가지 ② 안에 들어 있는 텍스트1 안에 들어 있는 텍스트2 안에 들어 있는 텍스트3 안에 들어 있는 텍스트4 $('#div3').text('인천시청'); 텍스트로 인식 $('#div4').html('인천시청'); 태그 명령이 실행 ↓ 비우자 empty(), html(' '), text(' ') 박스 안의 글씨를 비우는 명령입니다. $('#div1').empty(); $('#div1').html(''); $('#div1').text(''); html과 text의 경우 (' '); 를 해주어야 하는 이유는 작은 따옴표(') 안에 들어있는 띄어쓰기 부분이 빈공간을 대체하기 때문입니다. hide와 다른 점은? $('#div1').hide(); hide()의 경우에는 네모선까지 모든 게 숨겨지는 기능 입니다. $(func..
[jquery] 명령어 기본규칙과 예시들① fox cat fish dog bird $(function(){ $(".cat").css("background","pink"); $("#dog").css("background","yellowgreen"); }); html+css과 비슷한 점이 이런 점이다. 아이디 선택자 : id로 설정한 것은 #로 받아준다. 클래스 선택자 : class로 설정한 것은 온점(.)으로 받아준다. 가운데의 온점(.)을 기준으로 왼쪽 $달러 부분은 가져올 부분이고, 오른쪽 css로 시작하는 부분은 속성값을 주는 부분이다. class. cat을 갖고 와서 배경색 핑크를 해주고, id dog를 갖고 와서 배경색 옐로우그린을 해줘라. 라는 뜻이라고 보면 된다. 한국 미국 영국 중국 $(function(){ $("body").css(..
[jquery] 다운로드 주의 사항 + 기본 사용법 www.jquery.com 들어가서 다운로드 해주는데 일반 다운로드 하듯이 하면 안 됨 최상단에 있는 파일로 다운을 받아야 하는데 일반적인 상황에서는 클릭을 하지만.. 클릭을 하면 안 된다. 마우스 오른쪽 클릭 후 다른 이름으로 링크 저장 head 사이에 파일명만 붙여주고, 뒤에 js만 붙이면 된다. 같은 폴더에 있으면 "jquery-3.6.0.min.js"만 해줘도 되는데 전 폴더에 있어서 ../ 트리구조를 이용했음 이 div를 지우고 싶다 제이쿼리를 사용하기 위한 기본형 (문법) ① $(document).ready(function(){ }); ② $(function(){ }); body 영역에 모든 문서 객체들을 로딩한 후에 실행문을 실행하는 방법입니다. 둘 중에 하나만 해주면 되는데 빠지면 실행을 ..

티스토리툴바