JQuery 상용 선택 기 기능 및 용법 실례 분석
JQuery 기초 회고
오늘 JQuery 의 내용 을 돌 이 켜 보고 다음 과 같은 정 리 를 하 겠 습 니 다.
JQuery 는 javascript 의 라 이브 러 리 이기 때문에 두 사람 은 서로 변환 할 수 있 습 니 다.예 를 들 어 JQuery 에서 Javascript 까지$()로 요 소 를 가 져 와 JS 에 전달 하 는 var 변 수 를 가 져 올 수 있 습 니 다.반면 JS 의 getElement 방법 으로 var 변 수 를 가 져 오 면$(var)를 통 해 JQuery 대상 으로 전환 할 수 있 습 니 다.
JQuery 의 선택 기,
id 는$("\#id")를 선택 하고,class 는$("class")를 선택 하 며,요 소 는$("elemrnt")를 선택 하고,모든$("*")를 선택 합 니 다.등급 선택 기 는 다음 과 같 습 니 다:하위 선택 기$("parent>child")는 직접 하위 대 를 선택 하고,후대 선택 기$("ancensterdescendant")는 모든 후대 요 소 를 선택 합 니 다.인접 한 형제 선택 기$("prev+next")는 prev 를 선택 한 후 첫 번 째 next 노드 를 선택 합 니 다.일반 형 제 는$("prev~siblings")를 선택 한 후 모든 siblings 요 소 를 선택 합 니 다.Jquery 상용 속성 선택 기 는 다음 과 같 습 니 다.
$(“:first”)
첫 번 째 요소 선택
$(“:last”)
마지막 요소 선택
$(“:eq(n-1)”)
n 번 째 요소 선택
$(“:gt(n-1)”)
n 개 이후 의 모든 것 선택
$(“:lt(n-1)”)
이전
$(“:even”)
짝수 요소 선택
$(“:odd”)
홀수 요소 선택
$(“:not(selector)”)
selector 선택 을 제외 한 모든 것 선택
$(“:animated”)
애니메이션 을 실행 할 요소 선택
$(“: header”)
h1,h2 와 같은 제목 요 소 를 선택 하 십시오.
$(“:visible”)
보 이 는 요소 선택
$(“:hidden”)
숨겨 진 요소 선택
하위 요소 선택 기
$(“:first-child”)
첫 번 째 요소 선택
$(“:last-child”)
마지막 요소 선택
$(“:only-child”)
형제 가 없 는 요 소 를 선택 하 십시오.
$(“:nth-child(n)”)
n 번 째 요소 선택
$(“:nth-last-child(n)”)
마지막 n 번 째 요 소 를 선택 하 십시오.
First 와 first-child 의 차이 점:
<ul>
<li> 1 ul 1 li</li>
<li> 1 ul 2 li</li>
<li> 1 ul 3 li</li>
</ul>
<ul>
<li> 2 ul 1 li</li>
<li> 2 ul 2 li</li>
<li> 2 ul 3 li</li>
</ul>
$('ul li:first')'첫 번 째 얼 의 첫 번 째 li'로 돌아간다.모든 l 다음 li 요 소 를 찾 습 니 다.$("ul li:first-child")'첫 번 째 얼 의 첫 번 째 li'와'두 번 째 얼 의 첫 번 째 li'를 되 돌려 줍 니 다.모든 l 의 다음 요 소 를 찾 습 니 다.li 요소 dom 요소 입 니 다.상용 내용 선택 기 는 다음 과 같 습 니 다.
$(“:contains(‘text')”)
텍스트 텍스트 를 포함 하 는 요소 선택
$(“:parent”)
내용(노드 나 텍스트)을 포함 하 는 요 소 를 선택 하 십시오.
$(“empty”)
내용 이 없 는 요 소 를 선택 하 십시오
$(“:has(selector)”)
selector 선택 기 를 포함 하 는 요 소 를 선택 하 십시오.
속성 내용 선택 기:
$(“[attribute]”)
지정 한 속성 을 포함 하 는 요 소 를 선택 하 십시오
$(“[attribute='value']”)
선택 한 속성 은 지정 한 값 의 요소 와 같 습 니 다.
$(“[attribute!='value']”)
선택 한 속성 은 지정 한 값 의 요소 와 같 지 않 습 니 다.
$(“[attribute^='value']”)
지정 한 값 으로 시작 하 는 요 소 를 선택 하 십시오.
$(“[attribute$='value']”)
지정 한 값 으로 끝 나 는 요 소 를 선택 하 십시오.
$(“[attribute*='value']”)
지정 한 값 을 포함 하 는 요 소 를 선택 하 십시오.
$(“[attribute|='value']”)
지정 한 값 을 접두사+'-'요소 로 속성 선택
$(“[attribute~='value']”)
속성 을 접두사+스페이스 바 로 지정 한 요소 선택
$(“[attribute1] [attributeN]”)
여러 속성 값 괄호 를 병렬 로 선택 할 수 있 습 니 다.
예 를 들 면:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title> </title>
<link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
<div class="left" testattr="true" >
<div class="div" testattr="true" name='p1'>
<a>[att=val]</a>
</div>
<div class="div" testattr="true" p2>
<a>[att]</a>
</div>
<div class="div" testattr="true" name="t-est">
<a>[att|=val]</a>
</div>
<div class="div" testattr="true" name="a b">
<a>[att~=val]</a>
</div>
</div>
<script type="text/javascript">
// div ， name=p1 div
$('div[name=p1]').css("border", "3px groove red");
// div ， p2 div
$("div[p2]").css("border", "3px groove blue");
// div ， name "-" div
$('div[name|="t"]').css("border", "3px groove #00FF00");
// div ， name " " "a" div
$("div[name~='a']").css("border", "3px groove pink");
</script>
<h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
<div class="left" testattr="true" >
<div class="div" testattr="true" name='start-name'>
<a>[att^=val]</a>
</div>
<div class="div" testattr="true" name='name-end'>
<a>[att$=val]</a>
</div>
<div class="div" testattr="true" name="attr-test-selector">
<a>[att*=val]</a>
</div>
<div class="div" name="a b">
<a>[att!=val]</a>
</div>
</div>
<script type="text/javascript">
// div ， name start
$("div[name^='start']").css("border", "3px groove red");
// div ， name end
$("div[name$='end']").css("border", "3px groove blue");
// div ， name test div
$("div[name*='test']").css("border", "3px groove #00FF00");
// div ， testattr "true" div
$("div[testattr!='true']").css("border", "3px groove #668B8B");
</script>
</body>
</html>
폼 선택 기
$(“input:type”)
type 형식의 폼 요 소 를 선택 하 십시오.
$(“:enabled”)
활성 화 된 폼 요 소 를 선택 하 십시오.
$(“:disabled”)
사용 할 수 없 는 폼 요 소 를 선택 하 십시오.
$(“:checked”)
선택 한 폼 요소 선택
$(“:selected”)
선택 한 option 요소 선택
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JQuery 기반 FormData 비동기식 데이터 파일 제출(이 주소가 현재 페이지일지라도) html의 대역폭을 낭비하는 것을 반복적으로 불러올 수 있습니다. aax는 폼에 의존하지 않고 http 요청을 한 번 하고 서버 응답의 데이터를 되찾을 수 있다. 직접 다운로드할 수...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
