jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명

黄舟

풀어 주다： 2017-06-23 13:56:09

원래의

1671명이 탐색했습니다.

개요

복합 속성 선택기, 여러 조건을 동시에 충족해야 할 때 사용됩니다.

Parameters

selector1Selector

로그인 후 복사

속성 선택기

selector2Selector

로그인 후 복사

범위를 더욱 좁힐 수 있는 또 다른 속성 선택기

selectorNSelector

로그인 후 복사

속성 선택기의 개수에 관계없이

예

설명:

id를 포함하는 모든 속성을 찾고 해당 이름 속성은 다음으로 끝납니다. man

HTML 코드:

<input id="man-news" name="man-news" /> <input name="milkman" /> 
<input id="letterman" name="new-letterman" /> <input name="newmilk" />

로그인 후 복사

j쿼리 코드:

$("input[id][name$=&#39;man&#39;]")

로그인 후 복사

결과:

[ <input id="letterman" name="new-letterman" /> ]

로그인 후 복사

각 선택기와 일치하는 요소를 결합하여 함께 반환합니다.

jQuery( "selector1, selector2, selectorN" )

selector1: 유효한 모든 선택

selector2: 기타 유효한 선택

selectorN: 원하는 대로 더 많은 유효한 선택.

단일 결과로 결합할 선택기를 원하는 만큼 지정할 수 있습니다. 이 다중 표현식 조합은 다양한 요소를 선택하는 효율적인 방법입니다. 파일에 있는 순서대로 표시되므로 반환된 jQuery 객체의 DOM 요소 순서는 동일하지 않을 수 있습니다. 또 다른 선택기 조합은 .add() 메서드입니다.

예:

예: 아래 세 가지 선택기와 일치하는 요소를 찾으세요.

<!DOCTYPE html>
<html>
<head>
  <style>
 
  div,span,p {
    width: 126px;
    height: 60px;
    float:left;
    padding: 3px;
    margin: 2px;
    background-color: #EEEEEE;
    font-size:14px;
  }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <div>div</div>
 
  <p class="myClass">p class="myClass"</p>
  <p class="notMyClass">p class="notMyClass"</p>
  <span>span</span>
<script>$("div,span,p.myClass").css("border","3px solid red");</script>
 
</body>
</html>

로그인 후 복사

결과:

jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명

예: jQuery 개체에 순서를 표시합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  b { color:red; font-size:16px; display:block; clear:left; }
  div,span,p { width: 40px; height: 40px; float:left;
               margin: 10px; background-color: blue;
               padding:3px; color:white;
             }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
  <span>span</span>
 
  <p>p</p>
  <p>p</p>
  <div>div</div>
  <span>span</span>
 
  <p>p</p>
  <div>div</div>
  <b></b>
<script>
    var list = $("div,p,span").map(function () {
      return this.tagName;
    }).get().join(", ");
    $("b").append(document.createTextNode(list));
</script>
 
</body>
</html>

로그인 후 복사

결과:

jQuery [selector1][selector2][selectorN] 선택기 사용에 대한 자세한 설명