[속성 선택자]
속성 선택자 문법은 기본적으로 요소[속성=값] 의 형태이다.
속성 선택자는 요소에 명시적으로 지정하는 name, id, class 등의 속성 값과 일치한 요소를 찾는 선택자이다.
여기서 말하는 요소란 태그의 이름을 말한다.
<body>
<input type="text"/>
<input type="password"/>
</body>
<script>
$(document).ready(function () {
$('input[type=text]').val('Hi jQuery..!');
})
</script>이렇게 하면 input type이 text인 입력 양식의 value 속성이 'Hi jQuery..!' 값이 정의되고 text input박스에 Hi jQuery..! 라는 문자열 값이 입력된 상태로 페이지가 출력된다.
[필터 선택자]
선택자 중에 : 기호를 포함하는 선택자이다.
필터선택자는 요소에 명시적으로 지정된 특정 속성을 찾아간다.
input 요소에는 type속성 혹은 checked속성을, option 요소에는 selected속성을 찾아갈 수 있다.
input 입력 양식의 필터선택자로 기본 문법에 대한 예를 들자면 '요소:type속성' 이 된다.
<input type="text"> 는 'input:text'
<input type="passwrod"> 는 'input:password'
<input type="checkbox"> 는 'input:checkbox'
<input type="button"> 은 'input:button'
<input type="radio"> 은 'input:radio'
<input type="submit"> 은 'input:submit'
등과 같이 표현할 수 있다
select 요소와 함께 사용되는 option 요소는 selected 속성을 가진다.
<body>
<select>
<option>Apple</option>
<option>Bag</option>
<option>cat</option>
<option>Dog</option>
<option>Elephant</option>
</select>
</body>
$(document).ready(function(){
setTimeout(function () {
var value = $('option:selected').val();
console.log(value)
}, 5000)
})
<script>
</script>위와 같이 선택자 안에 'option:selected'라고 지정할 수 있으며 option 태그의 부모태그는 select이므로
'select > option:selected' 라고 표현이 가능하다.
이러한 표현은 select의 id선택자나 class선택자로 접근하여 여러 select 요소중 특정한 하나의 요소에만 접근하기 위할때 사용한다.
다음은 id가 y인 select요소의 option중 선택된 option의 값을 가져오는 코드이다.
<body>
<select id="y">
<option>Apple</option>
<option>Bag</option>
<option>cat</option>
<option>Dog</option>
<option>Elephant</option>
</select>
</body>
$(document).ready(function(){
setTimeout(function () {
var value = $('#y > option:selected').val();
console.log(value)
}, 5000)
})
<script>
</script>
id가 y인 요소의 자손을 선택하고 그 자손중 option요소가 selected 즉, 값이 선택된 요소를 선택한다.
아래 코드처럼 name속성으로도 접근이 가능하다.
<body>
<select name="y">
<option>Apple</option>
<option>Bag</option>
<option>cat</option>
<option>Dog</option>
<option>Elephant</option>
</select>
</body>
$(document).ready(function(){
setTimeout(function () {
var value = $('select[name=y] > option:selected').val();
console.log(value)
}, 5000)
})
<script>
</script>select태그의 name이 y인 속성을 선택하기 위해서는 속성선택자 문법을 사용해야한다.
따라서 select[name=y] 와 같이 입력한 후 > 를 통해 자손을 표현하고 똑같이 필터속성 문법을 입력한다.
만약 checkbox 와 radio 요소에는 checked 속성을 가지는데, 이때는 어떻게 접근할까?
기본적으로 input 속성의 checkbox와 radio type은 select라는 부모요소를 갖는 option 속성과는 다르게 input 본인 자체적으로 요소를 가진다.
때문에 > 를 통해 자손으로 사용하기 위해서는 해당 checkbox나 radio 타입의 input 요소를 감싸는 태그를 명시적으로지정해줘야한다.
<body>
<div name="rword">
<input type="radio" value="Apple">사과
<input type="radio" value="Bag">가방
<input type="radio" value="cat">고양이
<input type="radio" value="Dog">개
<input type="radio" value="Elephant">코끼리
</div>
<div name="cword">
<input type="checkbox" value="Apple">사과
<input type="checkbox" value="Bag">가방
<input type="checkbox" value="cat">고양이
<input type="checkbox" value="Dog">개
<input type="checkbox" value="Elephant">코끼리
</div>
</body>
<script>
$(document).ready(function(){
setTimeout(function () {
var rword = $('div[name=rword] > input:checked').val();
var cword = $('div[name=cword] > input:checked').val();
console.log(rword);
console.log(cword);
}, 5000)
})
</script>
[속성+필터 선택자]
속성 + 필터 선택자 문법을 함께 사용하는 경우도 있다.
자손을 사용하지 않고 input태그에 모두 동일한 name속성을 준다면 다음과 같이 사용한다.
<body>
<input type="radio" name="rword" value="Apple">사과
<input type="radio" name="rword" value="Bag">가방
<input type="radio" name="rword" value="cat">고양이
<input type="radio" name="rword" value="Dog">개
<input type="radio" name="rword" value="Elephant">코끼리
<input type="checkbox" name="cword" value="Apple">사과
<input type="checkbox" name="cword" value="Bag">가방
<input type="checkbox" name="cword" value="cat">고양이
<input type="checkbox" name="cword" value="Dog">개
<input type="checkbox" name="cword" value="Elephant">코끼리
</body>
<script>
$(document).ready(function(){
setTimeout(function () {
var rword = $('input:checked[name=rword]').val();
var cword = $('input:checked[name=cword]').val();
console.log(rword);
console.log(cword);
}, 5000)
})
</script>
자손이 아니므로 > 꺽쇠를 사용하지 않고 name이 rword(cword)인 input이 checked속성을 갖는 요소를 찾아 선택한다.
속성선택자와 필터선택자를 모두 사용한 선택자 문법이다.
id를 사용할때도 name과 같이 속성선택자 문법을 함께 사용한다.
<body>
<input type="radio" name="rword" value="Apple">사과
<input type="radio" name="rword" value="Bag">가방
<input type="radio" name="rword" value="cat">고양이
<input type="radio" name="rword" value="Dog">개
<input type="radio" name="rword" value="Elephant">코끼리
<input type="checkbox" name="cword" value="Apple">사과
<input type="checkbox" name="cword" value="Bag">가방
<input type="checkbox" name="cword" value="cat">고양이
<input type="checkbox" name="cword" value="Dog">개
<input type="checkbox" name="cword" value="Elephant">코끼리
</body>
<script>
$(document).ready(function(){
setTimeout(function () {
var rword = $('input:checked[id=rword]').val();
var cword = $('input:checked[id=cword]').val();
console.log(rword);
console.log(cword);
}, 5000)
})
</script>자손이 아니므로 #rwod > input:checked 문법은 성립되지 않는다.
'JavaScript > jQuery' 카테고리의 다른 글
| [jQuery] css() 함수 사용 문법 종류 (0) | 2022.01.03 |
|---|---|
| filter() 와 메서드 체이닝, end() , add() 메소드 (0) | 2022.01.03 |
| each() 함수 '요소' 관리 사용 문법 (0) | 2022.01.03 |
| 버튼 클릭시 특정영역 숨기기 보이기 (1) | 2020.10.05 |
| [jQuery] <button> 클릭 이벤트 / 이벤트발생시 value를 담아 url로 전송하기 (0) | 2020.09.07 |