독학-jQuery

티스토리 뷰

독학/JavaScript

독학-jQuery

나아눙 2022. 9. 3. 02:32

jQuery전체 소스

<!DOCTYPE html>
<html>
<head>
<title>제이쿼리</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
});
</script>
</head>
<body>
</body>
</html>

$(function(){

});

</script>

설렉터 사용

$(' ')

클릭시 이벤트 발생

엘리먼트 보이기와 숨기기

엘리먼트 보이기

$(' ').show

엘리먼트 숨기기

$(' ').hide

$(function(){
$('.btnshow').click(function(){
$('.btn').show();
});
$('.btnhide').click(function(){
$('.btn').hide();
});
});

마우스 온오버시 이벤트 발생

마우스 포인터가 대상체를 올리면

$('.class_name').mouseenter();

마우스 포인터가 대상체를 떠날때

$('.class_name').mouseleave();

hover()

$('.class_Name').hover(function(){
$('.class_Name').css('border','5px solid grren');
},
function(){
$('.class_Name').css('border','5px solid pink');
}
);

스크롤시 이벤트 발생,현재 스크롤 값 보기

스크롤시 이벤트 발생

선택자.scroll(function(){
//스크롤 이동시 작동코드
});

스크롤 값 보기

$('.content').scrollTop();

변수 선언

var hello = $('.hello');

CSS제어하기

$('SELECTOR').css('color','pink');

페이드 효과

fadeIn(),fadeOut() 사용

엘리먼트를 3초간 서서히 보이기(시간 적용)

$(' ').fadeIn(3000);

엘리먼트를 3초간 서서히 숨기기(시간 적용)

$(' ').fadeOut(3000);

fadeIn('slow'), fadeOut('fast')

슬라이드 효과

slideDown(),slideUp()

slideUp('slow'), slideDown('fast')

애니메이션 효과

$('.hello').animate({
top:100,
left:200
});

내용 변경 하기

$('.change_greeting').text('hi');

html태그 불러오기(내용 변경도 가능)

$('.class_Name').html('<p>hi</p>');

클래스 추가,삭제하기

클래스 추가

$(function(){
var base = $('.base');
base.addClass('base_text');
});

클래스 삭제

$(function(){
var id2 = $('#each2');
id2.removeClass('common');
});

요소의 속성값 변경하기

attr('속성','속성값');

$(function(){
var image = $('.image');
image.click(function(){
image.attr('src','/material/images/jQuery/apple.png');
});
});

태그 이동하기

먹을대상.append(먹힐 대상);

먹힐대상.appendTo(먹을 대상);

그 외 내용 변경하기

요소의 내용만 비어버리기

$('.hello').empty();

요소 + 태그 비어버리기

$('.hello').remove();

텍스트 필드 값 변경

$('.text1').val('이름을 입력');

포커스

포커스를 얻을때 어떤 행위하기

$('.class_Name').focus();

포커스를 벗어날때 어떤 행위하기

$('.class_Name').blur();

var text1 = $('.text1');
text1.focus(function(){
text1.val('포커스를 얻음.');
});
text1.blur(function(){
text1.val('포커스를 벗어남 .');
});

편리한 this

이벤트를 발생시킨 자기 자신을 선택싱 같은 클래스를 갖더라도 자기 자신만 선택하여 처리

$(function(){
  $('.view').click(function(){
    $(this).text('클릭완료');
  });
});

this로 text,html,속성,조정하기

$(function(){
$('.click').click(function(){
alert($(this).html());
});
});

클릭시 텍스트와 태그까지 같이 나온다.

$(function(){
$('.click').click(function(){
$(this).html('<b>Hello World</b>')
});
});

클릭시 텍스트와 태그까지 같이 변경된다.

$(function(){
$('.click').click(function(){
$(this).text('Hello World');
});
});

클릭시 텍스트가 변경된다.

$(function(){
$('.click').click(function(){
alert($(this).text());
});
});

클릭시 텍스트가 나온다.

$(function(){
$('.click').click(function(){
alert($(this).attr('class'));
});
});

클릭시 class의 속성의 값을 가져온다.

$(function(){
$('.click').click(function(){
$(this).attr('style','color:skyblue');
});
});

클릭시 텍스트의 color 색이 바뀐다.

$(function(){
$('.click').click(function(){
$(this).attr('type','button');
});
});

클릭시 type이 버튼으로 바뀐다.

태그 찾기

$(function(){
$('.hello').click(function(){
$(this).find('b').css('color','skyblue');
});
});

특정 태그 앞에 태그 추가하기

선택자.before(추가할 태그)

특정 태그 뒤에 태그 추가하기

선택자.after(추가할 태그)

태그 개수 구하기

선택자.length

each로 태그 다루기

idx는 인덱스(index)를 의미하며 각 p태그의 순서 값(순서는 0부터 시작)

$(function(){
$('p').each(function(idx){
txt = $(this).text() + (idx + 1);
$(this).text(txt);
})
});

모두 text뒤에 인덱스가 달림

$(function(){
$('input').each(function(){
$(this).attr('type','button');
})
});

모두 button으로 바뀜

$(function(){
$('input').each(function(){
$(this).addClass('hi');
})
});

모두 클래스가 추가됨

eaxh로 배열 다루기

$.each(배열변수, function (idx, item) {
})

$(function(){
var arr = new Array();
arr = ["korea","usa","japan","united kingdom","germany"];
$.each(arr, function(idx, item){
console.log('idx' + idx);
console.log('item' + item);
});
});

체크박스 체크여부 확인하기

$(선택자).is(":checked");

$(function(){
if($('input').is(":checked") == true){
$('b').text('체크된 상태');
}else{
$('b').text('체크 안 된 상태');
}
});

input태그 선택한 파일 목록보기

$('selector').files;

<body>
<form method="post" action="upload-multiple.php" enctype="multipart/form-data">
<input type="file" id="fileUpload" name="upload[]" multiple>
<ul id="fileList"></ul>
<input type="submit" value="send">
</form>
</body>

웹페이지 최하단에 도달했을때 스크롤 이벤트 작동(페이지 바닥 감지)

window 웹브라우저 창

document 웹브라우저가 출력하는 웹문서(웹페이지) 의미

$(function(){
var page = 1;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
page++;
$('.content').append('<p>New Hello World ' + page+'</p>');
$('.content').append('<p>New Hello World ' + page+'</p>');
$('.content').append('<p>New Hello World ' + page+'</p>');
$('.content').append('<p>New Hello World ' + page+'</p>');
$('.content').append('<p>New Hello World ' + page+'</p>');
$('.content').append('<p>New Hello World ' + page+'</p>');
}
});
});

AJAX사용후 불러온 엘리먼트의 이벤트가 동작하기 않을때

$('selector').click(function(){

->$(document).on('click', 'selector', function(){

'독학 > JavaScript' 카테고리의 다른 글

JavaScript 독학1 (0)	2022.08.27

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

sy의 코딩 개발일지

티스토리 뷰

독학-jQuery

fadeIn('slow'), fadeOut('fast')

slideUp('slow'), slideDown('fast')

'독학 > JavaScript' 카테고리의 다른 글

티스토리툴바