내부 삽입

1) append(content)

모든 요소 내부에 컨텐츠를 추가한다.

e.g.

// p 태그에 내용 추가
$("p").append("<b>제이쿼리</b>");
		:
<p>중요과목: </p>

2) appendTo(content)

요소의 내용을 다른 요소에 추가한다.

e.g.

// body 마지막 부분에 제이쿼리 추가
$("<div><p>제이쿼리</p></div>").appendTo("body");

// id가 test인 태그의 뒷 부분에 아이디가 a인 태그의 내용을 추가
$("#a").appendTo("#test");
		:
<span id="a">제이쿼리</span>
<div id="test">중요과목 : </div>
//--==>> 중요과목 : 제이쿼리

3) prepend(content)

모든 요소 내부의 선두에 컨텐츠를 삽입

4) prependTo(content)

요소의 내용을 다른 요소에 추가한다.

외부 삽입

1) after(content)

각 요소의 뒤로 컨텐츠를 삽입한다.

$("p").after("<b>강조!</b>");

2) before(content)

각 요소의 앞에 컨텐츠를 삽입한다.

3) insertAfter(content)

요소를 지정한 다른 요소의 뒤에 삽입한다.

4) insertBefore(content)

요소를 지정한 다른 요소의 앞에 삽입한다.

// 아이디가 a 인 요소 앞에 <p>콘텐츠</p> 삽입
$("<p>콘텐츠</p>").insertBefore("#a");

주위에 삽입

1) wrap(html)

각 요소를 구조적으로 지정 HTML로 둘러싼다.

e.g.

// p 요소를 지정 div로 둘러싼다.
$("p").wrap("<div class='wrap'></div>");
		:
<p>Test</p>

2) wrap(elem)

지정 요소를 실행 요소로 둘러싼다.

e.g.

// p 요소를 "a" id의 요소로 둘러싼다.
$("p").wrap($('#a'));
		:
<p>Test</p><div id="a"></div>

3) wrapAll(html)

요소 집합을 정리하고, 지정된 HTML 안에 1개로 정리해 사이에 둔다.

4) wrapAll(elem)

wrapAll(html)과 같지만, HTML 문자열은 아니고 DOM Element 등을 지정한다.

5) wrapInner(html)

요소가 가지는 각자 요소(텍스트 포함)를 HTML 지정 요소로 둘러싼다.

6) wrapInner(elem)

요소가 가지는 각자 요소(텍스트 포함)를 지정 요소로 둘러싼다.

7) unwrap()

특정한 부모 요소를 제거한다.

e.g.

// <p>태그를 감싸고 있는 <div> 요소를 제거
$('p').unwrap();
		:
<div>
	<p>Foo</p>
</div>

치환

1) replaceWith(content)

각 요소를 지정 HTML 혹은 DOM Element로 옮겨 놓는다.

2) replaceAll(selector)

지정 조건에 맞는 요소를 모두 옮겨 놓는다.

삭제

1) empty()

요소 집합으로부터 모든 자식 요소를 삭제한다.

2) remove( [ expr ] )

DOM으로부터 지정 조건에 맞는 요소를 모두 삭제한다.

3) detach( [ selector ] )

데이터를 유지한 상태로 요소 제거

detach 메소드는 remove 메소드와 달리 해당 요소가 가진 데이터 요소를 파괴하지 않는다.

이 데이터는 jQuery 의 이벤트 시스템에 보존되어 있기 때문에 .data() 메소드 등을 사용하여 다시 호출할 수 있다.

재사용될만한 요소에만 사용하는 것이 중요!

DOM에서 요소를 제거하거나 추가할 일이 빈번하게 발생할 때 유용하게 사용 할 수 있다.

복사

1) clone()

DOM 요소를 복사해 새롭게 작성

2) clone(true)

DOM 요소를, 그 요소가 가지는 이벤트도 포함해 카피한다.

Attr

1) attr(attributeName)

해당 속성 이름의 값을 return 한다.(매칭되는 첫 번째 것만 가져옴)

e.g.

