반응형

 jQuery - append, prepend, after, before

 

before : 선택한 요소의 앞에 내용 삽입

after : 선택한 요소의 뒤에 내용 삽입 

prepend : 선택한요소의 자식요소 앞에 내용삽입

append : 선택한요소의 자식요소 뒤에 내용삽입

after() Inserts content after selected elements
before() Inserts content before selected elements
append() Inserts content at the end of selected elements
prepend() Inserts content at the beginning of selected elements

 

 

.

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] javascript - How to format $.now() with Jquery  (0) 2020.11.10
[javascript] jQuery HTML / CSS Methods  (0) 2020.10.21
[javascript] Deleting duplicated values from html form drop-down option list  (0) 2020.10.15
[javascript] null, undefined, 공백 체크  (0) 2020.10.12
[CSS] CSS Selector  (0) 2020.09.08
반응형

[jQuery] Deleting duplicated values -> drop-down option list

 

select > option 에서 중복값 삭제하기. 

 

<select name="det_pas_object_gatve" class="det_pas_object_select_css">
<option selected="selected" value="">--- Choose street ---</option>
    <option value="Barrow">Barrow</option>
    <option value="Hornets">Hornets</option>
    <option value="Barrow">Barrow</option>
    <option value="Stanley">Stanley</option>
    <option value="Simon">Simon</option>
    <option value="Barrow">Barrow</option>
</select>
       var foundedinputs = [];
       $("select[name=det_pas_object_gatve] option").each(function() {
         if($.inArray(this.value, foundedinputs) != -1) $(this).remove();
         foundedinputs.push(this.value);
       });
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

Bootstrap 4.5  (0) 2020.08.18
Chart.js 챠트  (0) 2020.08.18
jsFiddle - 론트엔드 기술인 HTML, CSS, JavaScript를 웹에서 작성해서 바로 테스트  (0) 2020.06.23
ECMAScript 6 compatibility table  (0) 2020.06.22
Vue.js가 무엇인가요?  (0) 2020.06.19
반응형

 

Bootstrap

Another popular framework is Bootstrap, it uses HTML, CSS and jQuery to make responsive web pages.

To learn more about Bootstrap, go to our Bootstrap Tutorial.

 

...

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

2019년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)  (0) 2020.06.19
ECMA Script 6? 버전 특징  (0) 2020.06.19
javascript - toggle switch  (0) 2020.06.03
WebSquare 2.0 Developer Guide  (0) 2020.05.21
WebSquare5 간단 사용법  (0) 2020.05.21
반응형

 AJAX Cross Origin plugin


로컬 프록시를 작성할 필요없이 Cross Origin AJAX 요청을 허용하는 jQuery 플러그인입니다.   

http://www.ajax-cross-origin.com/

 

Ajax Cross Origin - jQuery plugin

Source code In order maintain this site and keep it running, we ask for symbolic donation before you download the sources. You can donate as much as you want, even $1 is enough. The package contains the source code files include instructions and a test pag

www.ajax-cross-origin.com

<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="js/jquery.ajax-cross-origin.min.js"></script>
</head>

<body>

<select id="service">
  <option value="http://ip.jsontest.com/">IP Address</option>
  <option value="http://headers.jsontest.com/">HTTP Headers</option>
  <option value="http://date.jsontest.com/">Date & Time</option>
  <option value="http://echo.jsontest.com/key/value/one/two">Echo JSON</option>
  <option value='http://validate.jsontest.com/?json={"key":"value"};'>Validate</option>
  <option value="http://code.jsontest.com/">Arbitrary JS Code</option>
  <option value="http://cookie.jsontest.com/">Cookie</option>
  <option value="http://md5.jsontest.com/?text=[text%20to%20MD5]">MD5</option>
</select><br/>
<input type="text" id="url" style="width: 400px">
<input type="button" id="btn" value="Get JSON">
<br/><br/>
<div id="test" />

<script type="text/javascript">
$(function() {
  $( '#service' ).on( 'change', function(){
    $( '#url' ).val( $( this ).val() );
  });
  
  $( '#url' ).val( $( '#service' ).val() );
  
  $( '#btn' ).click(function(){
    var url = $( '#url' ).val()
    
    $.ajax({
      crossOrigin: true,
      url: url,
      success: function(data) {
        $( '#test' ).html(data);
      }
    });
  });
}); 
</script>

</body>
</html>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

