본문 바로가기
매일코딩/자바스크립트 개념

[자바스크립트 기초]제이쿼리 2

by 인생여희 2017. 3. 3.
반응형

요소의 콘텐츠 가져오기

.html() 메서드와 .text() 메서드는 요소의 콘텐츠를 조회하는 기능과 수정하는 기능을 모두 제공한다. 이 페이지는 요소의 콘텐츠를 조회하는 방법에 초점을 맞춘다.

 

.html()

jQuery 객체집합으로부터 정보를 조회할 목적으로 이 메서드를 호출하면, 첫 번째 요소와 그 하위 노드들의 html 코드만을 얻게 된다.


) $(‘ul’).html(); 메서드는 다음의 코드를 리턴한다.

<li id="one" class="hot"><em>fresh</em> figs</li>

<li id="two" class="hot">pine nuts</li>

<li id="three" class="hot">honey</li>

<li id="four">balsamic vinegar</li>

 

반면, $(‘li’).html() 메서드는 다음 코드를 리턴한다.

<em>fresh</em>

이 경우 첫 번째 <li> 요소의 콘텐츠만 리턴된다.

모든 요소값을 조회하려면 .each() 메서드를 사용한다.

 

.text()

jQuery 객체집합으로부터 텍스트를 조회할 목적으로 이 메서드를 호출하면, 이 메서드는 jQuery 객체집합 내 모든 요소의 텍스트와 그 하위 요소들의 텍스트들을 리턴한다.

 

예를 들어, $(‘ul’).text() 메서드는 다음과 같은 결과를 리턴한다.

fresh figs

pine nuts

honey

balsamic vinegar

 

반면 $(‘li’).text(); 메서드는 다음과 같은 코드를 리턴한다.

fresh figspine nutshoneybalsamic vinegar

이 메서드가 모든 <li> 요소의 텍스트를 리턴하지만, 각 목록 아이템의 텍스트 사이에 공백은 추가되지 않는다.

 

<input> 요소나 <textarea> 요소에서 내용을 가져오려면 .val()메서드를 사용한다.


요소 수정하기

객체집합 내 모든 요소들의 콘텐츠를 수정하는 jQuery의 메서드는 네가지가 있다.

.html()

일치하는 모든 요소에 새로운 동일한 콘텐츠를 설정한다.

새로운 콘텐츠는 html을 포함할 수도 있다.

 

.text()

새로운 동일한 텍스트 콘텐츠를 설정한다. 콘텐츠에 마크업이 포함되어 있으면 이들은 텍스트로 표현된다.

 

.replaceWith()

새로운 동일한 콘텐츠를 추가한다. 교체된 요소들은 모두 리턴.


.remove()

일치하는 모든 요소들을 제거한다.

 

 

)

.html

<body>

<div id="page">

<h1 id="header">List</h1>

<h2>Buy groceries</h2>

<ul>

<li id="one" class="hot"><em>fresh</em> figs</li>

<li id="two" class="hot">pine nuts</li>

<li id="three" class="hot">honey</li>

<li id="four">balsamic vinegar</li>

</ul>

</div>

<script src="js/jquery-1.11.0.js"></script>

<script src="js/changing-content.js"></script>

</body>


.js

$(function() {

$('li:contains("")').text('아몬드');

$('li.hot').html(function() {

return '<em>' + $(this).text() + '</em>';

});

$('li#one').remove();

});

 

해석

1.잣 이라는 단어가 포함된 아이템을 가져와 해당 요소의 텍스트를 아몬드로 변경

2.class 특성에 hot이라는 단어가 포함된 아이템들을 모두 가져와 .html() 메서드를 이용하여

아이템의 콘텐츠를 수정한다.

3.id 특성값이 oneli 요소들을 찾아 remove() 메서드를 적용한다.

 

요소 삽입하기

새로운 요소들을 삽입하려면 다음의 두 가지 단계를 거쳐야 한다.

jQuery 객체에 새로운 요소를 생성한다


)

