jQuery => DOM 조작

DOM 요소 만들기

jQuery 함수 (대개 $ 앨리어싱 됨)는 요소를 선택하고 새 요소를 만드는 데 사용할 수 있습니다.

var myLink = $('<a href="http://stackexchange.com"></a>');

선택적으로 요소 속성을 가진 두 번째 인수를 전달할 수 있습니다.

var myLink = $('<a>', { 'href': 'http://stackexchange.com' });

'<a>' -> 첫 번째 인수는 만들려는 DOM 요소의 유형을 지정합니다. 이 예에서는 앵커 이지만 이 목록의 어떤 것도 될 수 있습니다. a 요소에 대한 참조는 스펙 을 참조하십시오.

{ 'href': 'http://stackexchange.com' } -> 두 번째 인수는 속성 이름 / 값 쌍을 포함하는 JavaScript 객체 입니다.

첫 번째 인수의 < > 사이에 'name': 'value'쌍이 표시됩니다 (예 : <a name:value> 예를 들어 <a href="http://stackexchange.com"></a>

요소 클래스 조작

페이지가 다음과 같은 HTML 요소를 포함한다고 가정합니다.

<p class="small-paragraph">
  This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
  with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>

jQuery는 DOM 클래스, 특히 hasClass() , addClass() , removeClass() 및 toggleClass() 와 같은 유용한 함수를 제공합니다. 이러한 함수는 일치하는 요소의 class 특성을 직접 수정합니다.

$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false

// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');

// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');

수업 토글

예제 마크 업이 주어지면 첫 번째 .toggleClass() 클래스를 추가 할 수 있습니다.

$(".small-paragraph").toggleClass("pretty");

이제 이것은 true 반환 true : $(".small-paragraph").hasClass("pretty")

toggleClass 는 다음과 같이 적은 코드로 동일한 효과를 제공합니다.

if($(".small-paragraph").hasClass("pretty")){
   $(".small-paragraph").removeClass("pretty");}
else {
   $(".small-paragraph").addClass("pretty"); }

두 클래스를 토글합니다.

$(".small-paragraph").toggleClass("pretty cool");

클래스를 추가 / 제거하는 부울 :

$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey

$(".small-paragraph").toggleClass("pretty",false);

클래스 토글 기능 (문제를 피하기 위해 예제를 더 자세히 참조하십시오)

$( "div.surface" ).toggleClass(function() {
  if ( $( this ).parent().is( ".water" ) ) {
    return "wet";
  } else {
    return "dry";
  }
});

예제에서 사용 :

// functions to use in examples
function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class

예 :

요소 인덱스를 사용하여 홀수 / 짝수 클래스 전환

$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
  showClass
  if ( isOdd(index) ) {
    return "wet";
  } else {
    return "dry";
  }
});

좀 더 복잡한 toggleClass 예제, 간단한 그리드 마크 업 제공

<div class="grid">
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow gridfooter">row but I am footer!</div>
</div>

우리 예제의 간단한 함수 :

function isOdd(num) {
  return num % 2;
}

function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class

gridrow 클래스가있는 요소에 홀수 / 짝수 클래스 추가

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  if (isOdd(index)) {
    return "odd";
  } else {
    return "even";
  }
  return oldClasses;
}, showClass);

행에 gridfooter 클래스가 있으면 홀수 / 짝수 클래스를 제거하고 나머지는 유지하십시오.

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (isFooter) {
    oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
    $(this).toggleClass("even odd", false);
  }
  return oldClasses;
}, showClass);

반환되는 클래스는 영향을받는 클래스입니다. 여기에 요소가 gridfooter 없는 경우 짝수 / 홀수에 대한 클래스를 추가하십시오. 이 예는 OLD 클래스 목록의 반환을 보여줍니다. 이 else return oldClasses; 클래스가 제거 된 경우 새 클래스 만 추가되므로 gridfooter 클래스가있는 행은 gridfooter 클래스를 반환하지 않은 경우 모든 클래스를 제거하게됩니다. 그렇지 않은 경우에는 다른 클래스를 토글 (제거)했을 것입니다.

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (!isFooter) {
    if (isOdd(index)) {
      return "oddLight";
    } else {
      return "evenLight";
    }
  } else return oldClasses;
}, showClass);

