> 웹 프론트엔드 > JS 튜토리얼 > jQuery의 공통 선택기에 대한 자세한 설명

jQuery의 공통 선택기에 대한 자세한 설명

小云云
풀어 주다: 2018-01-01 10:25:23
원래의
1258명이 탐색했습니다.

이 글은 주로 jQuery에서 사용하는 선택기 관련 정보를 자세히 소개하고 있습니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

이 글은 참고용으로 jQuery에서 일반적으로 사용되는 선택기의 구체적인 코드를 공유합니다. 구체적인 내용은 다음과 같습니다

1. jQuery: (jQuery를 사용할 때 사용하는 버전 번호를 명시해야 합니다.)

입니다. JS로 캡슐화된 일반적으로 사용되는 메소드의 네이티브 A 클래스 라이브러리(브라우저 호환성 문제 해결)

2. jQuery

selector

에서 제공되는 메소드는 해당 규칙의 내용(ID, 태그 이름, 스타일 클래스 이름)을 전달합니다. ...), 페이지에 지정된 요소/요소 컬렉션을 가져옵니다.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <p id=&#39;p1&#39;>
    <p>
      <span></span>
      <span></span>
      <span></span>
    </p>
    <p></p>
    <p id=&#39;p3&#39;></p>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

  </p>
  

  <script>
    //原生JS获取到的结果属于元素对象/元素集合/节点集合...他们可以使用浏览器为其提供的那些天生自带的属性和方法
    //原生的JS对象不能直接的使用jQuery中提供的属性和方法
    var op = document.getElementById(&#39;p1&#39;)
    op.clientWidth
    op.getAttribute
    //jq获取到的结果是一个jQuery对象,可以使用jQuery里面提供的属性和方法,但是不能直接的使用浏览器内置的属性和方法
    var $op = jQuery("#p1")//$("#p1")
    $op.innerWidth();
    $op.attr

    //关于原生JS对象和jQuery对象之间的转换
      //1)、原生的转变成jQuery:$(原生JS对象)
      $(op)
      //2)、jQuery转化成原生:直接通过索引获取对应的元素对象即可
      $op[0]
      $op.get(0)//<==>$op[0]都是通过索引来获取指定位置的元素(JS原生对象)

    //更多的jQuery选择器
    $(&#39;#p1&#39;)
    $(&#39;p&#39;)
    $(&#39;.w100&#39;)
    $(&#39;*&#39;)
    $(&#39;#p1,p,.w100&#39;)//把每一个选择器获取到的jQuery对象最后融合在一起,最后一起获取到
    $(&#39;#p1 li&#39;)//在子子孙孙级中进行查找
    $(&#39;#p1>li&#39;)//在子级中进行查找
    $(&#39;#p3+&#39;)//获取它的下一个弟弟
    $(&#39;#p3+ul&#39;)//获取它的下一个弟弟并且标签名是ul的
    $(&#39;#p3~&#39;)//获取它的所有的弟弟元素
    $(&#39;#p3~ul&#39;)//获取它的所有的弟弟元素并且标签名为ul的
    $(&#39;#p1>p:not(.w100)&#39;)//#p1下的所有子集p样式类名不包含w100的
    $(&#39;#p1>p:eq(0)&#39;)//通过索引获取到集合中的某一个,但是获取到的结果依然是一个jQuery对象(而get方法也是通过索引获取,但是获取到的是一个JS原生对象)
    $(&#39;#p1>p:gt(1)&#39;)//大于索引1的(不包含索引1的)
    $(&#39;#p1>p:lt(1)&#39;)//小于索引1的(不包含索引1的)
    $(&#39;#p1 li:contains("我")&#39;)//获取所有的li内容包含“我” 的
    $(&#39;#p1 p:has(ul)&#39;)//在所有的p中包含ul的
    $(&#39;#p1>*:nth-child(1)&#39;)//获取所有的子元素的第一个
    $(&#39;#p1>*:eq(1)&#39;)//获取所有的子元素的第二个(索引为1)
  </script>
</body>
</html>
로그인 후 복사

관련 권장 사항:

jQuery 선택기에서 특수 기호를 처리하는 방법에 대한 자세한 설명

jQuery UI Datepicker에 대한 자세한 설명 Datepicker

jQuery 양식 객체 속성 필터 선택기에 대한 자세한 설명 예

위 내용은 jQuery의 공통 선택기에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