JQuery 기초

티스토리 뷰

Programming/JavaScript, Sencha

JQuery 기초

파란크리스마스 2016. 4. 24. 09:51

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>

저작자표시

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

C++ RetrievingFileUsingHttp

TAG more

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

티스토리 뷰

JQuery 기초

티스토리툴바