jQuery DOM 작업은 Commands_jquery를 기반으로 페이지를 변경합니다.

아 광고 같은데? 하하, 하지만 실제로는 그렇습니다. jQuery는 이러한 복잡한 DOM 작업을 간단하게 만드는 풍부한 DOM 작업 방법을 제공합니다.
지난번에 jQuery에 대해 쓴지 꽤 오랜 시간이 흐른 것 같네요. 하하, 가자~
작업 속성:
앞서 말했듯이. () 및 .removeClass() 메소드는 실제로 DOM 속성인 className을 변경합니다.
그런데 왜 요소의 클래스 이름을 직접 class라고 부르지 않고 className이라고 하는지 다시 한 번 말씀드리고 싶습니다. class는 js의 예약어이기 때문입니다. 음.
클래스 외에도 id, rel 및 href와 같은 DOM 요소의 다른 속성이 있습니다. 이러한 속성을 어떻게 작동합니까?
걱정하지 마세요. jQuery는 .attr() 및 .removeAttr() 메서드를 제공합니다.
심지어 이 두 가지 방법을 사용하여 .class() 메서드를 대체할 수도 있습니다. 문제를 일으키고 싶다면 하하. .
다음으로 빨간색 단어를 녹색으로 바꾸겠습니다. 게다가 나는 GOOGLE을 좋아하지만 Baidu를 좋아하는 사람들도 있으니 마음에 드는 것을 선택합시다.

코드 복사 코드는 다음과 같습니다.

하이퍼링크가 있습니다. 하이퍼링크는 < ;a href='http:/www.baidu.com' target='_blank' class='link'>Baidu


이 버튼을 클릭하세요. Baidu를 GOOGLE로 변경하려면 다시 클릭하여 Baidu


여기에 단어의 색상이 빨간색입니다. 나는 빨간색입니다 ;br/>
빨간색을 녹색으로 바꾸려면 이 버튼을 클릭하세요

코드 복사 코드는 다음과 같습니다.

$(document).ready(function(){
$( ' #but_link').toggle(function(){
$('.link').attr('href','http://www.google.com');
$('.link ' ).text('GOOGLE');
$(this).attr('value','바이두가 되자')
},function(){
$('.link') . attr('href','http://www.baidu.com');
$('.link').text('Baidu')
$(this).attr('value ' ,'GOOGLE')
});
$('#but_color').toggle(function(){
$('.font').attr('color','green ' );
$('.font').text('나는 녹색이다, 나는 녹색이다')
$(this).attr('value','Turn it red'); },function(){
$('.font').attr('color','red')
$('.font').text('나는 빨간색이다, 나는 빨간색이다' );
$(this).attr('value','turn it green');
})
})


Some을 반복하려면 책의 예제와 같이 DOM 객체가 처리됩니다. DIV 아래의 각 A 태그에 고유한 ID

를 부여하려면 Iterator와 유사한 jQuery의 .each() 메서드를 사용할 수 있습니다. PHP의 foreach

코드 복사 코드는 다음과 같습니다:

$(document) . Ready(function() {

$('div.chapter a').each(function(index) {
$(this).attr({
'id': 'wikilink-' index ,
});
});


이 인덱스 매개변수는 첫 번째 링크의 경우 값이 0이고 각 링크의 경우 그 값은 후속 링크마다 1씩 증가합니다. 등.
글쎄요, 이 예시들은 나중에, 시연 주소도 같이 드릴게요. 그런데 아쉽게도 제 외국공간의 주소는 차단이 되어있습니다. 음.

$() 팩토리 함수에 대한 심층적인 이해:
사실 우리는 이 노트를 처음 작성할 때부터 이 팩토리 함수를 사용해 왔습니다.
어떤 의미에서 이 함수는 jQuery 라이브러리의 핵심입니다. 효과, 이벤트를 추가하거나
일치하는 요소 집합에 속성을 추가할 때 없어서는 안 될 기능이기 때문입니다.
그러나 요소 선택 외에도 $() 함수의 괄호 안에는 또 다른 미스터리가 있습니다. 이 강력한 기능을 사용하면 $() 함수가 페이지의 시각적 모양을 변경할 수 있을 뿐만 아니라
페이지의 실제 내용을 변경합니다. 이 괄호 쌍 안에 일련의 HTML 요소를 넣으면 전체 DOM 구조를 쉽게 변경할 수 있습니다.
예를 들어, 제가 FAQ를 작성했기 때문에 책에 나온 예는 매우 적절합니다. . .
FAQ는 항상 질의응답형(자기질문형, 자가답형형)입니다. 글쎄, 일부 답변이 너무 길기 때문에 그 뒤에 Back to top
을 추가해야 하며, 다음과 같이 작성하면 됩니다.

코드 복사코드는 다음과 같습니다.

$(document).ready(function){
$('맨 위로 돌아가기')
$('< ;a id="top">');
});

이렇게 하면 각 단락 뒤에 "맨 위로"라는 하이퍼링크가 추가됩니다. 또한 "상단" 앵커를 추가합니다.
뭐? 못 봤다고 했죠? 어, 알았어. . 저는 이 새 요소를 아직 DOM에 삽입하지 않았으며 방금 생성했음을 인정합니다.
새 요소 삽입:
jQuery는 다른 요소 앞에 요소를 삽입하는 두 가지 메서드인 .insertBefore() 및 .before()를 제공합니다.
이 두 가지 방법은 동일한 효과를 가지며, 다른 방법과 어떻게 연결되는지에 따라 차이점이 달라집니다.
그러면 당연히 똑똑하다면 다른 요소 뒤에 삽입하는 메소드가 .insertAfter()와 .after()라고 생각할 것입니다.
"맨 위로 돌아가기"의 경우 방금 .insertAfter() 메서드를 사용했는데, 그 이유는 각 답변 뒤에 이 링크를 추가해야 하기 때문입니다. . 음.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function) {
$('맨 위로').insertAfter('div.chapter p')
$('');
});

