jQuery_jquery에서 사용하는 태그 요소 속성의 사용 예

이 기사의 예에서는 jQuery에서 사용하는 태그 요소 속성의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

여기서 소개하는 jQuery의 사용에는 주로 요소 속성, CSS 스타일, DOM 모델, 양식 요소 및 이벤트 처리 등을 포함하여 jQuery가 페이지를 제어하는 ​​방법이 포함됩니다.

태그 요소의 속성

HTML의 모든 태그에는 몇 가지 속성이 있으며 해당 태그는 다음 <a> 태그와 같이 페이지의 다양한 상태를 나타냅니다.

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

<a herf="http://www.baidu.com " title= "isaac" target="_blank" id="linkisaac">

<a> 태그는 하이퍼링크인 태그의 이름을 나타냅니다. 또한 href 제목 대상 ID와 같은 속성은 페이지에서 이 하이퍼링크의 다양한 상태를 나타냅니다.

이 글에서는 jQuery 관점에서 페이지 속성 제어 방법을 자세히 설명합니다.

1.each()는 요소를 순회합니다

each(콜백) 메소드는 주로 선택기의 요소를 순회하는 데 사용됩니다. 이 함수는 요소의 일련 번호를 참조하는 매개변수를 허용합니다. 표시된 속성의 경우 this 키워드와 함께 Each() 메서드를 사용하여 선택기의 각 요소에 해당하는 속성 값을 가져오거나 설정할 수 있습니다.

모든 요소를 ​​순회하려면 Each() 메서드를 사용하세요.

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

<script type="text/javascript">

$(함수() {
$("p").each(함수(색인){
This.title = "This is the" (색인 1) "P, ID는 다음과 같습니다." this.id;
});
});

<div>
<p id="001">첫 번째 문단</p>
<p id="002">두 번째 문단</p>
<p id="003">두 번째 문단</p>
<p id="004">두 번째 문단</p>
<p id="005">두 번째 문단</p>
<p id="006">두 번째 문단</p>
<p id="007">두 번째 문단</p>

위 코드에는 7개의 P 요소가 있습니다. 먼저 $("p")를 사용하여 페이지의 모든 p 요소 집합을 얻은 다음 Each() 메서드를 사용하여 모든 그림을 탐색합니다. this 키워드를 통해 이미지에 액세스하고, 이미지의 ID를 얻고, 이미지의 ID 속성을 설정합니다. Each() 메소드의 함수 인덱스는 해당 요소의 일련번호입니다.

2. 속성 값을 가져옵니다. attr(이름) 메소드

전체 선택기의 요소를 반복하는 경우는 제외됩니다. 객체의 특성 값을 가져와야 하는 경우가 많습니다. 이는 jQuery의 attr(name) 메서드를 통해 쉽게 얻을 수 있습니다. 이 메소드는 요소 세트의 첫 번째 속성 값을 가져옵니다. 일치하는 항목이 없으면 정의되지 않은 상태로 반환됩니다.

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

script type="text/javascript">

$(함수() {
var sTitle = $("p").attr("title");//첫 번째 p 요소의 title 속성 값 가져오기
$("#display").text(sTitle);
});

<div>
<p id="001" title="isaac,hobby">첫 번째 문단</p>
<p id="002" title="isaac,hobby">두 번째 문단</p>
<p id="003">두 번째 문단</p>
<p id="004">두 번째 문단</p>
<p id="005">두 번째 문단</p>
<p id="006">두 번째 문단</p>
<p id="007">두 번째 문단</p>
<span id="display"></span>

두 번째 p의 제목 속성 값을 얻으려면 위치 선택기를 통해 얻을 수 있습니다.

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

$(function() {

var sTitle = $("p:eq(1)").attr("title");//두 번째 p 요소의 제목 속성 값 가져오기
$("#display").text(sTitle);
});

3. 속성 값을 설정합니다. 속성(이름,값)

attr() 메소드는 요소의 값을 얻는 것 외에도 속성의 값을 설정할 수도 있습니다. 일반적인 표현식은
입니다.

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

attr(이름,값)

예: 다음 코드는 페이지의 모든 하이퍼링크가 새 창에서 열리도록 합니다.

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

<script type="text/javascript">
$(함수() {
$("a[href*=http]").attr("target","_blank");
});

예:

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

<script type="text/javascript">
함수 비활성화Back() {
$("button:gt(0)").attr("비활성화됨", "비활성화됨");
}

<div>
<button onclick="DisableBack()">첫 번째 버튼</button> <버튼>두 번째 버튼</버튼> <버튼>세 번째 버튼</button>

위치 선택기로 첫 번째 버튼을 클릭하면 다음 두 버튼이 동시에 비활성화됩니다.

속성 값이 다양한 요소에 따라 정기적으로 변경되기를 바라는 경우가 많습니다. 이때 attr(name,fn)을 사용할 수 있으며, 두 번째 매개변수는 함수입니다. 이 함수는 요소의 일련 번호인 하나의 매개 변수를 허용하며 반환 값은 문자열입니다.

코드 복사 코드는 다음과 같습니다.<script type="text/javascript"> $(함수() {

$("div").attr("id", function(index) {

//일련번호와 관련된 파라미터로 id를 설정합니다
"div-id" 인덱스를 반환합니다.
}).each(함수() {
//각 항목의 스팬 태그 찾기
$(this).find("span").html("(id='" this.id "')");
});
});

항목 0
</div>

항목 1
</div>

항목 2

반품 내용:

코드 복사 코드는 다음과 같습니다.항목 0(id='div-id0') 항목 1 (id='div-id1')

항목 2 (id='div-id2')

위 코드는 attr(name,fn)을 통해 페이지 내 모든 <div> 블록의 id 속성 값을 일련번호 관련 매개변수로 설정합니다. 그리고 각각() 메소드를 통해 div 블록을 탐색하여 해당 <span> 태그에 id 값을 표시합니다. 이는 jQuery 체인의 힘을 보여줍니다.

때때로 일부 요소에 대해 서로 다른 속성을 동시에 설정하고 싶을 때가 있습니다. 위 방법을 사용하는 경우 속성을 하나씩 설정해야 합니다. jQuery는 매우 사용자 친화적이며 attr()은 목록 설정 attr(properties) 메소드도 제공합니다. 여러 속성을 설정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.<script type="text/javascript"> $(함수() {

$("img").attr({

src: "06.jpg",
제목: "이름 1",
​​ alt: "이름 2"
});
});

<img>
<img>
<img>
<img>
<img>


실행 결과:

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

<img src="06.jpg" title="이름 1" alt="이름 2">
<img src="06.jpg" title="이름 1" alt="이름 2">
<img src="06.jpg" title="이름 1" alt="이름 2">
<img src="06.jpg" title="이름 1" alt="이름 2">
<img src="06.jpg" title="이름 1" alt="이름 2">

4. 속성 삭제

요소 속성 값을 설정할 때, RemoveAttr(name) 메소드를 통해 속성 값을 삭제할 수 있습니다. 그러면 요소가 기본 설정으로 복원됩니다. 예를 들어 다음 코드는 모든 버튼을 비활성화합니다.

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

$(function() {
$("버튼").removeAttr("비활성화됨")
});

RemoveAttr(name) 속성을 삭제하는 것은 html 태그에서 속성을 삭제하지 않는 것과 같습니다. 이는 마크의 이러한 특징이 제거되었음을 의미하지 않습니다. 위 코드가 실행된 후에도 모든 버튼은 여전히 ​​비활성화되도록 설정할 수 있습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.