조코드

특정 element 의 display 속성이 none 인지 아닌지 판단 할때 아래와 같이 사용

$('#myDiv').is(':visible');

display: none 일때는 false 를 반환 한다.

$("#id").on('click', function(){ ... });      vs     $("#id").on('click', '.class', function()){ ... });

-----------------------------------------------------------------------------------------------------------
보통 jquery 로 이벤트를 걸 때 $(id).click(function() { }); 형태로 많이 사용한다.

위의 경우로 사용할 경우, element가 나중에 생긴 경우에는 위의 click 이벤트 적용이 되지 않는다.
(나중에 생긴 경우 ex) - append()로 추가된 엘리먼트...) 
​

그럴때 필요한 코드가 다음과 같다.

$(document).on('click', id, function)

다음과 같이 걸면 element가 나중에 동적으로 생성되었다 하더라도, 이벤트가 걸리게 된다.

주의할 점은 동적으로 생긴 엘리먼트를 click 뒤에 작성해야 한다. 

--------------------------------------------------------------------------------------------------------------------------------

그러나, 문제가 하나 있다. 위와 같이 걸 경우, 페이지를 새로고침 하거나 한번 실행이 될때마다 click 이벤트가 계속 등록이 되어서

나중에는 click 이벤트가 여러번 실행되는 현상이 발생한다.

​

그걸 방지하기 위해서는 

1. off를 이용

$("#id").off().on('click', id, function() {}

2. return false 를 사용

$("#id").off().on('click', id, function() {

   return false;

}

3. .stopPropagation()

현재 이벤트가 부모에게 전파되지 않도록 중지

4. .preventDefault()

현재 이벤트 기본 동작 중지

5. .stopImmediatepropagation()

현재 이벤트가 부모와 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중지

동일한 하나의 버튼에 이벤트가 여러 개 걸려 있을 때, 이 메소드를 쓴 이벤트만 발생하고 나머지 이벤트는 발생하지 않는 것.

강제로 이벤트를 발생시킨다.

ex)

$("#btn_search").trigger('click');                          //강제로 클릭

$("#btn_search").trigger('change');                      //강제로 변환

$("#btn_search").trigger('focus');                        //강제로 포커스

https://www.samsungsds.com/kr/insights/jQuery.html

- 결론 - 그 위상은 예전만 못하지만 제이쿼리는 지금도 수많은 오픈소스 컨트리뷰터(Contributor)들이 참여하여 더 가벼우면서도 강력해지도록 개선 중인 프로젝트입니다. 특히 높은 시장 점유율을 유지하고 있어 개발자를 확보하는데 용이하며 정적이고 가벼운 웹페이지를 신속하게 제작하는 용도로는 그 어느 라이브러리보다 적합합니다.

기본 

$('.class');         //클래스
$('#id');           //아이디

$('div');            //tag

$('div li');     //(해당 div 자식노드의 li)

$('div.class');     //해당 div의 클래스
$('div#id');        //해당 div의 id

엘리먼트 찾는 방법

$( ':button' ).css( 'font-style', 'italic' );                //타입으로 찾을땐 
$( 'p:contains("ab")' )                                    //문자열 포함 여부
$( 'div:empty' )                                            //div 요소 중 내용이 없는 것
$( 'p:has(span)' )                                          //span 요소를 가지고 있는 p 요소를 선택합니다.
$( 'ul' ).add( 'p' )                                          //ul 요소를 선택하고, 추가로 p 요소를 선택합니다.
$( 'p' ).appendTo( 'blockquote' );                     //p 요소를 blockquote 요소 안으로 이동시킵니다.

형제요소 선택자

.siblings() 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.
                            ex)$(this).parent("li").siblings().removeClass("active");
.next() 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.
.nextAll() 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.
.nextUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.
.prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다.
.prevAll() 선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다.
.prevUntil() 선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다.

attr과 prop의 차이

.prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다.
<a href="#">Link</a>
        document.write( $( 'a' ).attr( 'href' ) );     // Link
        document.write( '<br>' );
        document.write( $( 'a' ).prop( 'href' ) );    //#