기타 API 메소드

jQuery는 DOM 조작에 사용할 수있는 다양한 메소드를 제공합니다.

첫 번째는 .empty () 메소드입니다.

다음 마크 업을 상상해보십시오.

<div id="content">
  <div>Some text</div>
</div>

$('#content').empty(); 를 호출함으로써 $('#content').empty(); 내부 div가 제거됩니다. 이것은 $('#content').html(''); 를 사용하여 얻을 수도 있습니다 $('#content').html(''); .

또 다른 편리한 함수는 .closest () 함수입니다.

<tr id="row_1">
  <td><button type="button" class="delete">Delete</button>
</tr>

행 셀 중 하나에서 클릭 한 버튼에 가장 가까운 행을 찾으려면 다음을 수행 할 수 있습니다.

$('.delete').click(function() {
  $(this).closest('tr');
});

아마 각기 자신의 delete 버튼이있는 여러 행이 있기 때문에 .click () 함수 내에서 $(this) 를 사용하여 실제로 클릭 한 버튼으로 범위를 제한합니다.

클릭 한 Delete 단추가 포함 된 행의 id 를 가져 오려면 다음과 같이 할 수 있습니다.

$('.delete').click(function() {
  var $row = $(this).closest('tr');
  var id = $row.attr('id');
});

jQuery 객체를 포함하는 변수 앞에 $ (달러 기호)를 붙이면 변수가 무엇인지 분명히하는 것이 좋습니다.

.closest() 대신 .parents () 메서드를 사용할 수 있습니다.

$('.delete').click(function() {
  var $row = $(this).parents('tr');
  var id = $row.attr('id');
});

또한 .parent () 함수도 있습니다.

$('.delete').click(function() {
  var $row = $(this).parent().parent();
  var id = $row.attr('id');
});

.parent() 는 DOM 트리의 한 레벨 위로 올라 가기 때문에 매우 유연하지 못합니다. 예를 들어 span 내에 포함되도록 삭제 버튼을 변경하면 jQuery 선택기가 손상됩니다.

.html ()

이 메서드를 사용하여 선택기 내의 모든 HTML을 바꿀 수 있습니다. 이 HTML 요소가 있다고 가정합니다.

<div class="row">
    <div class="col-md-12">
        <div id="information">
            <p>Old message</p>
        </div>
    </div>
</div>

.html() 사용할 수 있습니다. 경고 또는 정보 텍스트를 제거하고 추가하여 한 줄로 모두 사용자에게 경고합니다.

$("#information").html("<p>This is the new alert!</p>");

요소 정렬하기

요소를 효율적으로 정렬하려면 (한 번에 최소 DOM 중단으로) 다음을 수행해야합니다.

요소 찾기
설정된 조건에 따라 정렬
DOM에 다시 삽입하십시오.

<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

그들을 찾으십시오. .children() 또는 .find()

이렇게하면 Array와 유사한 객체를 재생할 수 있습니다.

var $myColorList = $('#my-color-list');

// Elements one layer deep get .children(), any deeper go with .find()
var $colors = $myColorList.children('li');

배열 재정렬 - Array.prototype.sort()

현재 HTML 컨텐트 (일명 색상)를 기준으로 오름차순으로 요소를 반환하도록 설정되어 있습니다.

/**
 * Bind $colors to the sort method so we don't have to travel up
 * all these properties more than once.
 */
var sortList = Array.prototype.sort.bind($colors);

sortList(function ( a, b ) {

    // Cache inner content from the first element (a) and the next sibling (b)
    var aText = a.innerHTML;
    var bText = b.innerHTML;
 
    // Returning -1 will place element `a` before element `b`
    if ( aText < bText ) {
        return -1;
    }

    // Returning 1 will do the opposite
    if ( aText > bText ) {
        return 1;
    }

    // Returning 0 leaves them as-is
    return 0;
});

