jQuery 4 선택기 사용법 및 예-JS 튜토리얼-php.cn

jQuery 4 선택기 사용법 및 예

巴扎黑

풀어 주다： 2017-06-20 16:31:31

원래의

1130명이 탐색했습니다.

이 글은 jQuery의 4가지 선택자 사용 방법과 예제를 요약한 것입니다. 매우 간단하고 실용적이어서 jQuery를 배우는 모든 사람에게 도움이 되기를 바랍니다.

jQuery 요소 선택기

jQuery는 CSS 선택기를 사용하여 HTML 요소를 선택합니다.

$("p")는

요소를 선택합니다.

$("p.intro")는 class="intro"가 있는 모든

요소를 선택합니다.

$("p#demo")는 id="demo"인 모든

요소를 선택합니다.

샘플 코드:

jquery 부분

$(document).ready(function(){//页面加载完成后执行
  tagName();
// idName();
// className();
});


function tagName(){
  $('p').addClass('heighlight');
}

function idName(){
  $('#p').addClass('heighlight2');
}
function className(){
  $('p.pClass').addClass('heighlight2');
}

로그인 후 복사

html 부분

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/select.js" ></script>
    <link rel="stylesheet" href="css/select.css" />
  </head>
  <body>
    <p id="p">
      <p>this is my name!!</p>
      <p class="pClass">class is import!</p>
      <a href="#">you cai!!</a>
    </p>
  </body>
</html>

로그인 후 복사

css 부분

.heighlight {
  background-color: blue;
  
}
.heighlight2 {
  background-color: red;
}

.alt{
  background-color:#ccc;
}

로그인 후 복사

jQuery 속성 선택기

Query는 XPath 표현식을 사용하여 요소를 선택합니다. 주어진 속성.

$("[href]") href 속성이 있는 모든 요소를 선택합니다.

$("[href='#']") href 값이 "#"인 모든 요소를 선택합니다.

$("[href!='#']") href 값이 "#"과 같지 않은 모든 요소를 선택합니다.

$("[href$='.jpg']") href 값이 ".jpg"로 끝나는 모든 요소를 선택합니다.

jquery 부분, 그 외 부분은 위와 동일합니다.

$(document).ready(function(){
  attribute();
});

function attribute(){
  $('[href="#"]').addClass('heighlight'); 
}

로그인 후 복사

jQuery CSS 선택기

.addClass() 또는 .css()

$(document).ready(function(){
 cssName();
});

function cssName(){
  $('p').css("background-color","pink");
}

로그인 후 복사

jQuery 사용자 정의 선택기

$(document).ready(function(){
 custom();
});

function custom(){
  $('tr:odd').addClass('alt');
}

로그인 후 복사

테이블

요소 요소

Selector	Instance	Select
*	$("*")	모든 요소
#id	$("#성")	id= 요소 "성"
.class	$(".intro")	class="intro"
element	$("p")	모든 요소
.class.class	$(".intro.demo")	class="intro" 및 class="demo"가 포함된 모든 요소

:first	$("p:first")	첫 번째 요소
:last	$("p:last")	마지막 요소
:even	$("tr:even")	모든 짝수
:odd	$("tr:odd")	모든 홀수

:eq(index)	$("ul li:eq(3)")	목록의 네 번째 요소(색인은 0부터 시작)
: gt(no)	$("ul li:gt(3)")	색인이 3
:lt(no)	$("ul li:lt ( 3)")	인덱스가 3보다 작은 요소 목록
:not(selector)	$("input:not(:empty)")	비어 있지 않은 모든 입력 요소

:header	$( ":header")	모든 헤더 요소 -
:animated		모든 애니메이션 요소

:contains(text)	$(":contains('W3School')")	지정된 문자열의 모든 요소를 포함합니다
:비어 있음	$( ":empty")	하위(요소) 노드가 없는 모든 요소
:hidden	$("p:hidden")	모든 숨겨진 요소
:visible	$("table:visible")	보이는 모든 테이블

s1,s2,s3	$("th,td,.intro")	선택 항목이 일치하는 모든 요소

[attribute]	$("[href]")	href 속성이 있는 모든 요소
[attribute=value]	$("[href='#' ]" )	href 속성 값이 "#"
[attribute!=value]	$("[href!='#']")	모든 href 속성 요소와 동일한 모든 요소 해당 값이 "#"
[attribute$=value]	$("[href$='.jpg']")	모든 href 속성의 값에는 ". jpg" 요소가 마지막에

:input	$(":input")	모든 요소
:text	$(":text")	모든 유형=" text"의 요소
:password	$(":password")	모든 type="password"의 요소
:radio	$(":radio")	type="radio"의 모든 요소
:checkbox	$(":checkbox")	모든 유형="checkbox" 요소
:submit	$(":submit")	type="submit"의 모든 요소
:reset	$(":reset" )	type="reset"의 모든 요소
:button	$(":button")	type="button"의 모든 요소
:image	$(":image")	모든 유형="image" 요소
:file	$(":file")	type="file"의 모든 요소

:enabled	$(":enabled")	활성화된 모든 입력 요소
:disabled	$(":disabled")	비활성화된 모든 입력 요소
:selected	$( ":selected")	선택한 모든 입력 요소
:checked	$(":checked")	선택한 모든 입력 요소

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