Internet Explorer 에서의 ajax 에서의 한글 깨짐 현상  (0) 2019.12.27
JSON Editor Online  (0) 2019.11.26
javascript, nl2br, nl to &nbsp;  (0) 2019.09.11
[jQuery] touch event 체크  (0) 2019.08.19
jQuery 화면전환 효과 참고 사이트  (0) 2019.08.02
반응형
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy.mm.dd',
    prevText: '이전 달',
    nextText: '다음 달',
    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
    dayNames: ['일','월','화','수','목','금','토'],
    dayNamesShort: ['일','월','화','수','목','금','토'],
    dayNamesMin: ['일','월','화','수','목','금','토'],
    showMonthAfterYear: true,
    changeMonth: true,
    changeYear: true,
    yearSuffix: '년'
  });
});
</script>
    
생년월일: <input type="text" id="datepicker1">

https://zetawiki.com/wiki/JQuery_UI_%EB%82%A0%EC%A7%9C%EC%84%A0%ED%83%9D%EA%B8%B0_datepicker

 

jQuery UI 날짜선택기 datepicker - 제타위키

다음 문자열 포함...

zetawiki.com

 

반응형
저작자표시 비영리

'프로그래밍 > Web' 카테고리의 다른 글

웹 프론트엔드 프레임워크( angular, react, vue.js )  (0) 2020.06.17
카카오 우편번호 서비스 사용 가이드  (0) 2019.11.22
우편번호 API - 다음  (0) 2019.09.30
기본 웹브라우저로 Chrome 설정  (0) 2019.09.19
크롬(Chrome) autoplay policy  (0) 2019.09.18
반응형

#jQuery #touch #event #document #bind() #touchmove #touchstart #touchend

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>mobile.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<script src="/js/comm/jquery-1.11.1.js"></script>
<script>

	$(document).ready(function() {

		$(document).bind('touchstart', function(e) {
			$("#msg").html("터치가 시작되었어요.");
			e.preventDefault();	//	이벤트취소
		});

		$(document).bind('touchmove', function(e) {
			//	jQuery 이벤트 객체를 자바스크립트 표준 이벤트 객체로 바꾸기
			//	이유는 jQuery 에서 자바 스크립트
			var event = e.originalEvent;
			$('#msg').html('touch 이벤트 중입니다.'); 
			//	div에 터치한 좌표값 넣기
			$('#msg').append('<div>' + event.touches[0].screenX + ',' +
					event.touches[0].screenY + '</div>');
			event.preventDefault();
		});

		$(document).bind('touchend', function(e) {
			$("#msg").append("<div>터치이벤트가 종료되었어요</div>"); 
		});
	});

</script>
</head>
<body>
<h2>모바일용 홈페이지 입니다.</h2>
<!-- 
		스마트폰의 브라우저 : 마우스 이벤트와는 별도로 터치 이벤트를 지원함 
		touchstart : 터치가 시작될때
		touchend : 터치가 종료될때 
		touchmove : 터치한 상태로 이동할때 
		touchenter : 터치한 요소의 경계외부에서 내부로 이동할때 
		touchleave : 터치한 요소의 경계내부에서 외부로 이동할때 
 -->
<div id="msg"></div>
</body>
</html>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] AJAX Cross Origin plugin  (0) 2019.10.21
javascript, nl2br, nl to &nbsp;  (0) 2019.09.11
jQuery 화면전환 효과 참고 사이트  (0) 2019.08.02
[javascript] Switch case else  (0) 2019.07.31
jsfiddle : kim hongwan's public fiddles, javascript  (0) 2019.06.13
반응형

jQuery 화면전환 효과 참고 사이트

https://tympanus.net/Development/PageLoadingEffects/index6.html

 

Page Loading Effects | Demo 6

To start the page loading animation, click the following link: Show Page Loader If you enjoyed this demo you might also like: Fullscreen Overlay Effects Shape Hover Effect

tympanus.net

https://tympanus.net/Development/PageTransitions/

 

A Collection of Page Transitions

A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions

tympanus.net

https://github.com/codrops/PageTransitions

 

codrops/PageTransitions

A showcase collection of various page transition effects using CSS animations. - codrops/PageTransitions

github.com

 

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

javascript, nl2br, nl to &nbsp;  (0) 2019.09.11
[jQuery] touch event 체크  (0) 2019.08.19
[javascript] Switch case else  (0) 2019.07.31
jsfiddle : kim hongwan's public fiddles, javascript  (0) 2019.06.13
Project Deadline - SVG animation with CSS3  (0) 2019.06.12
반응형

SVG, dashoffset, X,Y, animation

https://jsfiddle.net/user/dashboard/fiddles/

반응형
저작자표시 비영리

'프로그래밍 > Style & Design' 카테고리의 다른 글

파사드(프랑스어: Façade) Facade 디자인  (0) 2019.07.10
웹측정 - 모니터 디스플레이, 화면해상도  (0) 2019.06.19
해상도/일람  (0) 2019.06.17
UXPin - UI Design and Prototyping Tool  (0) 2019.05.30
CSS3 Media Queries  (0) 2019.04.17

+ Recent posts

티스토리툴바