그들을 삽입하십시오 - .append()
먼저 요소를 분리 할 필요가 없습니다. append() 는 DOM에 이미 존재하는 요소를 이동시켜 여분의 사본을 가지지 않습니다.
```
// Put it right back where we got it
$myColorList.append($colors);
```

귀엽게 만들어라.

정렬 버튼 추가

<!-- previous HTML above -->
<button type='button' id='btn-sort'>
    Sort
</button>

정렬 방향의 초기 값 설정

var ascending = true;

DOM 요소를 캐시하고 `sortList()` 하여 DOM 처리를 최소화하십시오.

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

`doSort()` 함수에서 모든 것을 래핑하십시오.

// Put the sortList() and detach/append calls in this portable little thing
var doSort = function ( ascending ) {

    sortList(function ( a, b ) {
        // ...
    });

    $myColorList.append($colors);
};

`$('#btn-sort')` 대한 클릭 처리기 추가

$('#btn-sort').on('click', function () {
    // Run the sort and pass in the direction value
    doSort(ascending);

    // Toggle direction and save
    ascending = !ascending;
});

모두 함께

var ascending = true;

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

var doSort = function ( ascending ) {
    
    sortList(function ( a, b ) {

        var aText = a.innerHTML;
        var bText = b.innerHTML;

        if ( aText < bText ) {
            return ascending ? -1 : 1;
        }

        if ( aText > bText ) {
            return ascending ? 1 : -1;
        }

        return 0;
    });
    
    $myColorList.append($colors);

};

$('#btn-sort').on('click', function () {
    doSort(ascending);
    ascending = !ascending;
});

보너스

다단계 정렬 (정렬 된 요소 그룹화)

// ...

var doSort = function ( ascending ) {

    sortList(function ( a, b ) {

        // ...initial sorting...

    }).sort(function ( a, b ) {
        
        // We take the returned items and sort them once more
        var aClass = a.className;
        var bClass = b.className;
        
        // Let's group the disabled items together and put them at the end

        /**
         * If the two elements being compared have the same class
         * then there's no need to move anything.
         */
        if ( aClass !== bClass ) {
            return aClass === 'disabled' ? 1 : -1;
        }
        return 0;
    });

    // And finalize with re-insert
    $myColorList.append($colors);
};

// ...

한 걸음 더 나아갈 수 있습니까?

비활성화 된 그룹 정렬을 토글하는 또 다른 버튼 추가

MDN - Array.prototype.sort ()

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

jQuery
DOM 조작

수색…

DOM 요소 만들기

요소 클래스 조작

기타 API 메소드

.html ()

요소 정렬하기

귀엽게 만들어라.

정렬 버튼 추가

정렬 방향의 초기 값 설정

DOM 요소를 캐시하고 `sortList()` 하여 DOM 처리를 최소화하십시오.

`doSort()` 함수에서 모든 것을 래핑하십시오.

`$('#btn-sort')` 대한 클릭 처리기 추가

모두 함께

다단계 정렬 (정렬 된 요소 그룹화)

비활성화 된 그룹 정렬을 토글하는 또 다른 버튼 추가

DOM 요소 만들기

요소 클래스 조작

기타 API 메소드

.html ()

요소 정렬하기

귀엽게 만들어라.

정렬 버튼 추가

정렬 방향의 초기 값 설정

DOM 요소를 캐시하고 sortList() 하여 DOM 처리를 최소화하십시오.

doSort() 함수에서 모든 것을 래핑하십시오.

$('#btn-sort') 대한 클릭 처리기 추가

모두 함께

다단계 정렬 (정렬 된 요소 그룹화)

비활성화 된 그룹 정렬을 토글하는 또 다른 버튼 추가

DOM 요소를 캐시하고 `sortList()` 하여 DOM 처리를 최소화하십시오.

`doSort()` 함수에서 모든 것을 래핑하십시오.

`$('#btn-sort')` 대한 클릭 처리기 추가