// a 라는 id를 가진 요소의 title 속성을 b 라는 id를 가진 요소에 작성된다.
$(function(){
	let title = $("#a").attr("title");
	$("#b").text(title);
});

// *주의
// jQuery의 src attribute에 대한 attr 함수를 이용하여 같은 경로의 사진을 업데이트하려고 할 때,
// 크롬의 경우는 src 속성이 같으면 이미지를 새로 불러오지 않는다.
// 이런 경우 다음과 같은 방법을 사용
$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());

// IE6 또는 7에서 속성을 추가, 제거할 경우 prop(), removeProp() 메소드 사용
jQuery("input[type='text']").prop("disabled", true);

2) attr(attributeName, value)

해당 요소의 속성(attributeName)의 값을 변경시킨다.

e.g.

// test 라는 id를 가진 요소의 src 경로를 img/a.jpg 로 변경한다.
$(function() {
	$("#test").attr("src", "img/test.gif");
});

3) attr(attributeName, fn)

해당 요소의 속성(attributeName)의 값을 function으로 변경한다.

e.g.

// test 라는 id를 가진 요소의 src 경로를 img/ + 해당속성의 title + .jpg 경로로 변경시킨다.
$(function(){
	$("#test").attr("src", function(){
		return "img" + this.title + ".jpg";
	});
});

4) attr(map)

해당 요소에 여러 속성을 변경한다.

e.g.

// test 라는 id를 가진 요소의 src 경로를 img/a.jpg 로, title과 alt 는 a 로 변경한다.
$(function(){
	$("#test").attr({
		src: "img/a.jpg",
		title: "a",
		alt: "a"
	});
});

removeAttr(attributeName)

해당 요소의 속성(attributeName)을 제거한다.

e.g.

// test 라는 id를 가진 요소의 disabled 속성을 제거한다.
$(function(){
	$("#test").removeAttr("disabled");
});

// img 태그의 src 속성 제거 시 주의 사항
$('#img').removeAttr("src");    // Firefox, IE7-9, Safari
$("#img").attr("src", "");      // Chrome

Class

1) addClass(ClassName)

addClass( function(index, currentClass) )

매개변수로 전달된 하나 이상의 클래스 명을 확장 집합의 모든 엘리먼트에 추가한다.

• 매개변수
• className : (String) 클래스 명을 포함하는 문자열, 여러 클래스 명을 추가할 때는 공백으로 구분한다.
• 반환 값 : 확장 집합

e.g.

// test 라는 id를 가진 요소에 a 라는 class를 추가한다.
$("#test").addClass("a");

// test2 라는 id를 가진 요소에 b라는 class를 추가한다.
$("#test2").addClass(function(){
	return "b";
});

2) removeClass( [ className ] )

removeClass( function(index, class) )

매개변수로 전달된 하나 이상의 클래스 명을 확장 집합에 있는 모든 엘리먼트에서 제거한다.

• 매개변수
• className : (String) 클래스 명을 포함하는 문자열, 다수의 클래스 명을 제거하는 경우 공백으로 구분한다.
• 반환 값 : 확장의 집합

e.g.

// test 라는 id 를 가진 요소에 a 라는 class를 제거한다.
$("#test").removeClass("a");

3) toggleClass(className)

매개변수로 전달된 클래스명이 엘리먼트에 존재하지 않으면 추가하고, 존재한다면 제거한다.

• 매개변수
• className : (String) 토글 대상 클래스명을 포함하는 문자열
• 반환 값 : 확장 집합

e.g.

$("#test").toggleClass("")

4) toggleClass(class, switch)

지정 CSS 클래스를 switch 가 true 일 경우 추가하고, false 일 경우 삭제

e.g.

// test 라는 id를 가진 요소에 $(this).attr("id") = "test" 값이 true 일 경우 a 라는 class를 추가
$("#test").toggleClass("a", $(this).attr("id") = "test");

5) toggleClass (function(index, class), [switch])

function에서 반환한 문자열의 이름을 가진 class를 click 할 경우 추가또는 제거한다.

