jQuery를 이용한 화면 사이즈에 따른 페이징 구현을


알아보겠습니다.


모바일 웹에서 많이 사용되는 방법으로 


리스트 형태의 화면에서 스크롤이 화면 맨 밑에 도달했을 때


추가 내용을 더 불러오는 기능입니다.


- javascript 

//브라우저 맨 아래 스크롤 이동 이벤트
$(window).scroll(function () {
	if ($(window).scrollTop() == $(document).height() - $(window).height()) {
			alert("bottom");
    }
});

jQuery를 이용하여 화면의 맨 밑에 도달했을 때 알림창을 띄우는데


알림창 띄우는 부분을 제거하시고 


추가 리스트를 불러오는 기능을 넣어주시면 될꺼 같습니다~~


예제보기


관련링크


- [jQuery] jquery hide() show() animate()

- [jQuery] jquery select value, select 값 가져오기, select 속성 값

- [jQuery] jquery get get()

- [jQuery] jquery form submit()

- [jQuery] jquery change change()


저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] jquery hide() show() animate()  (0) 2016.01.28
[jQuery] jquery select value, select 값 가져오기, select 속성 값  (0) 2016.01.27
[jQuery] jquery get get()  (0) 2015.12.18
[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jquery change change()  (0) 2015.12.16

jQuery show() hide() 사용법에 대해서 알아보겠습니다.


show()와 hide() 반대로 동작한다고 보시면 될꺼 같습니다.


show()는 숨긴 DOM을 다시 나타나게 하고


hide()는 DOM을 숨기는 역할을 합니다.


hide() 했을 때는 DOM의 영역까지 숨기는 


css의 display:none의 속성이 적용되니 참고하시기바랍니다.


소스와 예제를 통해서 알아보겠습니다.


- html 

<p id="result">Hide and show</p>
<button id="visible">Animate</button>

- javascript 
$(function () {
	$('#visible').off('click').on('click', function() {
  	if ($('#result').attr('hide') == "true") {
    	$('#result').show(function() {
    		$(this).attr('hide', false);
   	 	});
    } else {
    	$('#result').hide(function() {
    		$(this).attr('hide', true);
   	 	});
    }
  });
});





예제보기

일반적으로 DOM을 show(), hide() 할 때는 하나의 버튼을 사용하기 때문에 


버튼 하나를 생성해서 애니메이션을 컨트롤하였습니다.


최초에 DOM이 보이는 상태에서 버튼을 클릭하면


hide() animation이 적용되고 DOM의 hide상태인지 show상태인지 구분하기 위해


“hide”란 속성에 true 값을 넣어줍니다.


반대로 DOM이 안보이는 상태에서는 


hide=“true”로 되어있기 때문에 


show()가 실행되어 다시 나타나게 됩니다.


- 관련 링크

- [jQuery] jquery select value, select 값 가져오기, select 속성 값

- [jQuery] - [jQuery] jquery get get()

- [jQuery] - [jQuery] jquery form submit()

- [jQuery] - [jQuery] jquery change change()

- [jQuery] - [jQuery] jQuery each 함수, each 반복, each 루프



저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] window 화면 사이즈를 이용한 페이징 구현  (0) 2016.02.23
[jQuery] jquery select value, select 값 가져오기, select 속성 값  (0) 2016.01.27
[jQuery] jquery get get()  (0) 2015.12.18
[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jquery change change()  (0) 2015.12.16

jQuery select 사용법에 대해서 알아보겠습니다.


select box를 사용하다보면 select box의 value,


즉 텍스트가 필요할 수도 있고 그 외 다른 속성들이 필요할 수도 있습니다.


value값은 val() 형태로 가져올 수 있고


그 외 필요한 값들은 DOM 안에 attribute 값을 추가하여 사용하면 편하게


사용할 수 있습니다.


소스와 예제를 통해서 알아보겠습니다.


- html 

	
<select id="select">
<option value="카카오톡" code="Kakao" no="1">1. 카카오톡</option>
<option value="라인" code="Line" no="2">2. 라인</option>
<option value="페이스북" code="Facebook" no="3">3. 페이스북</option>
<option value="인스타그램" code="instagram" no="4">4. 인스타그램</option>
</select>
<br/>
<br/>
<div id="value"></div>
<div id="code"></div>
<div id="no"></div>

- javascript 

	
$(document).ready(function () {
    // 초기 값 지정
    $('#value').text($("#select option:selected").val());
    $('#code').text($("#select option:selected").attr('code'));
    $('#no').text($("#select option:selected").attr('no'));
  
    // select 선택이 변경 됐을 때 호출 되는 함수 
    $('#select').change(function() {
    $('#value').text($("#select option:selected").val());
    $('#code').text($("#select option:selected").attr('code'));
    $('#no').text($("#select option:selected").attr('no'));
  });
});


처음 선택된 값을 지정하기 위해서 초기값을 화면에 출력하였고


change() 함수를 이용하여 select의 선택이 변경될 때 


값을 변경하여 화면에 출력하였습니다.


change() 함수는 DOM의 상태가 변경될 때 호출되는 함수입니다.


- change() 함수 알아보기

- [jQuery] jquery change change()





예제보기


- 관련 링크

- [jQuery] jquery get get()

- [jQuery] jquery form submit()

- [jQeury] jQuery css, jQuery 스타일 적용

- jQeury] val(), text() 값 셋팅, 값 가져오기 setValue, setText

