Git repository

210830

JQuery

JS라이브러리언어 중 하나
http://jquery.com (다운로드 > 밑으로 > CDN > 1.x버전 > 두가지 우클릭해서 다른이름으로저장 > js폴더)

기본문법
$("선택자").css("속성","값");

$(document).ready(function(){}//window.onload = function(){} 대신 사용됨
$(function(){}//윗줄의 축약형

$(선택자).parent() : 선택요소를 기준으로 부모요소 선택
$(선택자).children() : 선택요소를 기준으로 자식요소를 선택
$(선택자).next() : 선택요소를 기준으로 형제요소 중 다음요소 선택
$(선택자).siblings() : 선택요소를 기준으로 형제요소 선택
//체이닝 기법, 하나의 선택자에 대하여 같은 메서드를 여러 차례 이어서 작성하는 적용기법
$("#wrap h3").css("font-size","20px").css("background-color","yellow");
//폼의 입력요소를 선택할때 $(":종류") 형식의 선택자 사용
$(":text").css({"background-color":"#ccc","border":"solid 1px #000","color":"green"});

odd홀수 인덱스(index는 0부터)
even짝수 인덱스
.eq()인덱스번호 0부터 시작(가장많이사용)
lt()인덱스번호, 3번째 미만요소, 012
gt()인덱스번호, 3번째 초과요소, 456
contains('내용') 내용이포함되어있을경우 선택
has('태그') 태그를 포함한 li선택
선택자의 하위요소 a요소만 선택
.not() - 특정요소 제외

.html() 하위요소를 불러오는것, 내용 새로 바꿈(js의 area.innerHTML과 비슷)
.text() 요소에 텍스트를 새 택스트로 바꿈
.append() 마지막 위치에 새요소 추가
.prepend() 첫 위치에 새요소 추가
(새요소).insertBefore(요소선택)
(새요소).insertAfter(요소선택)

//복제해서 맨 마지막 위치에 추가
$(".obj1").clone().appendTo("ul#list3");
//인덱스 0번째 삭제
$("ul#list3 li").eq(0).remove();
//attr("") 클래스 값을 반환
$("ul#list3 li").eq(0).attr("class");
//.attr("속성명","속성값") 클래스값을 새로 바꿔준다. attribute속성
//.attr({"":"","":"","":""})여러개의 속성값을 바꿀경우 {}사용
$("ul#list3 li").eq(0).attr("class","obj2");

$(".obj2").css("background","yellow");
$("ul#list3 li").eq(0).addClass("obj3");//클래스 추가
$(".obj3").css("color","red");
$("ul#list3 li").eq(0).removeClass("obj3");//클래스 삭제
$("ul#list3 li").eq(0).toggleClass("obj3");//클래스 추가/삭제(없을땐 있게, 있을땐 없게)

$(this).find("video").get(0);//하위요소 중 첫 video 찾기

jq이벤트

$("#btn1").click(function(){//btn1클릭했을때
    $("#textZone").css("color","blue");//textZone글씨색 블루
});
$("#btn2").mouseover(function(){
    $("#textZone").css("background-color","yellow");
});
$("#btn2").mouseout(function(){
    $("#textZone").css("background-color","#fff");
});
$("#btn2").focus(function(){
    $("#textZone").css("background-color","red");
});
$("#btn2").blur(function(){
    $("#textZone").css("background-color","#fff");
});
$("#btn3").bind("mouseover focus",function(){//여러개 이벤트 동시처리
    $("#textZone").css("color","green");
});
$("#btn3").bind("mouseout blur",function(){
    $("#textZone").css("color","#000");
});
$("#listWrap").mouseenter(function(){//하위요소까지 이벤트 적용(vs mouseover)
    $(".list1").css("display","block");
});
$("#listWrap").mouseleave(function(){//하위요소까지 이벤트 적용(vs mouseout)
    $(".list1").css("display","none");
});
//토글은 생략
$(".hover").hover(function(){//$(this) 이벤트가 발생된 자기 자신//첫째 함수는 마우스 올렸을때
    $(this).css("color","aqua");
},function(){//두개(마우스 땟을 때)
    $(this).css("color","red");
});

jq이펙트

hide,show,toggle,slideUp,slideDown,slideToggle,fadeOut,fadeIn,fadeToggle,fadeTo

$(".box1").hide();//사라지는 이펙트
$(".box1").hide(1000);//1초만에 사라지는 이펙트
$(".box1").hide(slow);//느리게
$(".box1").hide(function(){});//콜백

//$("선택요소").hide("시간",콜백함수);
//$(element).slideUp(1000,method,callback);
//속도slow,normal,fast,milliseconds(1/1000)
//콜백함수. effect 메소드가 모두 완료된 후에 실행될 함수(생략가능)

//선택요소를 지정된 만큼만 투명하게 변환시키려고 할때 사용
//속도,투명도 0.3만큼만 노출시킨다. 0~1까지
//fadeTo(속도,0.3)

jq애니메이션

//$(선택자).animate({"속성":"속성값","":""},시간,가속도);
/*background-color속성은 .animate()에서 실행안되는 현상 해결
http://jqueryui.com에서 stable 버전의 파일 다운로드 후 jquery-ui.min.js파일만 복사 사용*/
//http://gsgd.co.uk/sandbox/jquery/easing/ - 가속도 함수 설정
$("#box1").animate({"width":"200px","height":"200px","opacity":"0.5","left":"500px","background-color":"green"},2000,"easeOutBounce").animate({"width":"100px","height":"100px","opacity":"1","left":"0","background-color":"blue"},2000,"easeOutBounce");//.animate 두개 사용으로 돌아오게

//stop()현재 진행중인 효과 정지
//clearQueue() 큐에 쌓인 효과들을 삭제
//버튼을 여러번 클릭하니까 요소가 혼자서 움직이는 현상없앨때 사용
//애니메이션 앞에 사용
$("#rightBtn").click(function(){
    $("#box2").stop().animate({"left":"+=100px"},500,"linear");
});
$("#leftBtn").click(function(){
    $("#box2").clearQueue().animate({"left":"-=100px"},500,"linear");
});

210901

js코드 jq로 구현하기

210902~3

jq로 웹페이지 코딩

$("선택자").addCalss("클래스명");//선택자에 클래스 추가
$("선택자").removeClass("클래스명");//선택자에 클래스 제거

var i = $("선택자").index();//클릭한 요소의 인덱스번호 반환

리뉴얼디자인 태블릿 완료