jQuery 요소 선택기와 속성 선택기를 사용하면 태그 이름, 속성 이름 또는 콘텐츠별로 HTML 요소를 선택할 수 있습니다.
jQuery 요소 선택기: jQuery는 CSS 선택기를 사용하여 HTML 요소를 선택합니다.
$("p")는
요소를 선택합니다.
$("p.intro")는 class="intro"가 있는 모든
요소를 선택합니다.
$("p#demo")는 id="demo"인 첫 번째
요소를 선택합니다.
jQuery 속성 선택기: jQuery는 XPath 표현식을 사용하여 주어진 속성이 있는 요소를 선택합니다.
$("[href]")는 href 속성이 있는 모든 요소를 선택합니다.
$("[href='#']")는 href 값이 "#"과 같은 모든 요소를 선택합니다.
$("[href!='#']")는 href 값이 "#"과 같지 않은 모든 요소를 선택합니다.
$("[href$='.jpg']")는 href 값이 ".jpg"로 끝나는 모든 요소를 선택합니다.
선택기 인스턴스
语法 | 描述 |
---|---|
$(this) | 当前 HTML 元素 |
$("p") | 所有 元素 |
$("p.intro") | 所有 class="intro" 的 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的第一个元素 |
$("ul li:first") | 每个
|
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 元素中的所有 class="head" 的元素 |
이전 장과 동일한 세 가지 방법을 사용하여 콘텐츠를 설정합니다.
위의 네 가지 jQuery 메서드인 text(), html(), val() 및 attr()에도 콜백 함수가 있습니다. 콜백 함수는 선택한 요소 목록에 있는 현재 요소의 인덱스와 원래(이전) 값이라는 두 가지 매개변수를 사용합니다. 그런 다음 함수의 새 값으로 사용하려는 문자열을 반환합니다.
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world ! (index: " + i + ")"; //return newText; }); });