Frontend34 제이쿼리 플러그인 제이쿼리 플러그인 : 기능을 구현해 놓은 프로그래밍을 js파일로 제공하는 제이쿼리 라이브러리 마치 가전제품의 플러그처럼 웹 문서에 가져다 연동시키기만 하면 바로 사용할 수 있음 2022. 10. 31. 제이쿼리 비동기 방식 Ajax(Asychronouse Javascript and Xml) : 비동기 방식으로 데이터를 전송하고 요청하는 방식 2022. 10. 31. 효과 및 애니메이션 효과 메서드 요소를 숨겼다 보이도록 해주는 메서드 $(요소 선택).효과 메서드(효과 소요시간, 가속도, 콜백함수) 애니메이션 메서드 선택한 요소에 동작을 적용시킴 $(요소 선택).animate({애니메이션에 적욜할 속성과 값}, 가속도, 콜백함수) 효과 ex) 숨김 내용1 내용2 $(function() { $(".btn1").on("click", function() { $(".wrap").css({display:"none"}); // 숨김버튼 클릭시 사라짐 }); }); $(function() { $(".btn1").on("click", function() { $(".wrap").slideUp(1000, function() { alert("숨김 완료"); }); // 1000m/s=1초 }); }); $.. 2022. 10. 31. 이벤트 이벤트 : 사이트에 방문자가 취하는 모든 동작 핸들러 : 이벤트가 발생했을 때 호출되는 함수 단독 이벤트 등록 : $("#btn").click(function(){ 스크립트 코드 }); 1. 이벤트 대상 2. 이벤트 종류 3. 이벤트 핸들러 그룹 이벤트 등록 : $("#btn").on("이벤트 종류", function(){ 스크립트 코드 }); ex) 이벤트 대상1 리스트1 리스트2 리스트3 이벤트 대상2 리스트4 리스트5 리스트6 $(function(){ $(".btn1 a").mouseover(function () { alert('hello'); }); $(".btn1 a").focus(function () { alert('hello'); }); }); $(function(){ $(".btn1 a").. 2022. 10. 31. 제이쿼리 기본 다지기 jquery 정의 : javascript 라이브러리 언어, js의 호환성 해결함, js보다 애니메이션 쉽게 구현 선택자 : html요소 선택하여 가져옴 $(function() { $("요소 선택").css("속성", "값"); }); ex) 텍스트1 내용2 네이버 $(function() { $(".wrap_1").css("border", "1px solid orage"); }); $(function() { $(".wrap_1 p").css("background-color","yellow"); }); $(function() { $(".active").next("p").css("background-color","aqua"); }); $(function() { $(".wrap_1 p").eq(1).css("b.. 2022. 10. 30. 03 함수 함수 사용 function greeting(name, area) { // greeting 함수 생성, 매개변수 name과 area 받음 document.wirte("hello " + name, " ") document.wirte("welcome to " + area, " ") } greeting("홍길동", "korea"); // greeting 함수 호출 greeting("홍대리", "usa"); -> hello 홍길동 welcome to korea hello 홍대리 welcome to usa 스코프 스코프 : 변수 또는 함수의 이용가능한 유효 범위 지역 변수 : 스코프 영역에서 var를 붙여 선언된 변수, 스코프 영역내에서만 사용가능 내부 함수 : 스코프 영역에서 선언된 함수, 스코프 영역 내에서만 .. 2022. 10. 28. 02 객체 내장 객체 : js 엔진에 객체를 생성할 수 있는 함수가 내장되어, 필요한 경우 생성하여 사용 내장 객체 생성 참조변수 = new 객체생성함수(); ex) var car = new Object(); // ★함수 첫글자는 대문자 car.color = "white"; car.price = "1000만원"; car.getInfo = funtion() { document("색상: ", this.color, " "); document("가격: ", this.price, " "); } // 리터럴 방식 var car = { "color" : "white", "price" : "1000만원", "getInfo" : funtion() { 스크립트 코드 } } 날짜 정보 객체 참조변수 = new Date(); 참조변수 .. 2022. 10. 28. 01 기초문법 ※ 옛날 강의라 변수 var를 사용했지만, 현재 변수 var는 여러 문제로 쓰지 않는다 비교 연산자 var num1 = 10; var num2 = "10"; result1 = num1 + num2; // 10+"10" 이므로 결과는 1010 나옴 result2 = num1 == num4; // == 은 데이터타입 검사x, num4의 문자형 10이 숫자형 10으로 형변환됨, true result3 = num1 === num4; // === 은 데이터타입까지 검사, 10과 "10"이 같냐? ㄴㄴ, false result4 = num1 != num4; // != 은 데이터타입까지 검사x, 10과 10이 다르냐? ㄴㄴ, false result5 = num1 !== num4; // !== 은 데이터타입까지 검사,.. 2022. 10. 28. jquery 콜백 함수 2022. 3. 29. 이전 1 2 3 4 다음