- [jQeury] jquery tigger, jquery 함수 실행, 이벤트 실행

저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] window 화면 사이즈를 이용한 페이징 구현  (0) 2016.02.23
[jQuery] jquery hide() show() animate()  (0) 2016.01.28
[jQuery] jquery get get()  (0) 2015.12.18
[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jquery change change()  (0) 2015.12.16

jquery에서 get 함수에 대해 알아보겠습니다.

jquery get  함수는 jquery object와 매칭되는 DOM을 반환합니다.

- html 

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>
<hr/>
<span id="result1"></span>
<span id="result2"></span>
- javascript  
$(document).ready(function () {
  var foo = $('li').get(0);
  var bar = $('#bar').get(0);
  
  $('#result1').text(foo.nodeName);
  $('#result2').text(bar.parentElement.nodeName);
});



jquery get 함수를 이용해서 DOM을 반환하고 선택된 DOM의 nodename과 parentElement의 Nodename을 결과로 적었습니다.

jquery get 함수를 이용한다면 attribute, class등등 다양한 값을 가져올 수 있습니다.

예제보기



'jQuery' 카테고리의 다른 글

[jQuery] jquery hide() show() animate()  (0) 2016.01.28
[jQuery] jquery select value, select 값 가져오기, select 속성 값  (0) 2016.01.27
[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jquery change change()  (0) 2015.12.16
[jQuery] jQuery each 함수, each 반복, each 루프  (0) 2015.10.29

jquery에서 form 전송에 대해 알아보겠습니다.

jquery form 전송은 간단하게 submit() 함수를 호출하여 전송이 가능합니다.

- html 

<form name="testForm" id="login">
    <input type="text" id="id"/>
    <input type="text" id="pw"/>
    <input type="submit"/>
</form>
<hr/>
<button id="btn">전송</button>

- javascript 

	
$(document).ready(function() {
    $("form").submit(function(event) {
  	var id = $('#id').val();
    var pw = $('#pw').val();
    
   	if (id != "" && pw != "") {
    	alert("id :: " + id + ", pw :: " + pw);
    }
    
    if (id == "") {
    	alert("id를 입력해주세요.");
    	event.preventDefault();
      return;
    }
    
    if (pw == "") {
    	alert("pw를 입력해주세요.");
    	event.preventDefault();
      return;
    }   
  });
  
  $('#btn').click(function () {
  	$("form").submit();
  });
});


<form></form> 내부의 type="submit" 의 input DOM을 두고 form 전송 이벤트를 구현할 수 있다.

별도의 전송 버튼을 이용하여 폼을 전송하고 싶을 때는 버튼을 만들고 $("form").submit() 을 바로 호출하면 버튼을 이용한 전송도 가능하다.


- 예제 : 이동

'jQuery' 카테고리의 다른 글

[jQuery] jquery select value, select 값 가져오기, select 속성 값  (0) 2016.01.27
[jQuery] jquery get get()  (0) 2015.12.18
[jQuery] jquery change change()  (0) 2015.12.16
[jQuery] jQuery each 함수, each 반복, each 루프  (0) 2015.10.29
[jQuery] jQuery css, jQuery 스타일 적용  (0) 2015.10.15

jquery change함수에 대해 알아보겠습니다.

jquery chage함수는 DOM의 상태 변경 등의 이벤트가 발생했을 때 사용할 수 있습니다.

- html 

<div>
  <select id="sweets">
    <option>Chocolate</option>
    <option>Candy</option>
    <option>Taffy</option>
    <option>Caramel</option>
    <option>Fudge</option>
    <option>Cookie</option>
  </select>
</div>
<hr/>
<div>
  <input type="text" id="txt"/>
  <span id="result"></span>
</div>

- javascript

$(document).ready(function () {
	$('#sweets').change(function () {
  		alert($(this).val());
  });
  
  $('#txt').change(function() {
  	// validation check 
    $('#result').text($(this).val());
  });
});


첫번째는 change 함수를 이용해서 HTML의 select 변경이 일어났을 때 선택된 이름을 알림창으로 나타냅니다.

두번째는 change 함수를 이용해서 HTML input 값을 다 입력하고 input의 focus가 사라졌을 때 

span에 input에 입력된 값을 표시합니다.

input에 적용된 change 함수의 경우에는 텍스트가 입력될 때 마다 적용되는게 아니라

focus가 사라졌을 때 적용된다는 점을 주의해주시기 바랍니다.


예제보기



'jQuery' 카테고리의 다른 글

[jQuery] jquery get get()  (0) 2015.12.18
[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jQuery each 함수, each 반복, each 루프  (0) 2015.10.29
[jQuery] jQuery css, jQuery 스타일 적용  (0) 2015.10.15
jQuery] val(), text() 값 셋팅, 값 가져오기 setValue, setText  (0) 2015.10.11
jQuery each 함수를 이용하여 선택된 요소만큼 반복하는 each() 함수를 알아보겠습니다.

1. each()

선택된 요소만큼 반복 작업을 진행하는 함수 입니다.


게시판에서 자주 쓰는 전체 선택 전체 해제를 예제로 each함수를 알아보겠습니다.

<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>
<div><span class="chk">체크박스</span></div>

<button id="check">전체 선택</button><button id="uncheck">전체 해제</button>


- jQuery

$(document).ready(function () {
	$('#check').off('click').on('click', function() {
    	$('.chk').each(function () {
        	$(this).addClass('active');
        });
    });
    
    $('#uncheck').off('click').on('click', function() {
    	$('.chk').each(function () {
        	$(this).removeClass('active');
        });
    });
});


전체 선택 버튼이 클릭됐을 때 each함수를 이용하여 chk 클래스를 가진DOM에 active 클래스를 추가하고

전체 해제 버튼 클릭시에 chk클래스를 가진 DOM에 active 클래스를 삭제합니다.


예제 : 이동



'jQuery' 카테고리의 다른 글

[jQuery] jquery form submit()  (0) 2015.12.17
[jQuery] jquery change change()  (0) 2015.12.16
[jQuery] jQuery css, jQuery 스타일 적용  (0) 2015.10.15
jQuery] val(), text() 값 셋팅, 값 가져오기 setValue, setText  (0) 2015.10.11
[jQuery] jquery tigger, jquery 함수 실행, 이벤트 실행  (0) 2015.10.05

jQuery를 이용한 css, 스타일 시트 적용에 대해 알아보겠습니다.

.css() 함수를 이용하여 css속성에 대한 값을 가져오고 값을 지정할 수 있습니다.

.css("속성", "value") 의 형태로 사용하시면 됩니다.


<span id="result">&nbsp;</span>

<div class="div" style="background-color:blue;"></div>

<div class="div" style="background-color:rgb(15,99,30);"></div>

<div class="div" style="background-color:#123456;"></div>

<div class="div" style="background-color:#f11;"></div>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<br/>

<button class="btn" id="change">1번 검정색 변경</button>

<button class="btn" id="change2">2번 노랑 변경</button>

<button class="btn" id="change3">3번 width 100</button>

<button class="btn" id="change4">4번 height 100</button>


- jQuery

$(document).ready(function() {

     var color = $( this ).css( "background-color" );

    $( "#result" ).html( "That div is <span style='color:" +

    color + ";'>" + color + "</span>." );

    

    $('.btn').off('click').on('click', function() {

     var idx = $('.btn').index(this);

      var div = $('.div').eq(idx);

      if (idx == 0) {

      div.css("background-color", "black");

      }

      else if (idx == 1) {

      div.css("background-color", "yellow");

      }

      else if (idx == 2) {

      div.css("width", 100);

      }

      else if (idx == 3) {

      div.css("height", 100);

      }

  });

});


각 사각형을 클릭했을 때 박스의 rgb 값을 나타내고 있습니다.

또한 각 버튼에 css속성과 값을 적용시켜

색깔을 변경시키거나 가로, 세로 길이를 조정할 수 있습니다.


예제 : 이동


다음 시간에는 jquery를 이용한 텍스트 자르기 붙이기, 비교 등을 알아보겠습니다.



'jQuery' 카테고리의 다른 글

[jQuery] jquery change change()  (0) 2015.12.16
[jQuery] jQuery each 함수, each 반복, each 루프  (0) 2015.10.29
jQuery] val(), text() 값 셋팅, 값 가져오기 setValue, setText  (0) 2015.10.11
[jQuery] jquery tigger, jquery 함수 실행, 이벤트 실행  (0) 2015.10.05
[jQuery] jquery this, 코드 줄이기, jquery index, 인덱스  (0) 2015.10.04

+ Recent posts

티스토리툴바