JQuery selector_jquery 사용 소개

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" 的元素

콘텐츠 가져오기/설정 - text(), html() 및 val()

이전 장과 동일한 세 가지 방법을 사용하여 콘텐츠를 설정합니다.

• text() - 선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
• html() - 선택한 요소(HTML 마크업 포함)의 콘텐츠를 설정하거나 반환합니다.
• val() - 양식 필드의 값을 설정하거나 반환합니다.
• attr() - 선택한 요소의 속성 값을 설정하고 반환합니다.

위의 네 가지 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;
 });
});