목록jQuery (6)
코딩 노트
jQuery06 - 이미지 슬라이더, 텍스트 에디터, 파일 업로드
maven은 프로젝트를 세팅해놓으면 거기에 맞게 빌드업해주는 것 NPM도 마찬가지 DOCTYPE html> 이미지 슬라이더 :root { --swiper-theme-color: #2c8de0 } .swiper { width: 100%; height: 300px; } $(function(){ var swiper = new Swiper('.swiper', { // Optional parameters // direction: 'vertical', //슬라이드 방향 loop: true, //슬라이드의 순환 설정 // If we need pagination pagination: { el: '.swiper-pagination', //적용할 영역, 요소, 태그 type: 'bullets', //페이지네이션의 유형 (..
jquery05 - 캔버스 태그, group by
Lazy Loading 편의상 를 아래에 적는 것 이렇게 하면 html이 먼저 실행된다. 화면은 먼저 보이지만 기능은 나중에 구성됨. 48.chard.html DOCTYPE html> Javascript 실습 $(function(){ //canvas 제어 방식 //- canvas는 Javascript API로 제어한다. //- canvas의 그림 그리는 도구를 context 또는 graphics 라고 부름 var canvas = document.querySelector(".sketch"); //도화지를 가져옴 var context = canvas.getContext("2d"); context.fillStyle = "rgb(200, 0, 0)"; context.fillRect(10, 10, 50, 50);..
jquery04 - ajax2
checkbox_custom.html DOCTYPE html> Javascript 실습 .custom-checkbox { position: relative; display: inline-flex; justify-content: center; align-items: center; font-size: 16px; padding: 0.25em; } .custom-checkbox > [type=checkbox] { position: absolute; top:0; left:0; width:0; height:0; opacity: 0; } .custom-checkbox > span { display: block; width: 1em; height: 1em; background-image: url("./image/che..
jQuery03 - ajax
43.ajax.html DOCTYPE html> Javascript 실습 //목표 : 버튼을 누르면 43.ajax.txt를 비동기통신으로 불러와서 내용을 출력 $(function(){ $(".load-btn").click(function(){ // $.ajax({옵션}); $.ajax({ // url:"./43.ajax.txt", //불러올 대상의 주소 url:"http://localhost:8080/hello", success:function(response){ $(".display").text(response); } }); }); }); 불러오기 CORS - Cross Origin Resource Sharing, 교차 출처 자원 공유 정책 - 다른 서버에 있는 프로젝트는 비동기 통신이 원칙적으로 금지..
jQuery02 - checkbox, 화면분할
체크박스 체크박스의 이벤트는 셋 중에 하나를 걸면 된다. change를 추천한다. $(".ck").on("input", function(){}); $(".ck").on("change", function(){}); $(".ck").change(function(){}); jquery에서는 태그의 정보를 읽을 때 두 가지 명령이 있다. - .prop()은 자바스크립트에서 관리하는 태그의 정보를 읽는다. - .attr()은 태그에 써 있는 글자를 읽는다. - 원래 태그에 존재하는 속성은 prop(), 아니면 attr()을 사용 ex) prop() - placeholder, attr() - dataset console.log($(this).prop("checked")); console.log($(this).att..
jQuery01 - input, form, 정규표현식, 회원가입페이지
28.jquery.html DOCTYPE html> Javascript 실습 //- 자바스크립트식 // window.addEventListener("load", function(){ // var h1 = document.querySelector("h1"); // h1.addEventListener("click", function(){ // this.style.color = "red"; // }); // document.querySelector("h1").addEventListener("click", function(){ // this.style.color = "red"; // }); // }); //- 제이쿼리식 $(function(){ //ready 이벤트 (load + jQuery 준비완료 시점) /..