중첩태그 구분하기
| 태그1 > 태그2 : 태그1 바로 밑에 있는 태그2 선택 태그1 태그2 : 태그1 밑에 있는 모든 태그2 선택 태그1+태그2 : 태그1 다음에 나오는 형제태그 중 태그2 선택 |
- prev()
해당 선택자의 그 전에 해당하는 모든 element
형식) .prev([selector])
- next()
해당 선택자의 다음에 해당하는 모든 element
형식) .next( [selector])
- first()
해당 선택자 중에 첫번째 element
형식) .fist()
- last()
해당 선택자 중에 마지막 element
형식) .last()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script>
$(function(){
$('body > div').css('border','3px solid navy')
$('p span').css('border','3px dotted red');
$('span+a').css('border','5px double green');
$('span+a').next().css('border','5px double pink');
$('span+a').prev().css('background','yellow');
$('span+a').first().css('background','pink');
$('span+a').last().css('background','orange');
})
</script>
</head>
<body>
<div>
<ul>목록
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>중첩</div>
</div>
<div>test</div>
<p>
<a>one</a>
<span>tag1 <span>tag2</span>
</span>
<a>two</a>
<span>tag3</span>
<a>three</a>
</p>
</body>
</html>
같은 태그를 속성명, 속성값에 따라 구분하기
| 태그[속성명^=값] : 해당 값으로 시작하는 속성값을 가진 태그 태그[속성명|=값] : 해당 값으로 시작하거나 같은 속성값을 가진 태그 태그[속성명$=값] : 해당 값으로 끝나는 속성값을 가진 태그 태그[속성명*=값] : 해당 값을 포함하는 속성값을 가진 태그 태그[속성명~=값] : 해당 값을 단어로서 포함하는 속성값을 가진 태그 |
$('button[name]').html('<h1>change</h1>')
<!--button태그 중에서 name 속성을 가진 버튼의 value값을 change로 변경-->
$('button').html('change2')
<!--모든 button 태그의 value값을 change2로 변경-->
$('input[type]').val('name')
<!--type속성을 갖는 input태그의 내용값을 name으로 설정-->
$('input[type!=text]').val('test')
<!--input태그 중에 type속성값이 text가 아닌 태그의 내용값을 test로 설정-->
같은 태그를 속성값에 따라 구분하기
<!--$('input[type=checkbox]')-->
$('input:checkbox').attr('checked',false);
<!--input태그 중 checkbox 속성값을 갖는 태그에 속성값이 false인 checked속성을 추가한다-->
$('input:text').val('')
<!--input태그 중 text 속성값을 갖는 태그의 내용값을 지운다-->
'jQuery' 카테고리의 다른 글
| [jQuery]addClass, removeClass, toggleClass, filter, is, append, prepend, after, before 함수 (0) | 2021.03.08 |
|---|---|
| [jQuery]setTimeout, setInterval, 태그의 인덱스 번호에 따라 구분하기 (0) | 2021.03.05 |
| [jQuery]이클립스 template 추가하기/ 제이쿼리 함수 attr, each, children, text, html, val (0) | 2021.03.05 |
| [jQuery]ready함수, 제이쿼리 api문서, css함수, 제이쿼리 변수 (0) | 2021.03.04 |
| [jQuery]jQuery 개요 및 특징, 사용방법(라이브러리 다운, cdn) (0) | 2021.03.04 |