기본 선택자
| 선택자 | 예제 | 설명 |
| * | $("*") | 모든 요소를 선택 |
| .class | $(".class") | 지정한 클래스를 가지는 모든 요소를 선택 |
| element | $("element") | 지정된 태그명을 가지는 모든 요소를 선택 |
| #id | $("#id") | 지정한 ID 속성을 가지는 하나의 요소를 선택 |
| , | $("selector1, selecotr2") | 모든 지정한 선택자들의 결과들을 결합하여 선택 |
<h1 id="id1">ID1</h1>
<h2 id= "id2">ID2</h1>
<script>
jQuery(document).ready(function(){
// 선택된 요소객체 속성에 접근해 값을 변경 == 순수자바스크립트
//document.getElementById('아이디값')
// innerHTML 대입을 통해 내용 변경
document.getElementById('id1').style.color='red';
document.getElementById('id2').innerHTML='안녕';
//jQuery방식
//$('#아이디명') 선택 요소객체 메소드 활용하여 값 변경
$('#id2').css('color', 'pink');
$('#id2').html('잘가');
//.html() :innerHTML과 관련된 기능 수행 메소드
});
//Uncaught ReferenceError: jQuery is not definedat 02_기본선택자.html:22:9
// jQuery라이브러리랑 연결 안해서 발생하는 오류!
</script>
<h3> *태그선택자</h3>
<p>
해당 태그 요소를 전부다 가져오고자 할 때 사용
</p>
<p>Java</p>
<p>Oracle</p>
<p>JDBC</p>
<h5>HTML</h5>
<h5>CSS</h5>
<h5>JavaScript</h5>
<script>
jQuery(document).ready(function(){
// 순수자바스크립트 방식
// document.getElementsByTagName('태그명')
var p = document.getElementsByTagName('p'); // 배열 반환
// p.style.color = 'yellow'; 실행불가, 배열이라서, 배열 index접근필요
for(var i = 0; i < p.length; i++){
p[i].style.color = 'yellow';
};
// jQuery와 함께쓸때는 for-in문 사용불가임
// jQuery방식
// $('태그명')
$('h5').css('color', 'blue');
$('h5,p,#id1').css('background', 'pink'); // 여러개 태그 같이선택 $('태그명, 태그명')
});
</script>
<h3>클래스선택자</h3>
<p>
특정 클래스 속성값을 가진 요소들을 선택하고자 할 때 사용
</p>
<h1 class="item select" id="item1" onclick="alert();">Class1</h1>
<h1 class="item select" id="item2" onclick="alert();">Class2</h1>
<h1 class="item select" id="item3" onclick="alert();">Class3</h1>
<script>
$(function(){
// 순수 자바스크립트 방식
// 대상: 클래스 속성값이 item인 요소들
// 글자색 : orangered
// 클릭시 경고창
var items =document.getElementsByClassName('item');
for(var i=0; i<items.length; i++){
items[i].style.color='orangered';
items[i].onclick = function(){
alert('메세지');
}
};
$('.select').css('background','lightgray');
$('.select').click(function(){
alert('h1클릭');
});
});
</script>
속성 선택자 (Attribute)
| 선택자 | 예제 | 설명 |
| [attribute|='value'] | $("[name|=apple]") | 속성 name값이 apple이거나, apple- 으로 시작하는 요소 |
| [attribute*='value'] | $("[name*=apple]") | 속성 name값이 apple이란 단어를 포함하는 요소 (어느 위치든) |
| [attribute~='value'] | $("[name~=apple]") | 속성 name값이 apple이거나 apple 공백 / 공백 apple 으로 구분된 단어를 포함하는 요소 |
| [attribute$='value'] | $("[name$=apple]") | 속성 name값이 apple이거나 apple로 정확히 끝나는 값인 요소 비교는 대소 문자를 구분함. |
| [attribute='value'] | $("[name=apple]") | 속성 name값이 정확히 apple인 요소 |
| [attribute!='value'] | $("[name!=apple]") | 속성 name값이 apple을 아예 갖지 않거나, apple 이외의 값을 갖지 않는 요소 |
| [attribute^='value'] | $("[name^=apple]") | 속성 name값이 apple이거나, apple로 정확히 시작하는 요소 |
| [attribute] | $("[name]") | 속성 name을 갖고있는 요소 |
| [attribute='value'][attribute2='value2'] | $("[name=apple][name2=banana]") | 각 속성 선택자들이 and로 일치하는 요소 |
<input type="text"><br>
<input type="number" class="test test3 test4 test1"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="button" value="button" class="test2"><br>
<script>
/*
$(function(){
$('input[class]').css('background','lightpink');
$('input[type=text]').val('안녕!');
// input은 빈태그이기떄문에 컨텐츠영역이 존재하지 않음, 내부에 내용을 넣으려면
// html이 아니라 value 속성으로 넣아야함
// jQuery.val() =-> value 속성접근
// css() html() val()
// .val(): value속성과 관련돈 기능 수행
$('input[class~=test]').val('1234');
//~은 공백 기준으로 완전한 단어여야함, test2는 test를 포함하는 것으로 보지 않음
$('input[type^=radio]').attr('checked', true);
$('input[type$=box]').attr('checked', true);
// .attr() : 그 외 속성들과 관련된 기능 수행
$('input[class*=st2]').css('width', '100px');
$('input[class*=st2]').css('height', '100px');
$('input[class*=st2]').val('버튼');
// 메소드 체이닝
$('input[class*=st2').css('width','50px').css('height','50px').val('button');
// . : 참조연산자
// 포인터의 이름이나 주소 앞에 사용하여, 포인터에 가리키는 주소에 저장된 값을 반환
// $('input[class*=st2').css('width','50px')의 반환값은 요소임
// 그러니까 거기서 다시 참조연산자(.)을 사용할 수 있는 것임
});
*/
</script>입력 양식 폼(Form) 필터 선택자
| 선택자 | 예제 | 설명 |
| :button | $(":button") | input 태그중 type 속성이 button인 문서 객체와 button 태그를 선택 |
| :checkbox | $(":checkbox") | 체크박스 유형의 모든 요소 선택 |
| :checked | $(":checked") | 체크되거나 선택된 모든 요소와 일치한 요소 선택 |
| :disabled | $(":disabled") | 비활성화된 모든 요소 선택 |
| :enabled | $(":enabled") | 활성화된 모든 요소 선택 |
| :file | $(":file") | 파일 유형의 모든 요소를 선택 |
| :focus | $(":focus") | 현재 포커스가 있는 요소 선택 |
| :image | $(":image") | 이미지 유형의 모든 요소 선택 |
| :input | $(":input") | 모든 input, textarea, select, button 요소 선택 |
| :password | $(":password") | 패스워드 유형의 모든 요소 선택 |
| :radio | $(":radio") | 라디오 유형의 모든 요소 선택 |
| :reset | $(":reset") | reset 유형의 모든 요소 선택 |
| :selected | $(":selected") | 선택된 모든 요소 선택 |
| :submit | $(":submit") | submit 유형의 모든 요소 선택 |
| :text | $(":text") | text 유형의 모든 input 요소 선택 |
텍스트상자: <input type="text"><br>
일반버튼 : <input type="button"><br>
체크박스: <input type="checkbox"><br>
첨부파일: <input type="file"><br>
비밀번호: <input type="password"><br>
라디오버튼: <input type="radio"><br>
초기화버튼: <input type="reset"><br>
제출: <input type="submit"><br>
제출2: <input type="submit"><br>
<script>
$(function(){
// $(':text').css('background','red');
// $(':button').css('width','200px').css('height', '200px').val('왕버튼');
// $(':button').css({width: '200px', height:'200px'}).val('왕버튼');
// 한번에 객체타입으로 다룰 수 있음!
// 부여하고자 하는 스타일에 대해 객체 형태로 묶어서 사용도 가능
// $(':checkbox').attr('checked',true);
$(':file').css('background','yellow');
$(':password').css('background','yellowgreen');
$(':radio').attr('checked',true).css({width: '50px', height: '50px'});
$(':reset').css({
background:'blue',
color:'white',
border:'none'
});
$(':submit').click(function(){
//alert('잠오는 오후')
//비밀번호 입력란에 작성한 값을 경고창에 띄워보기
// JS : document.getElementById()
// Property -> value -> setting (setter역할)
// field : 객체가 가지고 있는 속성
// setter- getter
// JS : 변수.속성명 == getter
// JS : 변수.속성명 = setter()
//alert($(':password').val());
//password의 value 값을 가져올 떄 val()
// .val(): 인자값 없이 메소드를 호출하면 해당 값을 불러옴
// setter/getter역할 동시수행
});
// mouseenter: 요소의 경계 안으로 들어갈떄
$(':submit').mouseenter(function(){
//$(':submit').css('background', 'pink');
// 현재이벤트가 발생한 js객체(이벤트타겟 요소객체)에 접근하는 방법
// window.event.target == e.target == this
// this.css('background', 'pink');
// 자바스크립트 객체에 jQuery메소드가 있을리가~~
// this.style.background='pink';
// $(this).css('background', 'pink');
// // this를 jQuery요소객체로 바꾸는 방법: $(js객체)
// 고오급기술: 직접 css()를 호출하여 스타일을 부여하는 것이 아니라
// 클래스 속성값을 추가하여 이미 정의된 style 입히기
// 자바스크립트 방식
//btn3.classList.add('style');
//btn3.classList.remove('style');
//jQuery
// $(this).addClass('부여하고싶은 클래스속성값')
$(this).addClass('pinkStyle');
// .addClass(): 선택된 요소에 클래스 속성값을 추가해주는 메소드
});
// mouseenter<->mouseoout: 요소의 경계밖으로 나갈때
// $(':submit').mouseout(function(){
// $(this).removeClass('pinkStyle');
// })
// mouseenter + mouseout : hover
$(':submit').hover(function(){
$(this).addClass('pinkStyle');
}, function(){
$(this).removeClass('pinkStyle');
})
// hover(앞쪽 이벤트핸들러-mouseenter , 뒤쪽 이벤트헨들러-mouseout)
});
</script> 취미: <input type="checkbox" name="hobby" class="hobby" value="영화보기">영화보기
<input type="checkbox" name="hobby" class="hobby" value="게임하기">게임하기
<input type="checkbox" name="hobby" class="hobby" value="산책하기">산책하기
<button id="btn1"> 취미는 무엇입니까? </button>
<script>
$(function(){
// 버튼 클릭시 현재 checked된 요소만 선택하여 스타일 부여
$('#btn1').click(function(){
// $('input:checked').css({width:'50px', height:'50px'});
// "자바스크립트" 방식으로
// 버튼클릭시 현재 checked된 요소만 선택하여
// alert창으로
//당신의 취미는 xxxxx이군요? 형식으로 출력
// input= document.getElementsByClassName('hobby');
// var value=" ";
// for(var i=0; i<input.length; i++){
// if(input[i].checked){
// value +=input[i].value;
// };
// };
// alert('당신의 취미는'+value+'이군요?');
// jQuery방식
str = ' ';
$('input[name=hobby]').filter(':checked').each(function(){
str += $(this).val() + ' ';
});
console.log(str);
})
});
</script>
<h4>
-selected 상태 선택자(select>option)</h4>
<p>
option 요소객체 중 선택된 태그를 선택<br>
$('option:selected')
</p>
지역:
<select name="location">
// key는 select 태그의 name 속성값값
// value속성 있을시 value속성값이,
// value 속성 없을시 content영역이 value로 넘어감
<option value="X">선택안함</option>
<option value="NY">남양주</option>
<option value="GW">강원도</option>
<option value="BS">부산</option>
</select>
<button onclick="test();">확인</button>
<br>
선택한 지역: <label for="" id="result">없음</label>
<script>
function test(){
// 현태 선택된 목록을 가져옴(option의 selected)
console.log($('option:selected').val()); // NY
console.log($('option:selected').html()); //남양주
document.getElementById('result').innerHTML = $('option:selected').html();
// 자바스크립트와 제이쿼리 같이사용 가능
//$('#result').html($('option:selected').html());
// html(): 인자값 없을시 html문서 내용을 가져오는 getter역할 ,
// html(인자값): setter역할
//jQuery선택자 선택시 선택결과가 배열로 옴
// S.fn.init [option, prevObject: S.fn.init(1)]
// [[Prototype]]:Object
}
</script>
<h4> - enabled, disabled 상태(input, button, textarea...) </h4>
<p>
활성화/비활성화된 요소 선택<br>
:enabled <br>
:disabled <br>
<div id="wrap">
활성화 텍스트상자: <input type="text"><br>
비활성화 텍스트상자: <input type="text" disabled><br>
활성화 버튼: <input type="button">버튼<br>
비활성화 버튼: <input type="button" disabled>버튼2<br>
</div>
<script>
$(function(){
$('#wrap>:enabled').css('background','yellowgreen');
$('#wrap>:disabled').css('background','greenyellow');
});
</script>부모선택자(parent)
- $('선택자').parent()
선택된 요소를 기준으로 바로 상위 부모요소 하나만을 선택<br>
- $('선택자').parents() <br>
선택된 요소를 기준으로 모든 상위 부모/조상요소를 선택<br>
- $('선택자').parents('선택자') <br>
선택된 요소를 기준으로 모든 상위 부모/조상요소 중에서 제시한 값과 일치하는 상위요소 선택<br>
- $('선택자').parentsUntil('선택자') <br>
선택된 요소를 기준으로 모든 상위 부모/조상요소 중에서 제시한 값까지 상위요소 선택
<script>
$(function(){
// parent() parents() parents('선택자') parentsUntil('선택자')
// parent()
$('span').parent().css({color:'purple', border:'2px solid skyblue'});
// parents()
$('li').parents().css('color','lightgreen');
// parents로 선택시 상위 모든요소(body 포함)바뀜
// parents(선택자)
$('li').parents('div').css('border','2px dashed magenta');
//parentsUntil('선택자')
$('span').parentsUntil('div').css('color','lightpink');
});
</script>자식 선택자 (child)
- $('선택자').children()
선택된 요소를 기준으로 모든 자손(바로 하위)요소들을 선택
-$('선택자').children('선택자')
선택된 요소를 기준으로 모든 자손요소들 중에서 제시값과 일치하는 요소선택
-$('선택자').find('선택자')
선택된 요소를 기준으로 모든 후손요소 중에서 제시한 값과 일치하는 요소들만 선택
<script>
$(function(){
// 객체형태로 css부여
// 앞으로 부여할 스타일 객체
var style1 = {
color: 'red',
border: '2px solid red',
}
var style2 = {
color: 'blue',
border: '2px solid blue',
}
var style3= {
color: 'green',
border: '2px solid green',
}
var style4 = {
color: 'orange',
border: '2px solid orange',
}
var style5 = {
color: 'greenyellow',
border: '2px solid greenyellow',
}
// children
$('.wrap').children().css(style1);
$('.wrap').children().children().css(style1); //자손의 자손
//children메소드 쓰면서 선택자
// children('선택자')
$('.wrap').children().children('ul').css(style3); //자손의 자손
// find('선택자')
$('.wrap').find('li').css(style4);
$('.wrap').find('span').css(style5);
});
// children
</script>
- $('선택자').siblings()
선택된 요소를 기준으로 같은 레벨에 있는 모든 요소들을 선택 (선택요소는 제외)
- $('선택자').siblings('선택자')
선택된 요소를 기준으로 같은 레벨에 있는 모든 요소 중에서 제시한 값과 일치하는 요소들 선택
- $('선택자').next()
선택된 요소를 기준으로 같은 레벨에 있는 모든 요소 중 바로 다음요소 하나만 선택
- $('선택자').nextUntil('선택자')
선택된 요소를 기준으로 같은 레벨에 있는 모든 요소 중 내 뒤에 있는 요소부터 제시한 값과 일치하는 요소를 만나기 전까지만 선택
- $('선택자').prev()
선택된 요소를 기준으로 같은 레벨 모든 요소중 바로 이전 요소 딱하나 선택
- $('선택자').prevAll()()
선택된 요소를 기준으로 같은 레벨 모든 요소중 바로 이전 요소 모두 선택
- $('선택자').prevUntil()()
선택된 요소를 기준으로 같은 레벨에 있는 모든 요소 중 내 앞 요소부터 제시한 값과 일치하는 요소 만나기 전까지 선택
<div class="wrap">
<p>p</p>
<div>div</div>
<span></span>
<h2>h2 - 기준점</h2>
<h3>h3</h3>
<p>p</p>
</div> <script>
$(function(){
// 객체형태로 css부여
// 앞으로 부여할 스타일 객체
var style1 = {
color: 'red',
border: '2px solid red',
}
var style2 = {
color: 'blue',
border: '2px solid blue',
}
var style3= {
color: 'green',
border: '2px solid green',
}
var style4 = {
background: 'orange',
}
var style5 = {
color: 'greenyellow',
border: '2px solid greenyellow',
}
// siblings : 본인은 제외
$('h2').siblings().css(style1);
$('h2').siblings('p').css(style2);
// next계열:
$('h2').next().css(style3);
// 나의 바로 아래 1개
$('h2').nextAll().css(style4);
$('h2').nextUntil('p').css('font-size','30px');
$('h2').prev().css('background', 'orangered');
$('h2').prevAll().css('color', 'black');
$('h2').prevUntil('p').css('border', '4px dotted purple');
});
// children
</script>
| 선택자 | 예제 | 설명 |
| :first-child | $("div:first-child") | 부모의 첫 번째 자식인 모든 요소를 선택 |
| :first-of-type | $("div:first-of-type") | 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택 |
| :last-child | $("div:last-child") | 부모의 마지막 하위 요소인 모든 요소를 선택 |
| :last-of-type | $("div:last-of-type") | 동일한 name 요소의 형제 중 마지막 요소인 모든 요소를 선택 |
| :nth-child(index/even/odd/equation) | $("div:nth-child(2)") | 부모의 n 번째 자식인 모든 요소를 선택 |
| :nth-last-child(index/even/odd/equation) | $("div:last-child(2)") | 마지막 요소에서 첫 번째 요소까지 계산하여 부모의 n 번째 자식인 모든 요소를 선택 |
| :nth-last-of-type(index/even/odd/equation) | $("div:nth-last-of-type(2)") | 마지막 요소부터 첫 번째 요소까지 같은 name 요소를 가진 형제와 관련하여 부모의 n 번째 자식인 모든 요소 선택 |
| :nth-of-type(index/even/odd/equation) | $("div:nth-of-type(2)") | 동일한 name 요소를 갖는 형제와 관련하여 부모의 n번째 자식인 모든 요소 선택 |
| :only-child | $("div:only-child") | 부모의 유일한 자식인 모든 요소를 선택 |
| :only-of-type | $("div:only-of-type") | 동일한 name 요소를 갖는 형제 노드가 없는 모든 요소 선택 |
계층 선택자 (Hierarchy)
| 선택자 | 예제 | 설명 |
| > :: parent > child | $("ul > li") | "parent"로 지정된 요소의 "child"로 지정된 모든 직접 자식 요소 선택 |
| (공백) :: ancestor descendant | $("form input") | 지정된 조상의 자손인 모든 요소 선택 |
| + :: prev + next | $("label+input") | 형제 "prev"가 바로 앞에 오는 "next"와 일치하는 다음 요소 모두 선택 |
| ~ :: prev~siblings | $("#prev~div") | "prev"요소 다음에 오는 모든 형제 요소를 선택하고, 상위 요소가 같으며 필터링 "siblings" 선택자와 일치하는 요소 |
기본 필터 선택자(Basic Filter)
| 선택자 | 예제 | 설명 |
| :odd | $("div:odd") | 홀수 번째에 위치한 문서 객체를 선택함 |
| :even | $("div:even") | 짝수 번째에 위치한 문서 객체를 선택함 |
| :first | $("div:first") | 첫 번째 위치한 문서 객체를 선택함 |
| :last | $("div:last") | 마지막에 위치한 문서 객체를 선택함 |
<h1>필터링 관련 선택자 및 메소드</h1>
<h3>* 필터관련 선택자 </h3>
<!-- table>tr*5>td*3 -->
<table border="1">
<!-- 5행 3열 -->
<tr>
<td>이름</td>
<td>MBTI</td>
<td>혈액형</td>
</tr>
<tr>
<td>홍길동</td>
<td>ENTP</td>
<td>B형</td>
</tr>
<tr>
<td>이순신</td>
<td>JDBC</td>
<td>A형</td>
</tr>
<tr>
<td>안철수</td>
<td>INFP</td>
<td>AB형</td>
</tr>
<tr>
<td colspan="2">총 인원</td>
<td>3명</td>
</tr>
</table>
<script>
$(function(){
//: first :last :even :odd
$('tr:first').css('background', 'black').css('color', 'white');
// first: 첫번째 요소를 의미
$('tr:last').css({background:'orangered', color:'white'});
// last: 마지막요소를 의미
$('tr:even').css('background', 'gray');
// 짝수번째 요소 의미 (단, 시작은0부터)
$('tr:odd').css('background','yellowgreen');
//odd 홀수번째 요소 의미(단, 시작은0부터)
});
</script>
<h3> * 필터관련 메소드</h3>
<p>
기준이 되는 요소 중에서 특정 요소만 걸러서 선택해주는 메소드
first(), last(), filter(), not()
</p>
<h4 class="test">test-1</h4>
<h4 class="test">test-2</h4>
<h4 class="test">test-3</h4>
<h4 class="test">test-4</h4>
<h4>test-5</h4>
<h4 class="test">test-6</h4>
<script>
$(function(){
$('h4').first().css('font-size','20px');
$('h4').last().css('font-size','50px');
//.filter('선택자'): 기준 중에서 해당 선택자만 선택
$('h4').filter('.test').html('ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ');
//.not('선택자'): 기준 중에서 해당 선택자가 아닌것만 선택
$('h4').not('.test').css('color', 'skyblue');
//******* .eq(위치): 0부터 시작, 몇번째 요소 선택할것인지
$('h4').eq(0).text('<b>eq(0) 선택됨 </b>');
// test(): 선택된 요소의 innerText와 관련된 기능 수행
});
</script>
함수 필터 선택자(function Filter)
| 선택자 | 예제 | 설명 |
| :eq(index) | $("div:eq(1)") | 일치하는 집합 내의 인덱스 n에 있는 요소를 선택 |
| :gt(index) | $("div:gt(2)") | 일치하는 세트 내의 인덱스보다 큰 인덱스에서 모든 요소를 선택 |
| :lang(language) | $("div:lang(en-us)") | 지정된 언어의 모든 요소를 선택 |
| :lt(index) | $("div:lt(4)") | 일치하는 집합 내의 인덱스보다 작은 인덱스에서 모든 요소를 선택 |
| :not(selector) | $("div:not(:checked)") | 지정된 선택자와 일치하지 않은 모든 요소를 선택 |
| :contains(text) | $("div:contains('Hello'") | 지정된 텍스트를 포함하는 모든 요소를 선택 |
| :has(selector) | $("div:has(p)") | 지정한 선택자와 일치하는 요소를 하나 이상 포함하는 요소를 선택 |
| :animated | $("div:animated") | 선택자를 실행할 때 애니메이션 진행 상태에 있는 모든 요소를 선택 ":not(:animated)" => 애니메이션중이지 않은것 |
출처:
https://inpa.tistory.com/entry/jQuery-📚-제이쿼리-선택자-Selector-💯-정리#계층_선택자_(Hierarchy) [👨💻 Dev Scroll:티스토리]
'JavaScript' 카테고리의 다른 글
| [javaScript] 이벤트 (0) | 2022.11.07 |
|---|---|
| [JavaScript] 객체2: 객체의 메소드 참조/ 객체내 속성호출(this) in, with / toString메소드 (1) | 2022.10.31 |
| [JavaScript] 객체1: 객체란 / 프로퍼티, 메소드/ 반복문 (0) | 2022.10.26 |
| [JavaScript] 함수 (0) | 2022.10.25 |
| [JavaScript] 배열 (0) | 2022.10.25 |