jQuery 학습 3: 요소 속성 및 특성 조작_jquery

먼저 예를 살펴보겠습니다.

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

http://www.jb51.net 이제 a 태그의 속성 ID를 가져와야 합니다. 다음과 같은 방법이 있습니다:

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

jQuery("#easy").click(function() {
Alert(document.getElementById("easy").id) //1
경고(this.id) //2
Alert(jQuery(this).attr("id")) //3
});

방법 1은 원래 JavaScript 방법을 사용하고, 방법 2는 포인터와 동일하며 dom 개체를 반환하는 것을 사용합니다. 그래서 this.id는 ID를 직접 얻을 수 있습니다. 방법 3은 dom 개체를 jQuery 개체로 변환한 다음 jQuery 캡슐화된 메서드 attr()을 사용하여 a 태그의 ID를 가져옵니다.

때때로 jQuery와 함께 자바스크립트를 사용하는 것이 매우 편리하다는 것을 알 수 있습니다. 다음은 jQuery가 요소 속성을 작동하는 방법을 요약하는 데 중점을 둡니다.

◦attr(name) 요소의 속성 값을 가져옵니다
◦ attr(properties) 이름/값 형식으로 요소 속성 설정
◦ attr(key,value) 요소
의 속성 값 설정 ◦removeAttr(name)은 요소

의 속성 값을 제거합니다.

다음 예에서는 각 방법의 구체적인 사용법을 보여줍니다.

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

스크립트 홈
바이두

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

jQuery("#test a").click(function() {
//ID 얻기
jQuery(this).attr("id"); //this.id와 동일

//img 태그의 src를 Baidu의 지정된 이미지 제목으로 설정합니다.
var v = { src: "http://www.baidu.com/img/bdlogo.gif", 제목: "Baidu" };
jQuery("#show").attr(v);

//img의 제목을 Baidu로 설정합니다. 위와 다른 점은 한 번에 하나의 속성만 설정할 수 있다는 것입니다.
jQuery("#show").attr("title", "baidu");

//img의 제목 속성을 제거합니다
jQuery("#show").removeAttr("title");
});

jQuery의 attr() 메소드가 요소의 속성 값을 얻을 수 있을 뿐만 아니라 요소의 속성 값을 설정할 수도 있다는 것을 발견했을 것입니다. 예, jQuery에는 비슷한 방법이 많이 있습니다. 지금 요약하면 나중에 사용하기가 더 쉬울 것입니다.

방법은 다음과 같습니다.

◦html() 요소 노드의 html 콘텐츠를 가져오거나 설정합니다
◦ text() 요소 노드의 텍스트 내용을 가져오거나 설정합니다
◦ height() 요소의 높이를 가져오거나 설정합니다
◦ width() 요소의 너비를 가져오거나 설정합니다.
◦ val() 입력 상자의 값을 가져오거나 설정합니다

html()을 예로 들면 나머지는 비슷합니다.

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

바이두

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

//html을 구하면 결과는 바이두
jQuery("#showhtml").html();
//html을 설정하면 결과는 바이두를 좋아합니다
jQuery("#showhtml").html("나는 바이두를 좋아합니다");

다음은 jQuery가 요소 속성을 조작하는 몇 가지 기본 방법입니다. 이 요약을 마치면 모든 사람이 jQuery를 사용하는 데 더 능숙해질 것이라고 믿습니다.

다음은 다른 네티즌들이 추가한 내용입니다.

jQuery에서 제공하는 메소드는 다음과 같습니다.

요소 속성 조작: 각(반복자)은 패키징 세트의 모든 요소를 ​​순회하고 각 요소에 대해 전달된 반복자 함수를 호출합니다. 매개변수 반복자는 일치하는 집합의 각 요소에 대해 한 번 호출되는 함수입니다. 함수에 전달된 인수는 함수의 this 속성을 통해 액세스할 수 있는 래핑된 집합에 있는 현재 요소의 인덱스(0부터 시작)로 설정됩니다.

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

$('img').each(함수(n){
this.alt='이것은 ID가 'this.id인 이미지[' n ']입니다.
})

속성 값 가져오기: attr(name)은 포장 세트에 있는 첫 번째 요소의 지정된 속성에 할당된 값을 가져옵니다. 매개변수 이름은 속성의 이름이며 속성의 값을 가져옵니다. 해당 속성이 없으면 정의되지 않은 값이 반환됩니다.

$("#myImage").attr("custom") 얻은 값은 일부 값입니다.

속성 값 설정: attr(name,value)는 포장 세트에 있는 모든 요소의 이름 속성에 대해 전달된 값을 설정합니다. name은 설정될 속성의 이름이고 value는 속성의 값을 지정합니다.

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

$('*').attr('제목',함수(색인) {
return '나는 요소' ' index '이고 내 이름은 ' (this.id?this.id:'unset');
});

이 함수는 페이지에 있는 모든 요소의 제목 속성을 문자열로 설정합니다. DOM에 있는 요소의 첨자와 각 특정 요소의 id 속성 값으로 구성된 문자열입니다.

attr()은 래퍼 세트의 모든 요소에 여러 속성을 한 번에 설정하는 빠르고 쉬운 방법이기도 합니다. attr(속성).

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

$('입력').attr(
{value:'',title:'값을 입력하세요'}
);

이 함수는 모든 요소의 값을 빈 문자열로 설정하고, 제목을 문자열로 설정합니다. 값을 입력하세요.