자바스크립트[JavaScript]/제이쿼리[Jquery]
-
Jquery[제이쿼리] 이벤트[event]메서드 mouseover,click 배우기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 7. 22:51
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 이벤트[event]메서드 mouseover,click을 배워보겠습니다. 위화면처럼 셋팅해주세요~ 짠 실행 화면입니다. 이제 여기까지는 쉽죠? =============================== $('h1').mouseover(function(){ =============================== 'h1'태그의 대상으로 mouseover
-
Jquery[제이쿼리] 앞부분 추가[prepend] 뒤부분 추가[append] 하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 6. 16:36
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 태그의 앞부분 추가[prepend] 뒤부분 추가[append]를 해보도록 하겠습니다. 위화면처럼 셋팅해주세요~ 실행을 하면 태그는 아무내용이 없기때문에 아무것도 안나올꺼에요. 이번에는 append()를 사용하여 'body'의 뒤부분에 내용을 넣어줄꺼에요. 짠~ 뒤부분에 내용이 추가된모습을 확인할수있답니다. 그럼 이번에는 앞부분에다가 내용을 추가해볼까요? prepend()를 사용하여 앞부분에 추가해보겠습니다. 이렇게 앞부분에 추가된 모습을 확인할수있답니다. 이번에는 테이블[table]의 'td'의 대상으로 뒤부분에 내용을 추가 해볼꺼에요. 여기서 a라는 배열 변수에 2가지 값을 미리 넣어서 준비를 합니다. 왜 2가지 값을 준비할까요? 'td'가..
-
Jquery[제이쿼리] HTML/TEXT 변경하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 5. 23:42
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 HTML/TEXT를 변경해 보도록 하겠습니다. 위화면처럼 셋팅해주세요~ 실행을 하면 3개는 안보일꺼에요~ 아무내용이 없기떄문이랍니다. h라는 변수에 태그의 첫번째 값을 담아주고 alert();함수를 이용하여 값을 확인! t라는 변수에 모든태그의 값을 담아주고 alert();함수를 이용하여 값을 확인! h변수의 값입니다. t변수의 값입니다. 자 이번에는 비어있는태그에 값을 넣어보도록 하겠습니다. 첫번째로는text()를 사용하여 태그에 'html Method'라는 글자를 입력해보겠습니다. 실행화면입니다. html Method 라는 글자가 그대로 찍혀있네요 이번에는 html()을 이용하여 똑같이 'html Method'라는 글자를 입력해보겠습니다...
-
Jquery[제이쿼리] 이미지[img] 변경하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 3. 19:02
안녕하세요~ 주니주니 입니다. 오늘은 제이쿼리[jquery]로 이미지[img]를 변경해보겠습니다. 위화면처럼 셋팅해주세요~ jpg파일들은 'Js_4_img'라는 폴더를 만들어 따로 관리하였습니다. 자 이제 실행을 해보겠습니다. 3개의 이미지들이 이렇게 크게 나왔습니다. 이제 이미지를 수정해보도록하겠습니다. 우선 수정하기에 앞서 alert(); 함수를 이용하여 첫번쨰 이미지의 경로를 확인해보도록 하겠습니다. 위에처럼 코딩을 하시고 실행하면! 경고창이 뜨면서 첫번째 이미지의 경로가 나온답니다. 이제 모든이미지의 경로를 'Js_4_img/3.jpg' 로 바꾸면서 width값을 300으로 바꾸도록 하겠습니다. $('img').
-
Jquery[제이쿼리] CSS변경하기[2]자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 1. 21:34
안녕하세요~ 주니주니 입니다. 어제에 이어 제이쿼리[jquery]로 테이블CSS를 변경해보겠습니다. 재일먼저 스크립트부분에 제이쿼리[jquery]를 사용할 수 있도록 셋팅! 그다음 위화면처럼 코딩해주세요~ 그리고 실행을 하면! 이렇게 나온답니다. 자 이제 변경해볼까요? $('tr:first').css('background','black').css('color','white'); 이부분은 tr중 first[첫번째] 부분의 background를 black로 color는 white로 바꾼다는 의미입니다. 첫번째 'tr' 부분의 배경이 검정색으로 글자색은 흰색으로 변경된걸 확인할수있어요! 이제 다른 'tr'부분도 변경해 보도록하겠습니다. 이번에는 홀수 부분의 'tr'을 변경해보도록하겠습니다. ※주의 : 테이블의..