web developer

Select 박스에서 '직접 입력' 옵션으로 입력란 토글하기1. html  형식 선택 1번 2번 3번 4번 5번 직접 입력 2. jsfunction syncInputWithSelect() { // select 박스의 첫번째 option 값으로 초기화 var selectBox = $("#selectBox"); selectBox.val(selectBox.find('option:first').val()); // input 태그의 값 var inputValue = $("#inputText"..

https://take-it-into-account.tistory.com/198 [js] monthpicker 기본 설정, 월 비활성화하는 방법CDN (content delivery network) monthpicker 설정하기 1. input 태그 한줄 작성 2. 현재 시간 ; 2022년 8월 month 값을 통해서 아직 다가오지 않은 9, 10, 11, 12의 값을 fot문을 통해서 months 에 담아줍니다. $(document).readtake-it-into-account.tistory.com이번글은 위의 글과 같이 monthpicker를 생성한 이후 단계입니다. 1. 위에 파란색으로 active되어 있는 부분을 초기화시킨다.// monthpicker 초기화$('.ui-state-default.m..

1. [jquery] See the Pen select by 안중현 (@drkdcoaa-the-vuer) on CodePen. 2. [html] option hidden See the Pen select by 안중현 (@drkdcoaa-the-vuer) on CodePen.

.attr() 메서드 .attr() : html 의 속성(attribute)을 다룬다. .attr() 메서드를 통해서는 element가 가지는 속성값이나 정보를 조회(style, src, rowspan 등)하거나 세팅하는 형식 .prop() 메서드 .prop() : javascript 프로퍼티(property)를 다룬다. ​.prop() 메서드를 통해서는 element가 가지는 실제적인 상태(활성화, 체크, 선택여부 등)를 제어하는 업무 $( '.selectCheck' ).click( function() { $( '.test' ).prop( 'checked', this.checked ); }); 출처 : https://www.codingfactory.net/10341

.toggleClass() : 정의 .toggleClass()로 선택한 요소에 클래스(Class) 값을 주거나 없앨 수 있습니다. .toggleClass() : 문법 .toggleClass( 'className' ) $( 'p' ).toggleClass( 'VVS' ); 'p' 요소에 'VVS' 클래스가 없으면 추가하고, 있으면 제거합니다. .toggleClass() : 예시 See the Pen Untitled by 안중현 (@pogba10) on CodePen. 참고 - .click() : 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. [jquery] .click / 선택한 요소를 클릭했을 때 특정 작업을 수행하기 .click() : 정의 - .click()은 선택한 요소를..

.click() : 정의 - .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. .click() : 문법 .click( 'handler' ) - 기본 형태는 위와 같습니다. $( 'button' ).click( function() { // function } ); - button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. .click() : 예시 See the Pen Untitled by 안중현 (@pogba10) on CodePen. $(function() { $('button').click( function() { $('h2').toggleClass('basic'); }); }); - $('h2').toggleClass('basic') :..

.attr() : 정의 - HTML 요소(element)의 속성(attribute)의 값(value)을 가져오거나 속성을 추가할 때는 .attr()을 사용합니다. .attr() : 문법 .attr('attributeName', 'value') - 선택한 요소에 속성을 추가합니다. $( 'div' ).attr( 'class' ); - div 요소의 class 속성의 값을 가져옵니다. $( 'h1' ).attr( 'title', 'Hello' ); - h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 합니다. .attr() : 예시 See the Pen .attr() by 안중현 (@pogba10) on CodePen. var test = $( 'h1' ).attr( 'class' ); - h..

.css() : 정의 - .css()로 선택한 요소의 css 속성의 값(value)을 가져오거나 style 속성을 추가합니다. .css() : 문법 $('elementName').css( 'AttributeName' ) - 선택한 요소의 속성의 값(value)을 가져옵니다. $( "h1" ).css( "color" ); - h1 요소의 스타일 중 color 속성의 값(value)을 가져옵니다. $( 'h1' ).css( 'color', 'blue' ); - h1 요소에 style 속성을 추가하여 글자색을 파란색으로 바꿔줍니다. .css() : 예시 See the Pen Untitled by 안중현 (@pogba10) on CodePen. $( 'h1' ).css( 'color', 'blue' ); - h..

$.each() 메소드 : 2 type jquery를 사용해 배열을 관리하고자 할 때 each() 메소드를 사용할 수 있습니다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) each() 메소드는 위와 같은 두 가지가 있습니다. $.each() 메소드 : 설명 $.each() 메소드는 객체와(Object) 배열(Array) 모두에서 사용할 수 있는 일반적인 반복 함수입니다. 다시 말해, 배열과 length ..

.unwrap() unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예제 제목 $('h2').unwrap(); h2 요소의 바로 상위의 태그(div)를 제거하는 경우 $('div').contents().unwrap(); .contents()를 이용하여 자식 요소를 그대로 둔 채 태그(div)를 제거한 경우 출처 : https://www.codingfactory.net/10216

.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예제 $( 'p' ).wrap( '' ); p 요소를 div로 wrapping한 경우 $( 'p' ).wrap( '' ); class나 id 값을 추가한 경우 $( 'p' ).wrap( '' ); 여러 태그로 wrapping한 경우 출처 : https://www.codingfactory.net/10214

제이쿼리를 통해 클래스를 추가하는 방법과 직접 스타일을 부여하는 방법과의 차이점 사실 제이쿼리(jQuery)를 사용하여 클래스명을 추가하거나 제거하는 방법이외에 직접 스타일을 부여할 수 있습니다. 예를들어, 아래와 같은 attr() 또는 css() 메소드를 사용하는 방법이 존재합니다. 하지만 이런 경우에 inline 형태로 웹페이지에 스타일이 부여되기 때문에 아래와 같은 제약이 생기게 됩니다. * inline 스타일 방식은 태그에 직접 CSS코드를 기술하는 방식이다. (태그에 style속성을 직접 부여) ※ 이런 단점들 때문에 보통 클래스에 스타일을 정해두고 이 클래스를 추가하거나 제거하는 방법이 사용됩니다. $("Selector").removeClass() .removeClass() 메서드는 선택한 요..