'날카로운 jQuery'셋째, jQuery의 DOM 조작
노드 삽입
append()
일치하는 요소마다 내부에 내용을 추가
$('p').append(' ');한 결과 p 였다.appendTo()
모든 일치하는 요소를 지정한 요소에 추가합니다. append와는 상반됩니다.
$(' ').appendTo('p'); 결과 p 였다.prepend()
일치하는 요소 내부에 대한 전치 내용
$('p').prepend(' ')의 결과는 p 이다.prependTo()
일치하는 모든 요소를 지정된 요소 앞에 놓습니다.prepend와는 반대입니다.
$(' ').prependTo('p') 결과 p 였다.after()
일치하는 요소 다음에 내용을 삽입합니다.
$('p').after(' ') 결과 p insertAfter() 일치하는 모든 요소를 지정한 요소 뒤에 삽입합니다. 애프터와는 반대입니다.
$(' ').insertAfter('p') 결과 p before() 일치하는 각 요소 앞에 컨텐트를 삽입합니다.
$('p').before(' ') 결과 p insertBefore() 일치하는 모든 요소를 지정한 요소의 앞에 삽입합니다. before와는 상반됩니다.
$(' ').insertBefore('p') 결과 p 노드 삭제remove()
일치하는 요소 자체와 모든 후대 노드를 삭제합니다.반환 값은 삭제된 모든 노드의 인용이기 때문에 나중에 삭제된 요소를 사용할 수 있습니다.
$('ul li:eq(1)').remove() 두 번째 이 방법은 매개 변수를 전달하여 매개 변수를 통해 선택적으로 요소를 삭제할 수 있다.
$('ul li').remove('li[title!=" "]');detach()
remove () 와 마찬가지로 DOM에서 일치하는 요소를 제거하지만, jQuery 대상에서 삭제하지 않기 때문에 나중에 일치하는 요소를 사용할 수 있습니다.remove ()와 달리 모든 연결된 이벤트, 추가 데이터 등은 보존됩니다.
empty()
empty () 는 노드를 삭제하는 것이 아니라 노드를 비우고 일치하는 요소의 모든 후대 노드를 비웁니다.
$('ul li:eq(1)').empty() 두 번째 복제 노드
clone()
clone()를 통해 하나의 노드를 복제하면 기본적으로 복제할 수 없는 노드의 이벤트를 전송하려면 파라미터true가 있어야 노드에 연결된 이벤트를 동시에 복제할 수 있습니다.노드 바꾸기
replaceWith() 및 replaceAll()
교체 노드는
replaceWith() 및 replaceAll()입니다.만약 교체하기 전에 원소 귀속 이벤트가 있다면, 교체 후 원래 귀속된 이벤트는 교체된 원소와 함께 사라지고, 새로운 원소에서 이벤트를 다시 귀속해야 합니다.$('p').replaceWith(' span ') 페이지의 p 요소를span 요소로 바꿉니다.$(' span ').replaceAll('p')span 요소로 페이지의 p 요소를 대체합니다.패키지 노드
wrap()
일치하는 모든 요소를 다른 표시로 감싸고 원본 문서의 의미를 파괴하지 않습니다.
$('strong').wrap(''); 였다.wrapAll()
일치하는 모든 요소를 라벨로 감싸세요.
$('strong').wrapAll(''); 였다.wrapInner()
일치하는 모든 요소의 하위 내용을 다른 라벨로 감싸세요.
$('strong').wrapAll('');원소속성 작업
attr() 및 prop()
속성을 가져오고 설정하는 데 사용되며, 하나의 매개 변수만 전달하면 하나의 속성을 가져오는 값이고, 두 개의 매개 변수는 설정 속성이며, 여러 개의 속성을 설정하려면 하나의 대상에게 전달할 수 있다.
prop()는 html 요소의 고유 속성을 설정하고 얻는 데 적합하고attr()는 사용자 정의 속성을 설정하고 얻는 데 적합하다.가장 주요한 차이점은 폼 요소의 속성이다. 예를 들어
checked과selected이다. 이것도 고유의 속성이다. 이런 것은 보통 설정이 없거나 사용자 작업이 선택되지 않으면false로 돌아가고 설정하거나 선택되면true로 돌아가기를 바란다.// input
console.log($("input").attr("checked")) // undefined
console.log($("input").prop("checked")) // false
console.log($("input").attr("checked")) // checked
console.log($("input").prop("checked")) // true
removeAttr() 및 removeProp()
삭제할 속성 이름의 매개 변수만 전달할 수 있습니다.
removeAttr()는 전체 속성을 삭제하고 remobeProp()는 이 속성의 값을undefined로 바꾸며 removeProp()는 사용자 정의 속성에 무효입니다.스타일 조작
addClass()
이 방법은 스타일을 추가하는 데 사용되며, 일치하는 원소의 원래 클래스 이름에 클래스 이름을 추가한다
$('p').addClass('active')removeClass() 클래스 이름을 삭제합니다. 매개 변수를 전달하지 않을 때 일치하는 요소 대상의 모든 클래스 이름을 삭제합니다.
$('p').removeClass(); 는 모든 p 요소의 모든 클래스 이름을 삭제합니다.지정한 클래스 이름을 삭제할 수도 있고
$('p').removeClass('high'); 모든 p 요소의 하이 클래스 이름을 삭제할 수도 있습니다.toggleClass()
클래스 이름 바꾸기, 즉 전송된 클래스 이름이 존재하면 삭제하고, 존재하지 않으면 추가,
$('p').toggleClass('active')hasClass() 일치하는 원소 대상에 어떤 클래스가 있는지 판단하고 브리 값을 되돌려준다
$('p').hasClass('active')콘텐츠 설정 및 가져오기html()
일치하는 요소의 html 내용을 읽고 설정하는 데 사용되며 innerHTML 방법과 유사합니다.전하지 않는 파라미터는 가져오는 것입니다.
text()
일치하는 요소를 읽고 설정하는 데 사용되는 텍스트 내용은 innerText 방법과 유사하지만 text ()는 모든 브라우저를 호환하고 innerText는 Firefox를 호환하지 않습니다.
val()
텍스트 상자, 드롭다운 목록, 단일 선택 상자, 다중 선택 상자 요소의 값을 읽고 설정할 수 있습니다. 여기서 요소가 다중 선택인 경우 선택한 값이 모두 포함된 배열이 반환됩니다.
매개 변수를 전달하지 않으면 값을 가져오고, 매개 변수는 설정 요소의 값입니다. val () 는 폼 요소를 대상으로 하기 때문에 아래 목록, 단일 선택 상자, 다중 선택 상자를 조작할 수 있습니다.
$('#multiple').val(' '); // ，
$(':checbox').val(['check2','check3']) // ， ， 。
노드를 옮겨다니다
children()
이 방법은 일치하는 원소의 모든 하위 원소의 개수를 얻는 데 사용되며, 이 방법은 하위 원소만 고려하고 후대 원소는 고려하지 않습니다.
next()
일치하는 원소 뒤에 인접한 동년배 원소를 가져옵니다.
prev()
일치하는 원소 앞에 인접한 동년배 원소를 가져옵니다.
siblings()
일치하는 원소의 앞뒤 동년배 원소를 가져옵니다. 자신을 포함하지 않습니다.
closest()
가장 가까운 일치하는 요소를 가져옵니다. 우선 현재 요소가 일치하는지 확인하고, 일치하면 요소 자체로 돌아갑니다.일치하지 않으면 일치하는 요소를 찾을 때까지 단계별로 찾습니다. 아무것도 찾지 못하면 빈 jQuery 대상을 되돌려줍니다.
parent()、parents()
parent () 는 일치하는 요소를 가져오는 부모 요소입니다. 노드만 되돌려줍니다.
parents () 는 일치하는 원소를 가져오는 조상 원소로 여러 노드를 되돌려줍니다.
find()
일치하는 요소 아래에 지정된 모든 요소를 검색합니다.
filter()
일치하는 요소 중 매개 변수 표현식에 맞는 요소를 얻습니다.
find() 와는 달리 find() 는 후손에서 일치하는 것이고, filter() 는 현재 요소에서 일치하는 것입니다.함수 내부return의 판단 표현식을true로 전송하면 표현식이 일치하는 요소를 되돌려줍니다.
nextAll()
일치하는 원소 다음의 모든 동년배 원소 가져오기
prevAll()
일치하는 원소 이전의 모든 동년배 원소 가져오기
CSS-DOM
css()
css 속성을 입력하면 일치하는 요소의 css 속성 값을 얻을 수 있으며, 줄 안이든 외부든 인용할 수 있습니다.
두 개의 매개 변수를 전송합니다. 첫 번째는 속성이고, 두 번째는 속성 값입니다. 일치하는 요소의 css 스타일을 설정할 수도 있고, 한 대상을 직접 전송할 수도 있습니다.기호가 있는 속성은 낙타봉으로 써야 하고 속성은 인용부호를 붙이는 것이 가장 좋다.
width()、height()
일치하는 요소의 너비와 높이를 직접 가져옵니다. 단위가 없고, 여기에서 얻은 너비는 css 설정과 무관하며, 요소가 페이지에서 실제 너비입니다.
값의 형식은 문자열인 값의 높이와 너비를 설정할 수도 있습니다.
offset()
현재 창에서 원소의 상대적인 편이를 가져옵니다. 되돌아오는 값은 top와left입니다. 보이는 원소에만 유효합니다.
position()
원소를 가져오는 것은 최근의position 스타일 속성에 비해relative나 absolute의 할아버지 노드의 상대적인 편이를 설정하고 대상을 되돌려주며 top와left를 가져옵니다.
scrollTop()、scrollLeft()
요소의 스크롤 막대가 맨 위에 있는 거리와 왼쪽에 있는 거리를 가져옵니다.
이 두 가지 방법에 매개 변수를 지정하여 요소의 스크롤 바가 지정한 위치로 굴러가는 것을 제어할 수 있습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
