• J볃교

JQUERY 태그 및 설명 리스트

2018-11-07 266

설명

  • 카카오톡 링크

JQUERY 태그 및 설명 리스트 입니다~

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

$(document).ready(function() {
//alert('페이지가 전체 다 불러와지면 실행될거에요~');
}) //페이지가 전체 다 불러와지면 실행될거에요~

$(window).resize(function () {
}); //script 반응형

//애니메이션(동작, 시간, 콜백)
$("").animate({"":""},Time,function() {
});
/* 클래스에 관련된것 */
$("").addClass(""); // 클래스 추가
$("").removeClass(""); // 클래스 제거
$("").hasClass(""); //클래스가 있는지 확인
$("").attr(""); // 속성불러오기

/* 효과 */
$("").css({"":""}) //CSS 속성주기
$("").show(); // 보여주기
$("").hide(); // 감추기
$("").fadeIn(); // 페이드 효과 하면서 보여주기
$("").fadeOut(); // 페이드 효과 하면서 감추기
$("").slideUp(); // 슬라이드업
$("").slideDown(); // 슬라이드다운

/* 찾아가는것 */
$("").parent(); // 바로위 부모
$("").parents(); // 부모를 지정해서 올라갈 수 있음
$("").find(); // 자식을 찾는 것
$("").eq(); //몇번째 요소
$("").find().eq(); // 자식 몇번째 껄
$("").next(); // 해당하는 요소의 다음 요소
$("").prev(); // 해당하는 요소의 이전 요소
$("").siblings(); //해당요소 주변 친구들

/* 스크롤에 관한것 */
$(window).scrollTop(); // 현재 스크롤위치
$("").offset().top // 해당 하는게 위에서 얼마만큼 떨어져있나

/* 추가 */
$("").append(); // 기존에 있던 내용에다가 "추가" 추가한다
$("").html(); // 기존에 있던 내용을 "지우고" 추가한다 (html 이먹음)
$("").text(); // 기존에 있던 내용을 "지우고" 추가한다 (html 안먹음)
$(".img2").insertBefore($(".img")).fadeIn(3000); // .img [앞에다가] .img2를 이동시켜달라는 뜻이다.

/* 체크여부 확인 */
/* - id가 동일한 체크박스에 대하여 선택되어 있는지 확인 : true / false 반환 */
$("#checkbox").is(":checked") ;
$("input:checkbox[id='checkbox']").is(":checked");
/* 1.6이상일때 */
$("#checkbox").prop("checked");

/* 체크박스 전체 선택하기 / 해제하기 */
- 전체 선택하기
$("#checkbox").prop('checked', true) ;
$("#checkbox").attr('checked', true) ;

- 전체 해제하기
$("#checkbox").prop('checked', false) ;
$("#checkbox").attr('checked', false) ;

/* 체크된 체크박스 value */
$('#checkbox:checked').each(function() { 
	alert($(this).val());
});



$(".img").on("click", function() {
	alert('1');
});// .img를 클릭하였을때

$(".img").on("click", function() {
	$(".img2").slideDown(1000);
});// .img를 클릭하였을때 응용 1

$(".img").hover(function() {
	alert('1');
});// .img를 마우스 호버하였을때

$(".img").hover(function() {
	$(".img2").slideDown(1000);
});// .img를 마우스 호버하였을때 응용 1

$(".img").mouseleave(function() {
	alert('1');
}); // 마우스가 밖으로 나갔을때

$(".img").mouseleave(function() {
	$(".img").slideUp(1000);
}); // 마우스가 밖으로 나갔을때 응용 1

$.ajax({
	// type을 설정합니다.
	type : 'GET', // GET 으로 할지 POST 로 할지
	url : "파일경로",
	// 사용자가 입력하여 id로 넘어온 값을 서버로 보냅니다.
	data : {"idx" : '값보낼것'},
	// 성공적으로 값을 서버로 보냈을 경우 처리하는 코드입니다.
	success : function (data) {
		// 서버에서 Return된 값으로 중복 여부를 사용자에게 알려줍니다.
		data = data.replace(/&lt;/gi,'<'); // 모든 &lt; 를 < 로 바꾼다
		$("").html(data); //값을 여기다가 넣어준다
	}
});