$('div.pd_top_con h2').attr('projectTitle'); // 요소 속성 값 가져오기
$('div.pd_top_con h2').attr('projectTitle', 'change'); //요소 속성 값 변경하기

hasClass vs is

$(selecter).hasClass('foo'); // hasClass는 여러개 클래스를 멀티로 나열하여 체크할 수 없다. 
$(selecter).is('.foo, .box, .test'); // is로 체크

$(selecter).is(":checked") == true  // select될때 자주 쓰는 방식

$('#id').val();

$('#id').addClass('active');
$('#id').removeClass('active');

$('#id').show();
$('#id').hide();
$('#id').empty();
$('#id').remove();

$('#id').append(Html);
$('#id').after(Html);

속성으로 노드찾기

$("#projectList tbody").on('click', 'strong[event="clickProject"]', function(){ ... });

$("input[name=value]")

[name]                                           //해당하는 속성을 가지고있는 노드
[name=value]                                   //주어진 문자열과 속성이 동일한 노드
[name~=value]                                //공백으로 구분된 단어와 속성이 일치하는 노드
[name*=value]                                  //주어진 문자열을 포함하고있는 노드
[name$=value]                                 //주어진 문자열로 끝나는 노드
[name!=value]                                 //주어진 문자열이 속성과 다른 노드
[name^=value]                               //주어진 문자열로 시작하는 노드
[name=value][name2=value2]            //다중속성선택자 예) $("input[type=radio][name=radio]:checked").val();

변화 감지

$("#id").on('change', function(){ ... });     

$("#id").on("propertychange change paste input", function (){ ... });       // 실시간으로 input의 변화 감지

Selector
:button - type이 button인 요소를 선택하는 선택자
:contains() - 특정 문자열을 포함한 요소를 선택하는 선택자
:empty - 내용이 없는 빈 요소를 선택하는 선택자
:even - 짝수 인덱스 요소를 선택하는 선택자
:has() - 특정 요소를 포함하는 요소를 선택하는 선택자
:nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자
:odd - 홀수 인덱스 요소를 선택하는 선택자

Method
.add() - 요소를 추가로 선택하는 메서드
.addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드
.addClass() - 클래스 값을 추가하는 메서드
.after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
.animate() - 애니메이션 효과 만드는 메서드
.append() - 선택한 요소의 내용의 끝에 콘텐트를 추가하는 메서드
.appendTo() - 선택한 요소를 다른 요소 안에 넣는 메서드
.attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드
.before() - 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드
.children() - 어떤 요소의 자식 요소를 선택하는 메서드
.click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드
.clone() - 선택한 요소를 복제하는 메서드
.css() - 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가하는 메서드
.delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드
.detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드
.each() - 선택한 요소 각각에 대하여 함수를 실행시키는 메서드
.empty() - 선택한 요소의 내용을 지우는 메서드
.fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드
.fadeOut() - 선택한 요소를 서서히 사라지게 하는 메서드
.fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드
.get() - 선택한 요소를 배열로 가져오는 메서드
.has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드
.hide() - 선택한 요소를 사라지게 하는 메서드
.hover()
.html() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery.inArray()
jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드
.load()
.not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드
.offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드
.parent() - 부모 요소 선택하는 메서드
.prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드
.prop() - 속성값을 가져오거나 추가하는 메서드
.remove() - 선택한 요소를 제거하는 메서드
.removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드
.removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드
.replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드
.resize() - 윈도우 크기 변할 때 어떤 작업하기
.scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드
.slice() - 일치하는 요소의 일부분만 선택하는 메서드
.slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드
.slideToggle()
.slideUp() - 요소를 위쪽으로 사라지게 하는 메서드
.text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드
.toggle() - 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 하는 메서드
.toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드
.width() - 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경하는 메서드
.unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드
.val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드
.wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드
.wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

Property
.length - 선택한 요소의 개수를 반환하는 속성

체크

체크여부
$('input:radio[id="ID"]:checked').val();
$("input:checkbox[id='ID']").is(":checked").val();
$("input[id='ID']").is(":checked").val();

체크처리
$("input:checkbox[id='ID']").prop("checked", true);
$("input:checkbox[id='ID']").prop("checked", false);
$( 'input[name="consent"]' ).attr( 'checked', true );