e.g.

$("#test").toggleClass(function(){
	return "a"
});

HTML

1) html()

최초의 요소로부터 HTML 을 문자열로서 취득한다. 이는 XML을 대상으로는 동작하지 않지만, XHTML 대상으로는 동작한다.

e.g.

// 첫 번째 p 태그안의 HTML을 반환받는다.
let str = $("p:first").html();
//--==>> 결과 : <b>제이쿼리<b> 라이브러리
		:
<p><b>제이쿼리</b> 라이브러리</p>

2) html(val)

모든 요소에 인수로 건네준 HTML을 set 한다. 이는 XML을 대상으로는 동작하지 않지만, XHTML 대상으로는 동작한다.

e.g.

// a 라는 id를 가진 요소(div 태그 등)에 html을 넣는다.
$("a").html("<span>제이쿼리 <b>라이브러리</b></span>");

Text

1) text()

지정한 요소가 가지는 텍스트 노드를 결합해 돌려준다.

e.g.

// 첫 번째 p 태그안의 문자열을 리턴 받는다. (html은 제외된다.)
let str = $("p:first").text(); 
//--==>> 결과 : 제이쿼리 라이브러리
		:
<p><b>제이쿼리</b> 라이브러리</p>

2) text(val)

지정한 요소에 텍스트 노드를 set 한다.

e.g.

// 첫 번째 p 태그 안의 문자열을 넣는다. (html을 넣는다고 해도 텍스트화 된다.)
$("p:first").text("<b>제이쿼리</b> 라이브러리");
		:
<p></p>
//--==>> p 태그 안에 [<b>제이쿼리</b> 라이브러리] 가 표시된다. ([제이쿼리]는 진하게 표시되지 않고 <b> </b> 태그가 그대로 보인다.)

Value

1) val()

모든 요소가 가진 value 속성의 값을 반환한다.

e.g.

// select 객체에서 선택된 value 속성의 값이 리턴
let str = $("#a").val();
		:
<select id="a">
	<option value="a">a</option>
	<option value="b">b</option>
</select>

2) val(val)

모든 요소의 value 속성에 값을 설정한다. select를 selects 하거나 radio 등의 값을 설정하는 일도 가능하다.

e.g.

// a 라는 id를 가진 객체의 value 속성에 값을 설정한다.(text 객체에 값을 설정)
$("#a").val("자바");
		:
<input type="text" id="a"/>

계층 선택자(selector)

ancestor descendant

: 조상(ancestor)엘리먼트의 자손(descendant)인 모든 descendant 엘리먼트를 선택

parent > child

: parent의 바로 아래 자식인 모든 child 엘리먼트를 선택

prev + next

: prev 엘리먼트 바로 다음의 형제인 next 엘리먼트를 선택

prev ~ sibling

: prev 엘리먼트 다음의 형제인 모든 sibling 엘리먼트를 선택

e.g.

// ancestor descendant
// form 태그 안의 input 태그 스타일 변경
$("form input").css("border", "2px solid red");

// prev > child
// 아이디가 main인 객체 아래의 모든 id 클래스 객체 스타일 변경
$("#main > .id").css("border", "3px dotted blue");

// prev + next
// label 태그 바로 아래 태그가 input인 모든 input 태그의 스타일 변경 및 value 값을 설정
$("label + input").css("color", "black").val("테스트!!!");
					:
<label>Name:</label>
<input name="name" />
<label>Email:</label>
<input name="email" />
<input name="none" />    <!--변화 없음-->

// prev ~ sibling
// 아이디가 prev 인 객체의 형제인 모든 div 태그의 스타일 변경
$("#prev ~ div").css("border", "2px groove blue");
					:
<div>div 1</div>    <!--변화 없음-->
<div id="prev">div 2</div>    <!--변화 없음-->
<div>div 3</div>
<div>div 4<div id="small">div 4-1</div></div>    <!-- 4-1은 변화 없음-->
<span>span</span>    <!--변화 없음-->
<div>div 5</div>

기본 필터 선택자(selector)

