jQuery에서 요소 선택기를 사용하는 방법

이번에는 jQuery에서 요소 선택기를 사용하는 방법과 jQuery에서 요소 선택기를 사용할 때 주의 사항이 무엇인지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

1. 소개

요소 선택기는 요소 이름을 기준으로 해당 요소를 일치시킵니다.

일반적인 용어로 요소 선택기는 DOM 요소의 태그 이름을 가리킵니다. 이는 요소 선택기가 요소의 태그 이름을 기반으로 선택한다는 의미입니다.

요소의 태그 이름은 학생의 이름으로 이해될 수 있습니다. 학교에는 "Liu Wei"라는 이름의 학생이 여러 명 있을 수 있지만 "Wu Yu"라는 학생은 한 명만 있을 수 있으므로 요소 선택자는 다음과 같습니다. 일치하는 데 사용되는 요소는 여러 개일 수도 있고 하나만 있을 수도 있습니다.

대부분의 경우 요소 선택기는 요소 그룹과 일치합니다.

요소 선택기를 사용하는 방법은 다음과 같습니다.

$("element");

여기서 element는 쿼리할 요소의 태그 이름입니다.

예를 들어 모든 p 요소를 쿼리하려면 다음 jQuery 코드를 사용할 수 있습니다.

$("p");

2. 애플리케이션

페이지에 두 개의

태그와 버튼을 추가하고 클릭하여 가져옵니다. 이 두 개의

버튼을 클릭하고 내용을 수정하세요.

3. 코드

<script></script>
<p>这里种植了一棵草莓</p>
<p>这里养殖了一条鱼</p>
<input>
<script>
$(document).ready(
function()
{
 $("input[type=&#39;button&#39;]").click(
  function()
  {                //为按钮绑定单击事件
   $("p").eq(0).html("这里长出了一片草莓"); //获取第一个p元素
   $("p").get(1).innerHTML="这里的鱼没有了"; //获取第二个p元素
  });
});
</script>

4. 실행 효과 (여기에서 온라인으로 테스트를 실행하려면 http://tools.jb51.net/code/HtmlJsRun 사용):

5. 작업 지침

위 코드에서 요소 선택기는 p 요소의 jQuery 패키징 세트를 가져오는 데 사용됩니다. 이는 Object 개체의 집합이며 [Object Object]에 저장되지만 이 메서드는 그렇지 않습니다. 개별 요소의 텍스트 정보를 보려면 선택할 p 요소를 결정하는 인덱서가 필요합니다. 여기서는 두 개의 서로 다른 인덱서인 eq()와 get()가 사용됩니다. eq()和get()。

这里的索引器类似于房间的门牌号，所不同的是，门牌号是从1开始计数的，而索引器是从0开始计数的。

在本实例中使用了两种方法设置元素的文本内容，html()方法是jQuery的方法，innerHTML方法是DOM对象的方法。

这里还用了$(document).ready()方法，当页面元素载入就绪的时候就会自动执行程序，自动为按钮绑定单击事件。

eq()方法返回的是一个jQuery包装集，所以它只能调用jQuery的方法，而get()方法返回的是一个DOM对象，所以它只能用DOM对象的方法。

eq()方法与get()方法默认都是从0开始计数。

$("#test").get(0)等效于$("#test")[0]

여기의 인덱서는 방의 집 번호와 유사하지만 집 번호는 1부터 계산되는 반면 인덱서는 0부터 계산된다는 점이 다릅니다.

이 예제에서는 요소의 텍스트 내용을 설정하는 데 두 가지 메서드가 사용됩니다. html() 메서드는 jQuery 메서드이고 innerHTML 메서드는 DOM 개체 메서드입니다.

여기에서는 $(document).ready() 메서드도 사용됩니다. 페이지 요소가 로드되면 프로그램이 자동으로 실행되고 클릭 이벤트가 자동으로 버튼에 바인딩됩니다.

eq() 메서드는 jQuery 래퍼 세트를 반환하므로 jQuery 메서드만 호출할 수 있는 반면, get() 메서드는 DOM 개체를 반환하므로 jQuery 메서드만 호출할 수 있습니다. DOM 객체의 메소드를 사용하세요.
eq() 메서드와 get() 메서드는 모두 기본적으로 0부터 계산을 시작합니다.

$("#test").get(0)은 $("#test")[0]와 동일합니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료: 🎜🎜🎜JS의 일반적인 내장 함수 사용에 대한 자세한 설명🎜🎜🎜🎜🎜데이터 전송을 위해 vue 구성 요소를 사용하는 방법🎜🎜🎜

위 내용은 jQuery에서 요소 선택기를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!