var $ newFragment = $(‘<li>’);

 

var $newItem = $(‘<li class = “new”>아이템</li>’);

 

페이지에 콘텐츠를 삽입하는 메서드를 호출한다.

.before() - 선택된 요소 전에 삽입

.after() - 선택된 요소 다음에 삽입

.prepend() - 선택된 요소의 여는 태그 다음에 콘텐츠 삽입

.append() - 선택된 콘텐츠 닫는 태그 전에 콘텐츠 삽입

.before() <li> .prepend() item .append </li> .after()

)

.html

<div id="page">

<h1 id="header">List</h1>

<h2>Buy groceries</h2>

<ul>

<li id="one" class="hot"><em>fresh</em> figs</li>

<li id="two" class="hot">pine nuts</li>

<li id="three" class="hot">honey</li>

<li id="four">balsamic vinegar</li>

</ul>

</div>

 

.js

$(function() {

$('ul').before('<p class="notice">Just updated</p>');

$('li.hot').prepend('+ ');

var $newListItem = $('<li><em>gluten-free</em> soy sauce</li>');

$('li:last').after($newListItem);

});

 

1.<ul> 요소를 선택한 후, .before() 메서드를 호출하여 새로운 단락을 목록 앞에 추가한다.

2.class 특성에 hot 이라는 값을 가진 모든 <li> 요소를 선택한 후 덧셈기호 추가

3. 새로운 요소를 생성하고 변수에 저장. 이후 마지막 li 요소를 선택하고 after 메서드를 호출하여 새로운 요소를 그 뒤에 추가

 

특성 값 가져오기 및 설정하기

다음의 네 가지 메서드를 이용하면 특성을 생성하고 그 값을 가져오거나 수정할 수 있다.

 

.attr() - 이 메서드는 특정 특성과 그 값을 가져올 수 있다. 특성 값을 가져오려면 괄호 안에 특성의 이름을 지정하면 된다.

$(‘li#one’). attr(‘id’);

$(‘li#one’). attr(‘id’,‘hot’);

특성 값을 수정하려면 특성의 이름과 값을 모두 명시하면 된다.

 

.removeAttr()

이 메서드는 지정된 특성을 제거한다. 삭제하고자 하는 특성의 이름을 괄호 안에 명시하기만 하면된다.

$(‘li#one’).removeAttr(‘id’);

 

.addClass()

이 메서드는 이미 존재하는 class 특성 값에 새로운 값을 추가한다. 이때 기존의 값은 덮어 쓰지 않는다.

 

.removeClass()

이 메서드는 calss 특성에서 값을 제거한다. 이때 해당 특성의 다른 클래스 이름은 고스란히 남겨둔다.

 

)

.html

<div id="page">

<h1 id="header">List</h1>

<h2>Buy groceries</h2>

<ul>

<li id="one" class="hot"><em>fresh</em> figs</li>

<li id="two" class="hot">pine nuts</li>

<li id="three" class="hot">honey</li>

<li id="four">balsamic vinegar</li>

</ul>

</div>

 

.js

$(function() {

$('li#three').removeClass('hot');

$('li.hot').addClass('favorite');

$('ul').attr('id', 'group');

});

 

 

1.세번째 목록 아이템을 찾아 해당 요소의 class 특성에서 hot이라는 값을 제거한다.

2. 두 번째 구문은 class 특성값이 hot인 모든 li 요소를 찾아 favorite 이라는 이름을 추가한다.

3. 세 번째 구문은 ul 요소를 찾아낸 후 id 특성을 추가하고 그 값을 group 으로 지정한다.

 

css 속성 가져오기 및 설정하기

.css() 메서드는 css 속성 값을 가져오거나 설정한다.

css 속성 값을 가져오려면 괄호 안에 값을 가져올 속성을 명시한다.

var backgroundColor = $(‘li’).class(‘background-color’);

css 속성에 값을 설정하려면 괄호의 첫 번째 매개변수에 속성의 이름을 지정하고,

콤마 다음의 두 번째 매개수에 원하는 값을 지정한다.

$(‘li’).class(‘background-color’,‘red’);

필셀로 표현되는 크기를 다룰 때는 += -=연산자를 이용하여 값을 증가하거나 감소할 수 있다.

 

) css 규칙 변경하기

$(function() {

// li의 첫 번째 요소의 배경색 가져옴

var backgroundColor = $('li').css('background-color');

// ul 요소 다음에 아래 문구 추가

$('ul').append('<p>Color was: ' + backgroundColor + '</p>');

// 셀럭터를 통해 찾아낸 모든 li 요소에 대해 여러개의 속성 수정

$('li').css({

'background-color': '#c5a996',

'border': '1px solid #fff',

'color': '#000',

'text-shadow': 'none',

'font-family': 'Georgia',

'padding-left': '+=75'

});

});


객체집합 내 개별 요소 다루기

객체집합 내 요소들에 대해 루프가 필요할 때는 jQuery.each() 매서드를 이용하면 된다.

 

.each()

루프와 마찬가지로 셀렉터가 선택한 모든 요소에 대해 하나 혹은 그 이상의 구문을 실행할 수 있는 메서드이다. 매개변수로는 각 요소에 대해 실행하고자 하는 기능을 구현한 함수를 전달하면 된다.

 

this 또는 $(this)

.each() 메서드가 객체집합 내의 요소들을 대상으로 실행되는 동안 현재 작업의 대상이 된 요소는 this 키워드를 이용해 얻을 수 있다.


)