:first

: 페이지 처음 선택된 엘리먼트 선택

:last

: 페이지 마지막 선택된 엘리먼트 선택

:not(selector)

: 주어진 선택자와 반대의 모든 엘리먼트 선택

:even

: 페이지의 짝수 번째 엘리먼트 선택(인덱스는 0부터 시작)

:odd

: 페이지의 홀수 번째 엘리먼트 선택(인덱스는 0부터 시작)

:eq(index)

: 지정된 index 번째 엘리먼트 선택

:gt(index)

: 지정된 index 번째의 엘리먼트(포함되지 않음) 이후의 엘리먼트 선택

:lt(index)

: 지정된 index 번째의 엘리먼트(포함되지 않음) 이전의 엘리먼트 선택

:header

: 헤더(<h1> ~ <h6>) 엘리먼트 선택

:animated

: 현재 애니메이션이 적용되고 있는 엘리먼트 선택

e.g.

// 첫 번째 tr 태그 스타일 변경
$("tr:first").css("font-style", "italic");

// 마지막 tr 태그 스타일 변경
$("tr:last").css({"backgroundColor": "yellow", "fontWeight": "bolder"});

// checkbox 객체가 선택되지 않은 형제 태그인 span 태그의 스타일 변경
$("input:not(:checked) + span").css("background-color", "yellow");
			:

홍길동

이순신     

// 짝수행의 스타일 변경(인덱스는 0부터 시작)
$("tr:even").css("background-color", "#bbbbff");

// 홀수행의 스타일 변경(인덱스는 0부터 시작)
$("tr:odd").css("background-color", "#bbbbff");

// 2번째 인덱스의 td 태그의 스타일 변경(인덱스는 0부터 시작) - 하나의 td만 변경
$("td:eq(2)").css("text-decoration", "blink");

// 인덱스가 3보다 큰 td 태그 스타일 변경
$("td:gt(3)").css("text-decoration", "line-through");

// 인덱스가 4보다 작은 td 태그 스타일 변경
$("td:lt(4)").css("color", "red");

// h1, h2, h3 과 같은 헤더 태그 스타일 변경
$(":header").css({background:'#ccc', color:'blue'});

// 애니메이션이 동작하고 있는 것만 스타일 변경
			:
    
        $(document).ready(function(){
            $("#run").click(function(){
                $("div:animated").toggleClass("colored");
            });
            function animateIt(){
                $("#mover").slideToggle("slow", animateIt);
            }
            animateIt();
        });
    Run

내용 필터 선택자(selector)

:contains(text)

지정된 text 내용을 포함하는 엘리먼트 선택

:empty

자식을 가지지 않은 엘리먼트 선택

:has(selector)

지정된 selector와 일치되는 엘리먼트를 포함하는 엘리먼트 선택

:parent

빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트 선택

e.g.

// b 태그 안의 text에 j가 포함된 text의 스타일 변경
$("b:contains('j')").css("background", "yellow");

// 내용이 없는 td 태그에 text를 추가하고 스타일 변경
$("td:empty").text("테스트!").css('background', 'rgb(255, 220, 200)');

// div 태그 안의 p 태그에 class 속성에 test 클래스 설정
$("div:has(p)").addClass("test");

// td 태그에 값이 존재하는 경우 애니메이션효과 부여
// (주어진 것이 부모인 것을 모두 받아온다. 비어있는 것은 포함 안함)
$("td:parent").fadeTo(1500, 0.3);

가시 필터 선택자(selector)

:hidden

감춰진(hidden) 엘리먼트 선택

:visible

보이는(visible) 엘리먼트 선택

상태 확인하는 방법

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

css 속성이 #myDiv{display: none;} 이러면 isVisible은 false, isHidden은 true

e.g.

// hidden 속성인 div 태그를 보이게 함
$("div:hidden").show(3000);
			:
<div style="display:none; width:70px; height:40px; background:#ee77ff; margin:5px; float:left;">
  테스트~
</div>

