DOM node_jquery를 찾는 JQuery 메서드

이 문서의 예에서는 JQuery가 DOM 노드를 찾는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

JQuery의 가장 일반적인 사용법은 DOM 작업입니다. JQuery의 DOM 작업을 하나씩 분석해 보겠습니다. 가장 간단한 노드 검색 작업부터 시작해 보겠습니다.

DOM 동작을 종합적으로 설명하기 위해서는 먼저 웹페이지를 구축해야 합니다. 모든 웹페이지는 DOM으로 표현될 수 있고, 모든 DOM은 DOM 트리로 간주될 수 있기 때문입니다. HTML 코드는 다음과 같습니다.

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

그나저나 클래스명의 nm은 nowamagic의 약자입니다~

JQuery를 사용하면 문서 트리에서 노드를 찾는 것이 매우 쉽고 JQuery 선택기를 통해 수행할 수 있습니다.

요소 노드 찾기

요소 노드를 가져와 해당 텍스트 내용을 인쇄합니다. JQuery 코드는 다음과 같습니다.

var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
var li_txt = $li.text(); // 输出第二个<li>元素节点的text

위 코드는

요소에서 두 번째
• 노드를 획득하고 "이해하기 쉬운 JavaScript 매직"을 사용하여 해당 텍스트 콘텐츠를 인쇄합니다.

  속성 노드 찾기

  JQuery 선택기를 사용하여 필요한 요소를 찾은 후 attr() 메서드를 사용하여 다양한 속성의 값을 얻을 수 있습니다. attr() 메소드의 매개변수는 1개 또는 2개일 수 있습니다. 매개변수가 1이면 쿼리할 속성의 이름입니다. 예:

  속성 노드를 가져와 해당 텍스트 내용을 인쇄합니다. JQuery 코드는 다음과 같습니다.

  var $para = $(".nm_p"); // 获取<p>节点
  var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
  
  

  위 코드는 nm_p 클래스가 있는

  노드를 획득하고 "Welcome to the Concise Modern Magic Library"라는 제목 속성의 값을 인쇄합니다.

  이 예제의 전체 JQuery 코드는 다음과 같습니다.

  <script type="text/javascript">
  //<![CDATA[
  $(function(){
    var $para = $(".nm_p"); // 获取<p>节点
    var $li = $(".nm_ul li:eq(1)"); // 获取第二个<li>元素节点
    var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
    var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title
    var li_txt = $li.text(); // 输出第二个<li>元素节点的text
    $("#btn_1").click(function(){
      alert(ul_txt);
    });
    $("#btn_2").click(function(){
      alert(li_txt);
    });
    $("#btn_3").click(function(){
      alert(p_txt);
    });
  });
  //]]>
  </script>
  
  

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