select

$("#tmpSelect option:eq(0)").text('전체');         //select 첫번째 값 변경

$("#tmpSelect").val("A").prop("selected", true);        //select option 값으로 선택

$("#tmpSelect option:eq(2)").prop("selected", true);   //select 순서로 선택

포커스

$('#textbox').focus()                      //특정 요소에 포커스를 줄 때

$('#textbox').blur()                        //특정 요소의 포커스를 뺄 때

css

$( "h1" ).css( "color" );  속성값을 가져옵니다.
$( "h1" ).css( "color", "green" );  style 속성을 추가합니다.

$( "h1" ).css( "color", "" );  style 속성을 제거합니다.

on , off     VS    bind  , unbind

바인딩 하는 다양한 방법

$("#btn").click(function(event) { // 실행하고자 하는 jQuery 코드 }); 

$("#btn").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 }); 

$("#btn").on("click", function(event) { // 실행하고자 하는 jQuery 코드 }); 

$("body").on({"click": function(event) { // 실행하고자 하는 jQuery 코드 }}, "#btn"); 

$("body").on("click", "#btn", function(event) { // 실행하고자 하는 jQuery 코드 });

unbind()이 개선되어 나온 것이 off()이다.

그러므로 jquery 버전이 1.7이하인 곳은 off() 메소드를 지원하지 않는다.

jQuery 1.7부터는 .bind()나 .click() 메소드를 사용해도, 내부적으로 .on() 메소드를 이용하여 이벤트 핸들러와 바인딩한다.

고로  on  off  승

.one() 메소드는 바인딩(binding)된 이벤트 핸들러가 한번만 실행되고 나서는, 더는 실행되지 않는다.

클릭 이벤트 막기

$("#id").bind("click", false);

$("#id").unbind("click", false);

JSTL이란 JSTL (JSP Standard Tag Library)
JSP개발을 단순화 하기 위한 태그 Library이다.

-JSTL 태그-
core tags 접두사c
function tags 접두사fn
formatting tags 접두사 fmt
XML tags 접두사 x 
SQL tags 접두사sql

주의할점 

* 코드가 읽히는 순서 
JAVA > JSTL > HTML > Javascript 순서

velog.io/@ye050425/JSP-JSTL-%EC%A0%95%EB%A6%AC

Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 
Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.

AJAX just uses a combination of:
A browser built-in XMLHttpRequest object (to request data from a web server)
JavaScript and HTML DOM (to display or use the data)

What, exactly, is the DOM? 

wit.nts-corp.com/2019/02/14/5522

----------------------------------------------------------------------------------------------------------------------------------

※ 비동기(async)방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 
이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 
이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 
비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있습니다.
--------------------------------------------------------------------------------------------------------------------------- 

왜 사용하는가? 

기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있습니다. 
그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 됩니다. 
하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데 엄청난 자원낭비와 시간낭비를 초래하고 말것입니다. 
하지만 ajax는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 XML HttpRequest객체를 통해 서버에 request를 합니다. 
이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있습니다. 
요새 웹페이지에서 가장 중요한것은 속도가 아닐까싶습니다. 이 이유하나만으로도 Ajax를 사용해야 하는 이유로써 충분합니다.

-----------------------------------------------------------------------------------------------------------------------------------

Ajax의 장점

1. 웹페이지의 속도향상
2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.
3. 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어든다.
4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

Ajax 의 단점
1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)
2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다. 

-----------------------------------------------------------------------------------------------------------------------------------
▶Jquery와의 시너지  

Ajax하면 Jquery에 대한 설명을 빼놓을 수 없습니다. 
일반 Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 단점이 있는데 jquery를 이용하면 더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 됩니다.
 jquery ajax를 사용하면, HTTP Get방식과 HTTP Post방식 모두를 사용하여 원격 서버로부터 데이터를 요청할 수 있습니다.
 Jquery는 Ajax처럼 JavaScript의 라이브러리 중 하나인데 자바스크립트를 좀 더 사용하기 쉽게 패키징화 시켜놓은 것입니다. 

coding-factory.tistory.com/143