$(function() {

$('li').each(function() {

var ids = this.id;

$(this).append(' <span class="order">' + ids + '</span>');

});

});


모든 li 요소를 가진 jQuery 객체를 생성한다. .each 메서드는 객체 집합내의 요소에 대해 익명 함수를 적용한다.

this 키워드는 루프내에서 현재 요소 노드를 참조한다. 이 키워드를 통해 현재 요소의 id 속성 값을 가져와 ids 변수에 저장한다.

$(this)는 루프 내의 현재 요소를 가지고 있는 jQuery 객체를 생성한다. 요소를 jQuery 객체에 저정하면 그 요소에 대해 jQuery 메서드를 사용할 수 있다.

 

이벤트 메서드

on() 메서드는 모든 이벤트를 처리 할 수 있다.

내부적으로 jQuery는 바로 이전 장에서 살펴봤떤 크로스 브라우저 이슈들을 모두 고려한다.

셀렉터를 이용하여 jQuery 객체집합을 생성한다.

.on 메서드를 이용하여 대응할 이벤트를 지정한다. 그러면 이 메서드는 객체집합내의 모든 이벤트에 이벤트 리스너를 추가한다.

 

)

.html

<body>

<div id="page">

<h1 id="header">List</h1>

<h2>Buy groceries</h2>

<ul>

<li id="one" class="hot"><em>fresh</em> figs</li>

<li id="two" class="hot">pine nuts</li>

<li id="three" class="hot">honey</li>

<li id="four">balsamic vinegar</li>

</ul>

</div>

 

.js

$(function() {

var ids = '';

var $listItems = $('li');

$listItems.on('mouseover click', function() {

ids = this.id;

$listItems.children('span').remove();

$(this).append(' <span class="priority">' + ids + '</span>');

});

$listItems.on('mouseout', function() {

$(this).children('span').remove();

});

});

 

페이지 내의 모든 목록 아이템을 탐색

.on() 메서드는 사용자가 목록 아이템으로 마우스를 움직이거나 클릭했을 때 대응할 이벤트 리스너를 생성한다.

해당 요소의 id 특성값을 가져온다. 모든 목록 아이템으로부터 span 요소 제거, id 특성 값을 새로운 span 요소에 담아 목록 아이템에 표시한다.

.mouseout() 메서드는 값들이 계속해서 만들어 지는 거을 방지하기 위해 모든 span요소들 제거한다.

반응형

댓글