제이쿼리 기본 예제 설명
$("#move_up").click( function() {
$("#change_me").animate({top:30},200); // 탑 좌표가 30인 곳으로 0.2초 만에 가기
});//end move_up
$("#color").click( function() {
$("#change_me").css("color", "purple"); // 컬러변경
});
$("#disappear").click( function() {
$("#change_me").toggle('slow'); // 토글 천천히 사라짐, fast 빠르게 사라짐
});
$(".guess_box p").remove(); // guess_box 아래 p 태그 삭제
var discount = Math.floor((Math.random()*5) +5); // 5~9 까지만 랜덤하게 나옴
$(this).append(discount_msg); //붙이기
if($.contains(this, document.getElementById("has_discount"))) // this 의 요소에 에 document.getElementById("has_discount") 속성이 있다면 true
{
var my_num = getRandom(5);
discount = "<p>your discount is"+my_num+"%</p>";
}else{
discount = "<p>sorry no discount this time</p>";
}
$f = $(".fish").parent().parent().detach();
// remove 는 삭제고 detach 는 변수에 저장후 삭제
$(".hamburger").replaceWith("<li class='portable' >햄버거삭제했다</li>");
// hamburger 클래스를 portable 로 교체
$(".meat").after("<li class='tofu' >tofu</li>");
// meat 클래스 바로 다음에 <li class='tofu' >tofu</li> 추가
$m = $(".meat").detach(); // 배열로 저장됨
$(".tofu").parent().parent().addClass("veg_leaf"); // 부모의 부모에 addClass
$(".menu_entrees li").first().before($f); // .menu_entrees 의 첫번째에 위치한 li 전의 자 리에 $f 넣기
$(".tofu").each( function(index,value){
$(this).after($m[index]); // .tofu 다음의 위치에 $m[i] 삽입
});//end each
$("#lightning1").fadeIn(250).fadeOut(250); // 0.25초동안 생기고 0.25초동안 사라짐
$("#lightning1").fadeTo(4000,0.33).fadeTo(4000,0); // 4초 동안 0.33 의 투명도로 나옴, 4초동안 0의 투명도로 나옴
// parent 부모
// children 자식
// prev 형제 중 왼쪽
// next 형제 중 오른쪽
// before 전
// after 후
// slice(1,3) 1,2번
// not(".local") local 이라는 클래스 뺀 모든 요소
// filter(".orcanic") orcanic 이라는 클래스만 선택
// parents , $("#asd").parents() #asd 요소의 부모, 할아버지, 고조할아버지 다선택
$("div").slideUp(1000);
$("div").slideDown("fast");
$("div").slideToggle("normal");
$("#searchColumn option:selected").val(); 선택된 option 값 가져오기
var array = ['a','b','c','d'];
var index = $.inArray('d',array); 값, 배열명 넣으면 값이 있는 인덱스 번호가 나옴
alert(index);
$("h1").empty(); h1 태그 사이의 모든 내용 삭제
$("#h").empty(); div 태그 사이의 모든내용 다 삭제 div 태그는 그대로 남아있음
var c = $("#a").attr("title"); a라는 아이디를 가진 요소의 title 속성값 가져오기
$("#a").attr("title" , "이종면");
a라는 아이디를 가진 요소의 title 속성값을 이종면 으로 저장하기
$("#a").removeAttr("title"); title 속성 삭제
function a(){
$("#on").val("포커스~");
}
function b(){
$("#on").val("포커스잃었다...~");
}
window.onfocus = a;
window.onblur = b;
인터넷 창에 마우스를 올려두면 a 함수 실행 , 창에서 마우스를 잃으면 b 함수 실행
=> 과부하를 줄일수있음
int1 = setInterval(function(){alert("2초마다실행")} ,2000); 함수, 초
$("#off").click(function(){ off 클릭하면 int1 가 중지됨
clearInterval(int1);
});
댓글
댓글 쓰기