Dialog close전에 Dialog 활성화 여부 확인 후 닫기
if ($('#popupHoList').is(':visible'))
$("#popupHoList").dialog('close');
jQuery 사용
출처 : 제이쿼리(jQuery) 기본 :: 갱짱.study
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
.ready() 메소드
출처 : jQuery ready와 load의 차이 - 오중호랑이의 비밀로그
.ready() 메소드 - 문서의 DOM이 모두 로드 되었을때 실행
$(document).ready(function(){
alert('Hello World !!!');
});
셀렉터(Selector)
출처 : 박종명의 아름다운 개발 since 2010.06 - 자주 쓰는 JQUERY 기능 - 셀렉터(SELECTOR) 편
Category: Selectors
All Selector (“*”)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<script>
$(function(){
$('*').css('font-weight', 'bold'); // 모두 선택
});
</script>
</body>
</html>
ID Selector (“#id”)
<script>
$(function(){
$('#AngularJS').css('font-weight', 'bold'); // AngularJS
});
</script>
Class Selector (“.class”)
<script>
$(function(){
$('.BackboneJS').css('font-weight', 'bold'); // BackboneJS
});
</script>
Attribute Equals Selector [name=”value”]
<script>
$(function(){
$('div[name="Emberjs"]').css('font-weight', 'bold'); // Emberjs
});
</script>
Attribute Not Equal Selector [name!=”value”]
<script>
$(function(){
$('div[name!="Emberjs"]').css('font-weight', 'bold'); // AngularJS, Backbone.js
});
</script>
:first Selector
<script>
$(function(){
$('div:first').css('font-weight', 'bold'); // AngularJS
});
</script>
:last Selector
<script>
$(function(){
$('div:last').css('font-weight', 'bold'); // Emberjs
});
</script>
:eq() Selector
<script>
$(function(){
$('div:eq(2)').css('font-weight', 'bold'); // Emberjs
});
</script>
.text() .html() - 내용 가져오기, 내용 변경하기
출처 : jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수
.text() .html() - 내용 가져오기
text 메소드는 html 테그를 제외한 텍스트 내용만 가져오고, html 메소드는 html 테그까지 포함된 내용을 가져옮
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
$(document).ready(function(){
alert($('#AngularJS').text()); // AngularJS
alert($('#AngularJS').html()); // <a href="http://angularjs.org/">AngularJS</a>
});
</script>
</head>
<body>
<div id="AngularJS"><a href="http://angularjs.org/">AngularJS</a></div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
</body>
</html>
.text() .html() - 내용 변경하기
<script>
$(document).ready(function(){
$('#AngularJS').html('<a href="https://blog.outsider.ne.kr/975">Angular.js는 왜 좋은가? :: Outsider\'s Dev Story</a>');
$('.BackboneJS').text('백본js');
});
</script>
.show() .hide() - 보이기, 숨기기
출처 : 48.jQuery - show()와 hide로 숨기기 및 보이기
jQuery객체.is(":visible") 호출로 현재 보여지고 있는지 숨겨져 있는지 확인 가능
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doShow() {
if ($('#AngularJS').is(":visible")) {
$('#AngularJS').hide(); // 숨기기
$('#button1').text('보이기');
} else {
$('#AngularJS').show(); // 보이기
$('#button1').text('숨기기');
}
}
</script>
</head>
<body>
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<p><button id="button1" onclick="javascript:doShow()">숨기기</button></p>
</body>
</html>
.addClass() .removeClass() .hasClass() - 클래스 추가, 삭제, 포함 여부 확인하기
출처 : 클래스 추가 및 삭제하기 - EVERDEVEL
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.div_hide {
display: none;
}
</style>
<script>
function doShow() {
if ($('#AngularJS').hasClass("div_hide")) {
$('#AngularJS').removeClass('div_hide');
$('#button1').text('보이기');
} else {
$('#AngularJS').addClass('div_hide');
$('#button1').text('숨기기');
}
}
</script>
</head>
<body>
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<p><button id="button1" onclick="javascript:doShow()">보이기</button></p>
</body>
</html>
.css() - CSS 변경
출처 : jQuery CSS 속성 변경 - 제타위키
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('body').css('background-color', 'red');
});
</script>
.attr() - 속성을 제어
출처 : 즐거움을 찾자 Find Fun!! :: jQuery API 정복 - attr(), 속성을 제어하기
인자에 개수에 따라 2가지로 용도로 사용 - 하나의 인자만 있으면 속성값을 가져오는 것이고, 2개의 인자를 사용 하면 속성값을 설정함
속성값 설정시 속성이름이 존재하지 않는 경우 속성이 추가됨
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.div_hide {
display: none;
}
</style>
<script>
function doGetAttr() {
alert($('#AngularJS').attr('name')); // js_framework_1
}
function doSetAttr() {
$('#AngularJS').attr('hangul', '알골라JS'); // 속성 추가
}
</script>
</head>
<body>
<div id="AngularJS" name="js_framework_1">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<p><button onclick="javascript:doGetAttr();">속성값 조회</button></p>
<p><button onclick="javascript:doSetAttr();">속성값 설정</button></p>
</body>
</html>
.find() 자식 노드 선택자
출처 : find(expr) - jQuery 日本語リファレンス
지정 요소의 모든 하위 요소에서 조건식에 맞는 요소를 선택
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doFind() {
$('#js_framework').find('.BackboneJS').css('color','red');
}
</script>
</head>
<body>
<div id="js_framework">
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
</div>
<p><button onclick="javascript:doFind();">Find 메소드 호출</button></p>
</body>
</html>
.append() - 마지막 자식 요소 추가
출처 : jQuery API 정복 - 마지막 자식 요소 추가, append() - jyhyun
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doAppend() {
$('#js_framework').append('<span name="ExtJS">ExtJS</span>'); // 마지막 요소 추가
}
</script>
</head>
<body>
<div id="js_framework">
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
</div>
<p><button onclick="javascript:doAppend();">마지막 요소 추가</button></p>
</body>
</html>
.clone() - 요소 복사하기
출처 : jQuery API 정복 - 요소 복사하기, clone() - jyhyun
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doClone() {
//
var row = $('#tr_dumy').clone();
row.attr('id', 'tr_fw');
//
row.find('#js_name').text('Emberjs');
//
$('#js_framework').append(row); // 마지막 요소 추가
}
</script>
</head>
<body>
<table id="js_framework" border="1">
<tr id='tr_fw'>
<td>AngularJS</td>
<td>Angular.js는 구글이 만든 MV*(Model - View - Whatever) 자바스크립트 프레임워크</td>
</tr>
<tr id='tr_fw'>
<td>Backbone.js</td>
<td>Model-Collection-View 기반으로 구현하는 Javascript 웹 애플리케이션 프레임웍</td>
</tr>
</table>
<table style="display:none;">
<tr id="tr_dumy">
<td id="js_name"></td>
<td id="js_contents"></td>
</tr>
</table>
<p><button onclick="javascript:doClone();">clone 테스트</button></p>
</body>
</html>
-
ejs.zip