반응형
jQuery Selector
jQuery DOM 탐색
jQuery select
기본
| 종류 | 표현 |
| All | $('*') |
| ID | $('#id') |
| Element (Tag) | $('elementName') |
| class | $('.className') |
| multi | $('tag, tag1, tag2') |
예제
공통적으로 사용할 html, css 소스 입니다.
jsfiddle.net 에서 테스트 합니다. fiddle meta 에서 jquery 와 bootstrap css 를 추가(+) 시킵니다.
HTML
<html>
<head>
</head>
<body>
<div class="col-md-6">
<div class="heading">
<h2 class="title">Login</h2>
<p>If you have an account with us, please log in.</p>
</div><!-- End .heading -->
<form action="#">
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
<input type="password" class="form-control" id="pwd" placeholder="Password" required>
<div class="form-footer">
<button type="submit" class="btn btn-primary">LOGIN</button>
<p><input type="checkbox" /> remember</p>
<a href="#" class="forget-pass"> Forgot your password?</a>
</div><!-- End .form-footer -->
</form>
</div><!-- End .col-md-6 -->
</body>
</html>CSS
body {
background-color:gray;
}위의 HTML 과 CSS 를 실행(▷RUN)하면 아래와 같이 나타납니다.
$('*') : 모든 항목 선택
$('*').css('color', 'red');실행 결과
$('#your_id_here') : 아이디 선택
$('#email').val('hello-bryan');
/*
id="email" 인 element 를 찾아서 value 를 설정합니다.
<input type="email" class="form-control" id="email" placeholder="Email Address" required>
*/실행 결과
$('tag_name_here') : tag로 선택
$('input').hide();
/* <input> element를 모두 찾아서 숨김 */실행 결과
$('input:eq(0)').hide(); // 첫번째 input 숨김 (email input 이 숨겨짐)
$('input:last').hide(); // 마지막 input 숨김 (checkbox input 이 숨겨짐)
$('input[type=password]').hide(); // input type이 password 인게 숨겨짐$('.class_name_here') : class 로 선택
$('.title').text('Hello~~'); // class="title" 을 찾아 text 를 변경함실행 결과
$('.btn-primary').removeClass('btn-primary').addClass('btn-danger');
/*
$('.btn-primary') : class 가 btn-primary 인것을 찾아서
removeClass('btn-primary') : btn-primary class 를 삭제하고
addClass('btn-danger') : btn-danger class 를 추가함
*/
실행 결과
$('selector1, selector2, selector3) : 다중선택
$('.heading h2, .forget-pass').css('color', 'green');
/*
heading class 아래 h2 태그와 forget-pass class 의
font color 를 green 으로 설정
*/실행 결과
$(selector[expression]) : attribute Selector
| $(selector[attr]) | |
| $(selector[attr=val]) | attr 속성값이 val 인것 |
| $(selector[attr!=val]) | attr 속성값이 val이 아닌 것 |
| $(selector[attr^=val]) | attr 속성값이 val 로 시작하는것 |
| $(selector[attr$=val]) | attr 속성값이 val 로 끝나는것 |
| $(selector[attr*=val]) | attr 속성값이 val 을 포함하는 것 |
| $(selector[attr~=val]) | attr 속성값이 val 을 공백 + 포함하는 것 |
$('input[class=form-control]').css('background-color', 'yellow');
$('input[class^=form]').css('background-color', 'yellow');
$('input[class*=cont]').css('background-color', 'yellow');
$('input[class$=control]').css('background-color', 'yellow');
// 모두 같은 결과실행결과
$('input[class!=form-control]').hide(); // 체크박스를 숨김$('form input') 과 $('form > input') 의 차이
$('form input').hide(); // form tag 안의 모든 input tag
$('form > input').hide(); // form tag 바로 아래의 input 만 숨김
$(“selector1 + selector2”) : 다음에 나오는 element
$('h2 + p').css('color', 'white');실행 결과
$(“selector1 - selector2”) : 이전에 나오는 element
이건 생략~
Filter
| :animated | 에니메이션이 동작중인 모든 요소 |
| :eq(index) | index 에 해당하는 요소 |
| :even | 짝수 요소 |
| :odd | 홀수 요소 |
| :first | 처음 요소 |
| :last | 마지막 요소 |
| :gt(index) | index 보다 큰 index |
| :lt(index) | index 보다 작은 index |
| :header | 모든 header 요소 (h1,h2,h3....) |
| :not(selector) | selector 를 제외한 나머지 요소들 |
| :focus | 현재 포커스가 위치한 요소 |
우선 여기까지... 너무 많음 다음에 이어서...
728x90
반응형
'React,Node,JQuery,js' 카테고리의 다른 글
| [jQuery] Mobile 기기에서 <select> 의 change trigger 되게 하기 (0) | 2020.12.17 |
|---|---|
| [javascript] event 에 $(this) 사용 시 주의 사항. 01 (0) | 2020.12.15 |
| [js] Javascript online editor (0) | 2020.11.05 |
| [NPM] npm install EEXIST: file already exists 해결하기 (0) | 2020.07.23 |
| [Atom] 아톰 설치 HTML5, CSS3, JavaScript, PHP등 무료 에디터 (0) | 2020.06.26 |
댓글