[JSP] 도로명 주소 API 사용
1. www.juso.go.kr 접속 후 우측 상단 개발자 센터 클릭 2. 주요 서비스 API 신청하기 후 키 발급 받기 ...
blog.naver.com
제이쿼리의경우 링크를 가져오거나 다운받아오는데 jquery.com 에서 3.14버전이 최신버전이지만 익스플로어에서는 1.24정도 지원하기 째문에 확인 후 다운받을것
그러므로
cdn.jquery.com 에서 링크를 가져오는것이 좋다.
단점은 인터넷이 안되는경우 연결이 안될수있음
오른쪽 마우스 다른이름으로 저장 min.js는 압축형
emmet
단축z키모음
https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
https://plugins.jquery.com/tag/slider/
여기있는 제이쿼리는 사업적 무료~~~
django
파이썬 장고 프레임웍
node.js
https://iamawebdeveloper.tistory.com/92?category=689240
val(), text(), html()
val() val()메서드는 HTML 폼 요소의 value 속성 값을 지정하고 가져온다. 그리고 체크박스와 라디오 버튼,
val()
val()메서드는 HTML 폼 요소의 value 속성 값을 지정하고 가져온다. 그리고 체크박스와 라디오 버튼, <select>요소의 선택 상태도 가져오거나 지정할 수 있다.
//id가 surname인 텍스트 필드의 값을 가져온다.
$("#surname").val();
//<select>에서 선택한 값을 가져온다.
$("#usstate").val();
//<select multiple>에서 선택한 값이 들어있는 배열을 가져온다.
$("select#extras").val()
//체크된 라디오 버튼의 값을 가져온다.
$("input:radio[name=ship]:checked").val();
//텍스트 필드에 값을 지정한다.
$("#email").val("Invalid email address");
//name이나 value값이 opt1이거나 opt2인 체크박스를 체크한다.
$("input:checkbox").val(["opt1", "opt2"]);
//모든 텍스트 필드를 기본 값으로 초기화한다.
$("input:text").val( function() {
return this.defaultValue;
});
text(), html()
text()와 html()메서드는 요소의 일반 텍스트나 HTML 내용을 조회하고 지정한다.
전달인자가 없는 text()메서드는 일치하는 요소 안에 있는 모든 자손 text노드의 일반 텍스트를 반환한다. 이 메서드는 textContent나 innerText 프로퍼티를 지원하지 않는 브라우저에서도 잘 작동한다.
전달인자 없이 html() 메서드를 실행하면 일치하는 요소의 첫 번째 요소안의 HTML내용을 반환한다. jQuery는 이 메서드를 작동시키기 위해 innerHTML프로퍼티를 사용한다. 따라서 x.html()은 사실상 x[0].innerHTML과 같다.
//문서 제목을 가져온다.
var title = $("head title").text();
//첫 번째<h1>테그의 html을 가져온다.
var headLine = $("h1").html();
//각 해당 태그 앞에 절 번호를 넣는다.
$("h1").text( function(n, current) {
return "@" + (n+1) + ": " + current;
});
자바스크립트 완벽가이드
http://www.w3schools.com/jquery/html_val.asp
출처: https://iamawebdeveloper.tistory.com/92?category=689240 [나는 웹개발자!]
attr()
attr()
attr()메서드는 HTML속성을 다루는 jQuery getter/setter 메서드이다. attr() 메서드는 브라우저 간 비호환성과 특이 사항을 잘 처리한다. 따라서 HTML 속성명과 이에 해당하는 자바스크립트 프로퍼티, 이 둘이 달라도 어느 것을 사용하든 상관없다. 예를 들어 'for'와 'htmlFor', 'class'와 'className' 중에서 무엇을 사용하든 결과는 같다.
.attr() 메서드는 선택자에 의해 선택된 요소들 중에서 제일 처음 요소의 속성값을 가지고 오는 함수이다. 만일 모든 요소들의 속성값을 개별적으로 알고 싶다면, .each()메서드나 .map() 메서드를 사용해야 한다.
.attr(attributeName)
선택된 요소 집합에서 첫번째 요소의 attributeName에 해당하는 속성값을 반환한다.
.attr(attributeName, value)
선택자에 의해 선택된 요소에 하나 이상의 속성을 부여할 수 있다.
여러 속성을 부여할 때, 속성명에 따옴표는 선택사항이다. 단, "class"속성을 세팅할 때는 반드시 따옴표를 사용해야 한다.
Internet Explorer는 input이나 button요소의 type속성을 바꾸지 못한다.
// 첫 form 요소의 action 속성을 조회
$("form").attr("action");
//em 태그의 title 속성의 값을 찾아서 div에 표시
var title = $("em").attr("title");
$("div").text(title);
//src 속성에 값 지정
$("#icon").attr("src", "icon.gif");
//한 번에 속성 4 개를 지정
$("#banner").attr({src:"banner.gif",
alt:"Advertisement",
width:720, height:64});
//모든 링크를 새 창에서 연다.
$("a").attr("target", "_blank");
//도메인이 같은 링크는 같은 현재창에서 열고 다르면 새 창에서 연다.
$("a").attr("target", function() {
if(this.host === location.host) return "_self"
else return "_blank";
});
//함수를 이렇게 넘길 수도 있다.
$("a").attr({target: function() { ... } });
//선택된 모든 요소에서 속성을 완전히 제거할 때는 removeAttr()을 사용한다.
//모든 링크를 현재 창에서 연다.
$("a").removeAttr("target");
자바스크립트 완벽가이드
http://findfun.tistory.com/156
출처: https://iamawebdeveloper.tistory.com/89 [나는 웹개발자!]
jQuery 선택자
선택자명설명
| $('tag') | Tag라는 이름의 모든 태그 요소를 선택 |
| $(‘.class’) | class라는 클래스명의 모든 클래스 요소를 선택 |
| $(‘#id’) | id라는 아이디명의 아이디 요소를 선택 |
| $(‘div li’) | div에 있는 li 모두 선택 |
| $(‘div > p’) | div의 p태그라는 직계 자식을 선택 |
| $(this) | 현재 선택 중인 요소를 가리킴 |
jQuery 메소드
메소드명설명
| eq(n) | n번째에 위치하는 요소를 선택. |
| length() | 요소의 개수를 알 수 있음. |
| parent() / parents() | 요소의 직계 부모 선택 / 요소의 모든 부모들 선택 |
| children(“a”) | 요소의 a태그의 직계자손 선택 |
| prev() / next() | 이전 요소 선택 / 다음 요소 선택 |
| val() | 텍스트에 입력한 값을 추출 |
| text() | 해당 요소의 텍스트를 변경 |
| move() / clone() | 해당 요소 이동 / 해당 요소 복사 |
| remove() | 해당 요소 삭제 |
| bind(이벤트,함수) / unbind(이벤트) | 해당 이벤트 실행시 함수 실행 / 이벤트 제거 |
| * unbind() - 해당문서 객체와 관련된 모든 이벤트 제거 | |
| * unbind(eventName) - 특정 이벤트와 관련된 모든 이벤트 제거 | |
| * unbind(eventName, function) - 특정 이벤트의 함수 제거 | |
| addClass() / removeClass() | 클래스 추가 / 클래스 삭제 |
jQuery 이벤트
이벤트명설명
| mousedown() | 노드영역에서 마우스르 눌렀다가 떼었을 때 발생 |
| mouseenter() | 노드에 마우스가 진입했을 때 발생 -> 부모 영역안의 자식영역에 커서가 가도 마우스 진입으로 판단 |
| mouseleave() | 노드영역에서 마우스가 나갔을 때 발생 |
| mousemove() | 노드영역에서 마우스가 움직일 때 발생 |
| mouseover() | 노드 영역에 마우스를 올려 놓았을 때 발생 -> 부모 영역안의 자식영역에 커서가 가면 마우스 아웃으로 판단 |
| mouseup() | 마우스 포인터를 노드에 올려놓고 마우스 버튼을 눌렀을 때 발생 |
jQuery 키보드 이벤트
키보드 이벤트명설명
| keydown() | 키보드가 눌러질 때 발생 |
| keyup() | 키보드가 떼어질 때 발생 |
| keypress() | 글자가 입력될 때 발생 |
html()
- 기존 내용을 없애고 필요한 html구문을 생성함
$subMenu1.html("<li>text</li>");
문서의 객체 선택 및 삽입
-
$(A).insertBefore(B) : A를 B앞에 추가
-
$(C).insertAfter(B) : C를 B뒤에 추가
-
$(D).prependTo(B) : D를 B 앞부분에 추가
-
$(E).appendTo(B) : E를 B의 뒷부분에 추가
-
$(1).after(F) : 1뒤의 F 선택
-
$(3).before(G) : 3앞의 G 선택
css()
- 해당 요소의 CSS를 설정 및 값 추출
// ex) $("#header").css({height:80, overflow:"hidden"}) //height, overflow 설정 // ex) var $alpha=$(".subMenu").css("opacity"); //opacity 값 추출
attr()
- 해당 요소의 속성을 설정 및 값 추출
// ex) $mainImg.attr("class","img02"); //클래스명 설정 // ex) $("#visual_img").attr("src", "images/main/visual_02.jpg") //이미지 경로 변경 // ex) var $className=$("#visual_img").attr("class"); //클래스명 값 추출
setInterval(함수명,주기)
- 일정시간 마다 함수가 실행되도록 처리
clearInterval(함수명)
- setInterval로 설정한 작업을 취소
Animation
Animate({속성:값},시간,효과,함수)
- 속성의 값만큼 시간주기로 해당효과를 낸 후 함수를 실행함
- 효과 : jQuery의 easing효과(32가지의 easing 효과 사용 가능)
//ex) function onLeft() { #imgWrap.animate({marginLeft:-400},500,"easeOutCubic"); }
//ex) $("#imgWrap:not(:animated)").animate({left:300, opacity:0}, 1000, "easeOutCubic", function() { #imgWrap.css({left:0, opacity:1}); });
활용가능한 jQuery 예제
Slide Image
- slideUP(), slideDown() 사용 (left, right는 적용 안됨)
- appendTo(), prependTo(), animate() 사용
Show, hide Image
- show(), hide() 사용
- tab menu, modalWindow 활용가능
Scroll Image
- scrollTop() 사용
:not(:animated)
- 해당 애니메이션이 진행중일 때 다른 애니메이션 실행을 못하도록 함.
- 해당 애니메이션이 다 끝나고 다음 애니메이션이 실행 됨.
stop()
- 진행중인 애니메이션을 모두 멈춤.
- 여러 애니메이션이 동시 진행시 실행하던 애니메이션의 동작 완료 전 다른 애니메이션 실행시 사용.
Triggrt 함수
원문 링크: http://api.jquery.com/trigger/
.trigger( eventType [, extraParameters] )
개요 : 특정 이벤트 유형에 대해 선택된 요소에 연결된 모든 핸들러와 동작(behavior)을 실행합니다.
.trigger( eventType [, extraParameters] )
eventType: JavaScript 이벤트 타입을 표현하는 문자열, click 또는 submit 같은.
extraParameters: 이벤트 핸들러에 전달할 추가 파라미터.
.trigger( event ) event jQuery.Event 객체.
예제_01
.trigger() 함수는 이벤트가 발생할 때 실행될 함수나 .bind() 함수로 연결된 어떤 이벤트 핸들러를 강제로 실행시켜 줍니다.
$('#foo').bind('click', function() { alert($(this).text()); }); $('#foo').trigger('click');
#foot 선택자를 클릭 하지 않아도 trigger함수에 연결된 click 이벤트가 trigger함수의 특징의 의하여 alert($(this).text()); 를 강제로 실행합니다.
each(반복문) 함수
.each()는 선택한 요소가 여러개일 때 각각에 대하여 반복하여 함수를 실행시킵니다.
문법 : .each( function )
특정 조건을 만족할 때 반복 작업에서 빠져려면 : return false 사용합니다.
아래 출처: 출처: http://www.richstory.co.kr/18 [RichStory]
1. 커서 변경
$('body').css('cursor', 'default');
$('body').css('cursor', 'wait');
2. Select Box에서 선택된 Value 찾기
$('#search_sale_pernr_s option:selected').val();
3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기
$("#data_list_table > tbody").children("tr:not(:first)").remove();
4. Table의 마지막 Row 다음에 Row 추가하기
$("#data_list_table > tbody:last").append("<tr><td>값1</td></tr>");
5. innerHTML값 Setting하기
$("#id_total_price").html("<strong>값</strong>");
6. 해당 ID로 지정된 HTML 보이기/숨기기
$("#placeholder").show();
$("#placeholder").hide();
7. ID로 지정된 Form Submit 하기
$("#csf_tab_menu_form").attr("target", "_top");
$("#csf_tab_menu_form").attr("action", "/sabisung/list.jsp");
$("#csf_tab_menu_form").submit();
8. Select Box의 Option 값 확인
$("#search_sale_unit").find("option").each(function() {
alert(this.value);
});
9. Select Box의 특정 값을 가지는 Option 삭제하기
$("#csf_menu_no").find("option").each(function() {
if(this.value == "4") {
//alert(this.selected);
$(this).remove();
}
});
10. Select Box의 특정 값 이후/이전에 Option 추가하기
$("#csf_menu_no").find("option").each(function() {
if(this.value == "3") {
$(this).after("<option value=\"4\">텍스트</option>");
//$(this).before("<option value=\"4\">텍스트</option>");
return false;
}
});
11. each Loop에서의 break/continue 방법
$("#csf_menu_no").find("option").each(function() {
if(this.value == "3") {
return false; //break 의미
return true; //continue 의미
}
});
12. Select Box의 모든 Option 삭제 후 Default Option 추가하기
$("#search_sale_pernr_s").find("option").remove().end().append("<option value=\"\">::사원 선택::</option>");
13. checkbox의 전체 갯수와 선택된 갯수 구하기
- 전체 갯수 : $("input:checkbox[name=is_check]").length
- 선택된 갯수 : $("input:checkbox[name=is_check]:checked").length
- 전체 checkbox 순회하기
$("input:checkbox[name=is_check]").each(function() {
this.checked = true;
});
14. checkbox의 체크 여부 확인
if($("input:checkbox[name=complete_yn]").is(":checked")) == true) {
; //작업
}
15. Table의 특정(ID를 가지는) TR 다음에 TR Row를 추가하기
$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).after("<tr><td>사비성</td></tr>");
return false;
}
});
16. Table의 특정(ID를 가지는) TR Row를 삭제하기
$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).remove();
return false;
}
});
17. 숫자인지 체크
function is_number(v) {
var reg = /^(\s|\d)+$/;
return reg.test(v);
}
18. 숫자인지 체크 (-/+ 부호까지 체크)
function is_number(v) {
var reg = /^[-+]?\d+$/;
return reg.test(v);
}
19. 소수점 자리수에 맞는 숫자인지 체크 (소수점 2자리까지 체크)
function is_float_2(v) {
var reg = /^[-+]?\d+.?\d?\d?$/;
return reg.test(v);
}
20. 숫자에 콤마 추가하기 (금액단위)
function set_comma(n) {
var reg = /(^[+-]?\d+)(\d{3})/;
n += '';
while (reg.test(n))
n = n.replace(reg, '$1' + ',' + '$2');
return n;
}
$("#ID").val();
$("#ID").val("값");
$("#ID").focus();
var seq = $("#ID").attr("SEQ"); // 속성 값 가져오기
$("#ID").click(function(){
}
$(".list-item").click(function(){ // tr class name : list-item (게시판 글 클릭)
}
var frmObj = document.frmThis;
$("#frmThis").attr("action", "<c:url value='/xxxx.do'/>");
$("#frmThis").submit();
<form id="frmThis" method="post">
<input type="hidden" id="hidPage" name="page" value="">
</form>
****** combo ******
$("#cmb_CODE").val("2");
$("select[name=cmb_CODE]").attr("disabled","disabled");
****** radio ******
$("input:radio[name='rdo_TYPE']:checked").val()
출처: https://farcanada.tistory.com/entry/jQuery-자주쓰는-제이쿼리-함수-모음 [남다른 캐나다]
'it공부' 카테고리의 다른 글
| Java 쓰레드 (0) | 2020.07.05 |
|---|---|
| HTML5 기본 템플릿 (0) | 2020.07.05 |
| Html css 정리 / 드롭다운 태그 (0) | 2020.06.22 |
| 삼항연산자를 이용한 프로그램 (0) | 2020.04.23 |
| 논리연산자 AND OR NOT (0) | 2020.04.23 |