.insertAfter()와 동일한 작업은 .after() 메서드를 통해서도 수행할 수 있습니다. 선택기 표현식은 이 메서드 뒤가 아닌 앞에 배치해야 합니다.
.after() 메서드를 사용하는 경우 $(document).ready()의 첫 번째 코드 줄은 다음과 같이 다시 작성할 수 있습니다.
$('div.chapter p').after('< ; a href="#top">맨 위로')
.insertAfter()를 사용하면 더 많은 메소드를 연결하여 생성된 요소에 대해 지속적으로 작업할 수 있습니다.
.after()를 사용하면 다른 연결 방법의 작업 개체가 $('div.chapter p')의 선택기와 일치하는 요소가 됩니다.
그럼 요소에 새로운 요소를 삽입하려면 어떻게 해야 할까요? 방금 말씀드린 것은 형제로 만드는 요소들입니다. 하위 요소를 삽입하는 방법은 무엇입니까?
걱정하지 마세요. .prependTo() 메서드가 있습니다.

코드 복사 코드는 다음과 같습니다.

$('').prependTo('body');

.prependTo() 메소드는 스트로크를 대상으로 삽입하고 그룹을 추가합니다. 완전한 기능을 갖춘 맨 위로 링크.
마찬가지로 jQuery는 .prepend()라는 메서드도 제공합니다. API에 따르면 해당 기능은 다음과 같습니다.
일치하는 각 요소에 콘텐츠를 추가합니다.
이 작업은 지정된 요소에 대해appendChild 메서드를 실행하여 문서에 추가하는 것과 유사합니다.
예:

코드 복사 코드는 다음과 같습니다.

안녕하세요

-->$("p").append("안녕하세요 ");


래퍼 요소:
다른 요소의 요소를 래핑하는 jQuery의 메서드 이름은 .wrap()으로 적절합니다.

태그를

Test Paragraph.

div,

단락 테스트

>이렇게 작성하시면 됩니다
$("p").wrap(document.getElementById('content'))
요소 복사:
드디어 하이라이트가 나왔습니다. . 음. 요소를 복사합니다. .
클로닝은 올해 초부터 시행됐는데 최근에는 외치는 경우가 거의 없는 것 같습니다. 가장 대중적인 것은 인간 복제의 필요성이다. 그것에 대해 생각하는 것이 이상합니다. 복제 후 아내를 훔치면 어떻게 해야 하나요?
으윽. 험담은 그만하세요. . jQuery의 복제 방법은 .clone()입니다. 음. 삽입 방법과 관련하여 복사 및 붙여넣기와 동일합니다.
기본적으로 .clone() 메서드는 일치하는 요소뿐만 아니라 모든 하위 요소도 복사합니다.
책에서는 이 메서드가 매개변수도 허용한다고 나와 있습니다. 매개변수 값이 false이면 하위 요소가 아닌 일치하는 요소만 복사됩니다.
하지만 실험을 해본 결과 그렇지 않았습니다. . 음.




코드 복사

코드는 다음과 같습니다.

저는 콘텐츠가 있는 DIV입니다

$('#but_clone').click(function(){
$('#xxx').clone(false).insertAfter($('#xxx')) ;
});

clone(false)은 하위 태그의 내용을 복사하지 않는다고 되어 있는데, 제가 실험해 본 결과 하위 태그의 내용은 그대로 복사됩니다. . 이것은 한 가지 차이점입니다.
게다가 책에서는 clone()이 요소의 이벤트를 복사하지 않는다고 나와 있습니다. 제가 테스트한 후에도 가능합니다. . 음. . 아직도 이상해요. . 잘.

jQuery 객체를 여러 번 참조해야 하는 경우 가장 좋은 방법은 변수에 저장하는 것입니다.
이런 방식으로 jQuery의 $() 팩토리 함수 호출을 줄여 DOM 순회 속도를 향상시킬 수 있습니다. .
자, 이 장은 간단히 녹음한 것입니다. 책에 나온 예시만으로는 모든 분들께 설명드릴 수 없어서 조금 아쉽네요. 그것은 이 책을 복사하는 것입니다.
간헐적으로 밥을 먹어야 해서요. 그래서 이 부분을 작성하는데 시간이 많이 걸렸지만 전체적인 효과는 상당히 만족스럽습니다. 헤헤.
이제 책에서 이 단락을 복사해 보세요. 음. 다음은
DOM 작업 메서드에 대한 간단한 요약입니다.
일치하는 각 요소에 새 요소를 삽입하려면 다음을 사용하세요.
.append()
.appendTo()
.prepend()
.prependTo()
일치하는 각 요소와 동일한 위치에 새 요소를 삽입하려면 다음을 사용하세요.
.after()
.insertAfter()
.before()
.insertBefore()
일치하는 각 요소 외부에 새 요소를 삽입하려면
.wrap()을 사용하세요.
일치하는 각 요소를 새 요소나 텍스트로 바꾸려면
을 사용하세요.
.text()
문서에서 일치하는 각 요소를 제거하려면 다음을 사용합니다.
.empty()
일치하는 각 요소와 해당 하위 요소를 제거하려면 실제로 제거하지 않고 다음을 사용합니다.
.remove()

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jQuery </title>