jQuery HTML / CSS Methods

www.w3schools.com/jquery/jquery_ref_html.asp

 

jQuery HTML / CSS Methods

jQuery HTML / CSS Methods jQuery HTML / CSS Methods The following table lists all the methods used to manipulate the HTML and CSS. The methods below work for both HTML and XML documents. Exception: the html() method. Method Description addClass() Adds one

www.w3schools.com

MethodDescription

addClass() Adds one or more class names to selected elements
after() Inserts content after selected elements
append() Inserts content at the end of selected elements
appendTo() Inserts HTML elements at the end of selected elements
attr() Sets or returns attributes/values of selected elements
before() Inserts content before selected elements
clone() Makes a copy of selected elements
css() Sets or returns one or more style properties for selected elements
detach() Removes selected elements (keeps data and events)
empty() Removes all child nodes and content from selected elements
hasClass() Checks if any of the selected elements have a specified class name
height() Sets or returns the height of selected elements
html() Sets or returns the content of selected elements
innerHeight() Returns the height of an element (includes padding, but not border)
innerWidth() Returns the width of an element (includes padding, but not border)
insertAfter() Inserts HTML elements after selected elements
insertBefore() Inserts HTML elements before selected elements
offset() Sets or returns the offset coordinates for selected elements (relative to the document)
offsetParent() Returns the first positioned parent element
outerHeight() Returns the height of an element (includes padding and border)
outerWidth() Returns the width of an element (includes padding and border)
position() Returns the position (relative to the parent element) of an element
prepend() Inserts content at the beginning of selected elements
prependTo() Inserts HTML elements at the beginning of selected elements
prop() Sets or returns properties/values of selected elements
remove() Removes the selected elements (including data and events)
removeAttr() Removes one or more attributes from selected elements
removeClass() Removes one or more classes from selected elements
removeProp() Removes a property set by the prop() method
replaceAll() Replaces selected elements with new HTML elements
replaceWith() Replaces selected elements with new content
scrollLeft() Sets or returns the horizontal scrollbar position of selected elements
scrollTop() Sets or returns the vertical scrollbar position of selected elements
text() Sets or returns the text content of selected elements
toggleClass() Toggles between adding/removing one or more classes from selected elements
unwrap() Removes the parent element of the selected elements
val() Sets or returns the value attribute of the selected elements (for form elements)
width() Sets or returns the width of selected elements
wrap() Wraps HTML element(s) around each selected element
wrapAll() Wraps HTML element(s) around all selected elements
wrapInner() Wraps HTML element(s) around the content of each selected element

 

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

 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

 

 

.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

[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);
       });
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

 

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.

 

...

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

 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>
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

<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

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

#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>
Posted by 홍반장水 홍반장水

댓글을 달아 주세요

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

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

SVG, dashoffset, X,Y, animation

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

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

jQuery - Back button Detect, reload  http://www.vvaves.net/jquery-backDetect/

브라우저에서 뒤로가기 버튼 선택시 페이지를 리로드해주는 쿼리. 

단, 라이브러리를 업로드해야 한다. 

https://github.com/ianrogren/jquery-backDetect

 

ianrogren/jquery-backDetect

jQuery backDetect is a jQuery plugin that is used to determine when a user clicks the back button and fire a callback function. - ianrogren/jquery-backDetect

github.com

backDetect

Determining when a user clicks their browser's back button has never been easier with this jQuery plugin. With a quick easy install and minimal set up work you'll be firing callback functions on back button declarations in no time.

View the Project on GitHubianrogren/jquery-backDetect

Using jQuery-backDetect

Can append to any element or class:

$(window).load(function(){ $('body').backDetect(function(){ // Callback function alert("Look forward to the future, not the past!"); }); });</script>

Click the back button to test.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요