jQuery 4 선택기 사용법 및 예
- 巴扎黑원래의
- 2017-06-20 16:31:311091검색
이 글은 jQuery의 4가지 선택자 사용 방법과 예제를 요약한 것입니다. 매우 간단하고 실용적이어서 jQuery를 배우는 모든 사람에게 도움이 되기를 바랍니다.
jQuery 요소 선택기
jQuery는 CSS 선택기를 사용하여 HTML 요소를 선택합니다.
$("p")는 e388a4556c0f65e1904146cc1a846bee 요소를 선택합니다.
$("p.intro")는 class="intro"가 있는 모든 e388a4556c0f65e1904146cc1a846bee 요소를 선택합니다.
$("p#demo")는 id="demo"인 모든 e388a4556c0f65e1904146cc1a846bee 요소를 선택합니다.
샘플 코드:
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") | 모든 e388a4556c0f65e1904146cc1a846bee 요소 |
| .class.class | $(".intro.demo") | class="intro" 및 class="demo"가 포함된 모든 요소 |
| :first | $("p:first") | 첫 번째e388a4556c0f65e1904146cc1a846bee 요소 |
| :last | $("p:last") | 마지막e388a4556c0f65e1904146cc1a846bee 요소 |
| :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") | 모든 헤더 요소 4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc |
| :animated | 모든 애니메이션 요소 | |
| :contains(text) | $(":contains('W3School')") | 지정된 문자열의 모든 요소를 포함합니다 |
| :비어 있음 | $( ":empty") | 하위(요소) 노드가 없는 모든 요소 |
| :hidden | $("p:hidden") | 모든 숨겨진 e388a4556c0f65e1904146cc1a846bee 요소 |
| :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") | 모든 d5fd7aea971a85678ba271703566ebfd 요소 |
| :text | $(":text") | 모든 유형=" text"의 d5fd7aea971a85678ba271703566ebfd 요소 |
| :password | $(":password") | 모든 type="password"의 d5fd7aea971a85678ba271703566ebfd 요소 |
| :radio | $(":radio") | type="radio"의 모든 d5fd7aea971a85678ba271703566ebfd 요소 |
| :checkbox | $(":checkbox") | 모든 유형="checkbox" d5fd7aea971a85678ba271703566ebfd 요소 |
| :submit | $(":submit") | type="submit"의 모든 d5fd7aea971a85678ba271703566ebfd 요소 |
| :reset | $(":reset" ) | type="reset"의 모든 d5fd7aea971a85678ba271703566ebfd 요소 |
| :button | $(":button") | type="button"의 모든 d5fd7aea971a85678ba271703566ebfd 요소 |
| :image | $(":image") | 모든 유형="image" d5fd7aea971a85678ba271703566ebfd 요소 |
| :file | $(":file") | type="file"의 모든 d5fd7aea971a85678ba271703566ebfd 요소 |
| :enabled | $(":enabled") | 활성화된 모든 입력 요소 |
| :disabled | $(":disabled") | 비활성화된 모든 입력 요소 |
| :selected | $( ":selected") | 선택한 모든 입력 요소 |
| :checked | $(":checked") | 선택한 모든 입력 요소 |
위 내용은 jQuery 4 선택기 사용법 및 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery 선택기 요소 사용법 소개다음 기사：jQuery 선택기 요소 사용법 소개