jQuery / Selector / :button - type이 button인 요소를 선택하는 선택자
:button은 type이 button인 요소를 선택하는 선택자이다.
문법
- type이 button인 모든 요소를 선택한다.
$( ':button' )
- type이 button이면서 class 값으로 xy를 갖는 요소를 선택한다.
$( '.xy:button' )
예제
type이 button인 요소의 글자 모양을 기울임꼴로 만들고, 클래스 값이 ab면서 type이 button인 요소의 글자 색은 빨간색으로 만든다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ).ready( function() {
$( ':button' ).css( 'font-style', 'italic' );
$( '.ab:button' ).css( 'color', 'red' );
} );
</script>
</head>
<body>
<input type="button" value="Button 1" class="ab">
<input type="button" value="Button 2" class="cd">
</body>
</html>
jQuery / Selector / :odd - 홀수 인덱스 요소를 선택하는 선택자
:odd은 홀수 인덱스 요소를 선택하는 선택자입니다. 문법 $( ':odd' ) 예를 들어 다음은 홀수 인덱스인 p 요소를 선택한다. 주의할 점은 인덱스가 0부터 시작한다는 것이다. $( 'p:odd' ) 예제 인덱스가 홀수인 li 요소를 선택하고, 글자색을 빨간색으로 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...
jQuery / Method / .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드
.prepend() .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).prepend( '123 ' ); 라고 하면 <p>123 Lorem Ipsum Dolor</p> 으로 출력됩니다. 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자
:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...
jQuery / Selector / :selected - select에서 선택된 option를 선택하는 선택자
:selected는 select에서 선택된 option를 선택한다. :selected 대신 :checked를 사용해도 된다. 색을 선택하면 그 값을 div 요소의 배경색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { font-family: Consolas, monospace; ...
jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자
:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...
jQuery / Method / .empty() - 선택한 요소의 내용을 지우는 메서드
.empty() .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 태그를 포함한 요소 전체를 제거할 때는 .remove()를 사용합니다. 문법 .empty() 예를 들어 <h1>Lorem</h1> 일 때 $( 'h1' ).empty() 를 하면 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Method / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다. 문법 .fadeToggle( ) duration duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다. 문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다. .fadeToggle( 'fast' ) 숫자로 시간을 정할 ...
jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드
.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드
.children() .children()은 어떤 요소의 자식 요소를 선택합니다. 문법 .children( ) 예를 들어 $( 'div' ).children().css( 'color', 'blue' ); 는 div 요소의 자식 요소의 색을 파란색으로 만듭니다. $( 'div' ).children( 'p.bl' ).css( 'color', 'blue' ); 는 div 요소의 자식 요소 중 클래스 값으로 bl을 가진 p 요소의 색을 파란색으로 만듭니다. 예제 ul 요소의 자식 요소 중 ip를 클래스 값으로 가지는 ...
jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드
.val() .val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 var jb = $( 'input#jbInput' ).val(); 은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 $( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 ...