// 보이는 div 태그를 클릭 할 경우 스타일 변경
$("div:visible").click(function(){
  $(this).css("background", "yellow");
});

// hidden 속성인 경우 보이게 함
if($('#myDiv').is(':hidden'))
  $('#myDiv').show();

속성 필터 선택자(selector)

[attribute]

지정된 속성(attribute)를 가지는 엘리먼트 선택

[attribute = value]

지정된 속성(attribute)과 값(value)을 가지는 엘리먼트 선택

[attribute != value]

지정된 속성과 같지 않거나 지정된 속성값을 가지지 않는 엘리먼트 선택

[attribute ^= value]

지정한 값으로 시작하는 속성을 가진 엘리먼트 선택

[attribute $= value]

지정한 값으로 끝나는 속성을 가진 엘리먼트 선택

[attribute *= value]

지정한 값을 포함하는 속성을 가진 모든 엘리먼트 선택

[attributeFilter1][attributeFilter2][attributeFilterN]

지정한 속성 필터 선택자와 일치하는 모든 엘리먼트 선택

e.g.

// 버튼의 style 변경
$("input[type='button']").css("background", "yellow");
			:
<input type="button" value="클릭" />

// input 객체의 name 속성이 test 인 모든 input 객체 다음 객체의 text 를 변경
$("input[name='test']").next().text("테스트~");
			:
<input type="radio" name="test" value="1">
<span>name?</span>
<input type="radio" name="test" value="2">
<span>name?</span>
<input type="checkbox" name="ch" value="3">
<span>name?</span>     <!-- 변화 없음 -->

// input 객체의 name 속성이 test가 아닌 모든 input 객체 다음 객체의 text를 변경
$("input[name!='test']").next().text("안녕!");
			:
<input type="radio" name="test" value="1">
<span>name?</span>     <!-- 변화 없음 -->
<input type="radio" name="test" value="2">
<span>name?</span>     <!-- 변화 없음 -->
<input type="checkbox" name="ch" value="3">
<span>name?</span>

// input 객체의 name속성이 news로 시작하는 객체의 value 속성 값 설정
$("input[name^='news']").val("abc !");

// input 객체의 name 속성이 letter 로 끝나는 객체의 value 속성 값 설정
$("input[name$='letter']").val("a letter");

// input 객체의 name 속성이 man을 포함하는 모든 객체의 value 속성 값 설정
$("input[name*='man']").val("man !!!");

자식 필터 선택자(selector)

:nth-child(index/even/odd/equation)

N/짝수/홀수/수식에 따른 번째 자식 엘리먼트 선택

:first-child

첫 번째 자식 엘리먼트 선택

:last-child

마지막 자식 엘리먼트 선택

:only-child

형제가 없는 자식 엘리먼트 선택

// tr의 2번째 자식의 td태그 스타일 변경(인덱스는 1부터 시작) - 3번째 자식 열 전체
$("td:nth-child(3)").css("text-decoration", "blink");

폼 선택자(selector)

:input

모든 input, textarea, select, button 요소 선택

:text

text 타입의 모든 input 요소 선택

:password

password 타입의 모든 input 요소 선택

:radio

radio 타입의 모든 input 요소 선택

:checkbox

checkbox 타입의 모든 input 요소 선택

:submit

submit 타입의 모든 input 요소 선택

:image

image 타입의 모든 input 요소 선택

:reset

reset 타입의 모든 input 요소 선택

:button

모든 button 요소들 및 button 타입의 input 요소 선택

:file

file 타입의 모든 input 요소 선택

:hidden

hidden 상태인 모든 요소 선택

e.g.

// text 타입의 모든 input 요소의 스타일 변경
$('input:text').css('border', '1px solid blue');

// checked 속성과 selected 속성을 가진 항목 스타일 변경
$(":checked,:selected").css("border", "2px solid red");

폼 필터 선택자(selector)

:enabled

현재 enable 상태인 모든 요소 선택

:disabled

현재 disable 상태인 모든 요소 선택

:checked

체크 상태인 모든 요소 선택

:selected

선택된 모든 요소 선택