JQuery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
*html->css->javascript 순서로 적용
<script src="https://code.jquery.com/jquery-3.1.1.min.js"/>
$() : 함수. JQuery가 제공하는 함수를 사용할 수 있게 된 상태
$변수 : jQuery 변수. jQuery에서 사용하는 내장 함수들을 모두 사용할 수 있음
$(document).ready() 메서드 //문서가 준비되면 함수내용 적용해!
//[1]함수이름 생성
$(document).ready(myFun);
function myFun(){
//span에 redtext라는 클래스를 붙여줌
$('span').addClass('redtext');
}
//[2]함수이름 없이 바로 적용(익명함수)
$(document).ready(function(){//전달하지 않고 익명함수로 바로 선언
$('span').addClass('italictext'); //$('span')은 CSS의 span태그를 지정한거임
});
셀렉터,선택자
문서 내에서 원하는 엘리먼트(요소)를 쉽게 식별하고 이를 추출하기 위해서 jQuery에서 제공하는 기술
기본
| 셀렉터 | 설명 |
| * | 모든 엘리먼트와 일치 |
| E | 태그명이 E인 모든 엘리먼트와 일치 |
| E F | E의 자손이면서 엘리먼트의 이름이 F인 모든 엘리먼트 |
| E>F | E의 바로 아래 F 엘리먼트 |
| E+F | E의 형제 엘리먼트로 바로 다음 형제 F 엘리먼트 |
| E~F | E의 형제 엘리먼트로 다음에 나오는 모든 F 엘리먼트 |
| E:has(F) | 엘리먼트 F의 자손을 하나 이상 가지고 있는 E 모든 엘리먼트 |
| E.C | 클래스명 C를 가지고 있는 모든 E 엘리먼트. |
| *.C | 클래스명 C를 가지고 있는 모든 엘리먼트 |
| E#I | 아이디가 I 인 모든 E 엘리먼트. |
| *#I | 아이디가 I인 모든 엘리먼트 |
| E[A] | 어트리뷰트 A를 가지는 모든 E 엘리먼트 |
| E[A=V] | 어트리뷰트 A의 값이 V인 모든 E 엘리먼트 |
| E[A^=V] | 어트리뷰트 A의 값이 V로 시작하는 모든 E 엘리먼트 |
| E[A$=V] | 값이 V로 끝나는 어트리뷰트 A를 가지고 있는 모든 E 엘리먼트 |
| E[A*=V] | 값에 V를 포함하는 어브리뷰트 A를 가지고 있는 모든 E 엘리먼트 |
위치기반
| :first | 페이지에서 처음으로 일치하는 엘리먼트를 반환한다. |
| :last | 페이지에서 마지막으로 일치하는 엘리먼트를 반환한다. |
| :even | 페이지 전체의 짝수 번째 엘리먼트를 반환한다. |
| :odd | 페이지 전체의 홀수 번째 엘리먼트를 반환한다. |
| :eq(n) | n번째로 일치하는 엘리먼트를 반환한다. |
| :gt(n) | n번째 엘리먼트(포함하지 않음) 이후의 일치하는 엘리먼트를 반환한다. |
| :lt(n) | n번째 엘리먼트(포함하지 않음) 이전의 일치하는 엘리먼트를 반환한다. |
| :first-child | 첫 번째 자식 엘리먼트를 반환한다. |
| :last-child | 마지막 자식 엘리먼트를 반환한다. |
| :only-child | 형제가 없는 모든 엘리먼트를 반환한다. |
| :nth-child(n) | n번째 자식 엘리먼트를 반환한다. |
| :nth-child(even) | 짝수 자식 엘리먼트를 반환한다. |
| :nth-child(odd) | 홀수 자식 엘리먼트를 반환한다. |
| :nth-child(Xn+Y) | 전달된 공식에 따른 n번째 자식 엘리먼트를 반환한다. Y는 0인 경우 생략 가능하다. |
정의필터
| :animated | 현재 애니메이션이 적용되고 있는 엘리먼트를 선택한다. |
| :button | 모든 버튼을 선택한다(input[type=submit], input[type=reset], input[type=button], button). |
| :checkbox | 체크박스 엘리먼트만 선택한다. |
| :checked | 선택된 체크박스나 라디오 버튼만을 선택한다(CSS에서 지원). |
| :contains(foo) | 텍스트 foo를 포함하는 엘리먼트만 선택한다. |
| :disabled | 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다(CSS에서 지원). |
| :enabled | 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다(CSS에서 지원). |
| :file | 모든 파일 엘리먼트를 선택한다(input[type=file]). |
| :header | 헤더 엘리먼트만 선택한다. 예를 들어<h1>부터 <h6>까지의 엘리먼트를 선택한다. |
| :hidden | 감춰진 엘리먼트만 선택한다. |
| :image | 폼 이미지를 선택한다(input[type=image]). |
| :input | 폼 엘리먼트만 선택한다(input, select, textarea, button). |
| :not(filter) | 필터의 값을 반대로 변경한다. |
| :parent | 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다. |
| :password | 패스워드 엘리먼트만 선택한다(input[type=password]). |
| :radio | 라디오 버튼 엘리먼트만 선택한다(input[type=radio]). |
| :reset | 리셋 버튼을 선택한다(input[type=reset] 이나 button[type=reset]). |
| :selected | 선택된 엘리만트만 선택한다. |
| :submit | 전송 버튼을 선택한다(button[type=submit] 이나 input[type=submit]). |
| :text | 텍스트 엘리먼트만 선택한다(input[type=text]). |
| :visible | 보이는(visible) 엘리먼트만 선택한다. |
메소드
$(셀렉터).addClass(클래스명) : 선택한 요소에 전달받은 클래스를 추가함.
<style type="text/css">
.italictext { font-style: italic; }
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$('span').addClass('italictext');
</script>
</head>
<body>
<span> simple </span>
</body>$(셀렉터).length : 요소의 개수를 얻기 위해 사용
each() : For~in(반복문) 처럼 각 요소마다 적용
$(this) : each() 함수 내에서 현재 접근 가능한 요소
text() : 엘리먼트에 대해 텍스트 내용을 얻는다.
css() : 인자로 지정한 CSS 스타일을 선택한 요소에 적용
console.log("출력할 대상")
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p em').css('background-color', 'yellow').each(function() { //div 하위의(손자까지 싹다 포함) em에 각각 함수 적용
$('.result1').append($(this).text()+ "\n");//클래스가 result1인 요소에서. 그 요소에 text를 가져가다 붙이고 줄바꿈해
//여기서 this는 one, two, three인거임.
});
$('div > em').css('background-color', 'pink').each(function() {//div에 인접한(손자말고 찐자식만) em
$('.result2').append($(this).text()+ "\n"); //클래스가 result2인 애한테 this의 텍스트를 넣어
});
console.log("검색된 엘리먼트 개수 : " + $('p em').length);
console.log("검색된 엘리먼트 개수 : " + $('div > em').length);
});
</script>
</head>
<body>
<p>
<em> one </em>
<em> two </em>
<span> <em> three </em> </span>
</p>
<div>
<em> four </em>
<span> <em> five </em> </span>
<em>six</em>
</div>
<hr>
<div>
<span> ancestor descendant로 검색된 엘리먼트 : </span>
<span class="result1"></span>
</div>
<div>
<span> parent > child로 검색된 엘리먼트 : </span>
<span class="result2"></span>
</div>
</body>
$(‘셀렉터’).append(‘추가할 내용’) : 셀렉터가 추가할내용의 뒤에 추가된다.
$(‘추가할 내용’).appendTo(‘셀렉터’) : 추가할 내용이 셀렉터의 뒤에 추가된다.
//둘이 같은거임
$('p').append('<b>연습</b>');
$('<b>연습</b>').appendTo('p');
<p>one</p>
//태그안에 다른 태그를 넣어줄 수도 있음
$('span').append($('b'));
<b> 사과 </b>
<span> 먹고 싶은 과일 : </span>
<script type="text/javascript">
$(function() {
var fruits=["apple", "banana", "orange", "melon"];
var cars=["sonata", "grandure", "genesis"];
$.each(fruits, function(index, value){//배열(fruits) 요소마다 각각 익명함수 적용해
$("#fruit_list").append($("<li>"+value+"</li>"));
});
$.each(cars, function(index, value){
//얘는 appendTo니까 붙일 요소를 먼저 만들고 어느 위친지 나중에 적용해
$("<li>"+value+"</li>").appendTo("#car_list");
});
});
</script>
</head>
<body>
<div>
<b> 내가 좋아하는 과일 </b>
<ul id="fruit_list"></ul>
</div>
<div>
<b> 갖고 싶은 차 </b>
<ul id="car_list"></ul>
</div>
</body>
html() : 태그를 포함한 텍스트를 얻는다.
text() : 태그를 제외한 텍스트만 얻는다.
css('속성명','속성값') : 스타일을 적용한다.
removeClass() : 인자로 지정된 스타일을 제거한다.
<style>
table { table-layout:auto; width: 75%;}
.textstyle { color: blue; font-weight: bold; background-color: pink}
</style>
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//td에 클래스 적용
$('td').addClass('textstyle');
//td에 적용한 클래스 삭제
$('td:lt(2)').removeClass('textstyle'); //2번째 인덱스 이전의 요소들에 적용(2번 포함X)
$('td:gt(4)').removeClass('textstyle'); //4번째 인덱스 이후의 요소들에 적용(4번 포함X)
});
</script>
</head>
<body>
<table>
<tr><td>zero</td><td>one</td><td>two</td></tr>
<tr><td>three</td><td>four</td><td>five</td></tr>
</table>
</body>css(map) : MAP지정방식. {＇속성명＇:＇속성값＇ , … }
$('div span:first-child, div span:last-child') .css(
{
'text-decoration' : 'underline',
'color' : 'red',
'font-size' : '20pt‘
} );
//메소드 체인 방식
$('div span:first-child, div span:last-child') //div 하위의 span태그 중에서 첫번째span, 마지막span
.css('text-decoration', 'underline')
.css('color', 'red')
.css('font-size', '20pt');click : 버튼이 눌리면 인자에 기술한 함수가 자동 호출하여 이벤트를 처리
attr(name) : attribute(속성)값을 얻어오기
attr(name, value) : 새로운 attribute(속성) 값을 설정하기
val() : 값(vaule)을 얻어오기
prev() : 속성의 형제 속성 중에 바로 이전 속성의 집합을 반환
html(htmlString) : 적용한 태그 속 내용을 바꿔서 적용함
<script type="text/javascript">
$(document).ready(function () {
$('#selectBtn:button').click(function () { //버튼이 눌리면
var checkedList = "";
var checkedConsole = "";
//input태그중에 [name속성이 hobby인거]에 대해서: 체크박스의 값이: 체크되었으면
$("input[name='hobby']:checkbox:checked").each(function () {
checkedList += $(this).prev().text() + "\t";//체크된 요소들을 담아담아쓸어담아
//체크박스 앞의(이전의) 텍스트를 가져와야하므로 prev() 사용
checkedConsole += $(this).val() + "\t";//지금 체크된 요소의 val()를 뿌려뿌려
});
$('#contents').html(checkedList);//결과자리에다가 리스트를 적용(내용 변경)
console.log(checkedConsole);
});
});
</script>
</head>
<body>
<div>
<span class="item"> 음악감상 </span>
<input type="checkbox" name="hobby" value="music">
</div>
<div>
<span class="item"> 요가 </span>
<input type="checkbox" name="hobby" value="yoga">
</div>
<div>
<span class="item"> 독서 </span>
<input type="checkbox" name="hobby" value="reading">
</div>
<div>
<input type="button" id="selectBtn" value="취미 선택">
</div>
<div id="contents"> 결과 </div>
</body>
메소드 체이닝
add(selector 혹은 elements 혹은 htmlString)
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("div").addClass('redBorder')
.add("p") //redBorder를 추가한거에 p태그를 추가
.addClass('yellow'); //redBorder를 추가한거에 p태그를 추가한거에 yellow를 추가
//redBorder먼저 적용하고, p태그를 데려왔기 때문에 p태그에 redBorder는 적용되지 않음.
});
});
</script>
</head>
<body>
<div></div> <div></div> <div></div>
<p> redBorder 클래스의 적용은 받지 못하고 yellow 클래스의 적용 받음</p>
<button> 클릭 </button>
</body>filter(selector 혹은 function)
<script type="text/javascript">
$(function() {
$("div").css("background", "yellow")
.filter(function(index) { //익명함수
return index == 1 || $(this).attr("id") == "fourth";
})//div요소들 중에 두번째나, 네번째에만 고를래
.css("border-color", "red"); //고른애들 border줄래
});
</script>
</head>
<body>
<div id="first"></div>
<div id="second" class="middle"></div>
<div id="third" class="middle"></div>
<div id="fourth" class="middle"></div>
<div id="fifth" class="middle"></div>
<div id="sixth"></div>
</body>
$(function() { //자동실행
$("div").css("background", "yellow")
.filter(".middle") //가운데에있는 애들은 필터링할게~
.css("border-color", "red"); //방금 필터링한 애들만 border줄게~
});
not(selector 혹은 elements 혹은 function) : 선택된 엘리먼트들 중 표현식을 만족하지 않는 엘리먼트 얻기
slice(begin, end) : 선택된 엘리먼트들 중 원하는 범위의 엘리먼트만 반환하기(begin 이상 end 미만)
$(function() { //자동실행
$('button').click(function(){ //버튼 클릭되면 시행해
//셀렉터로 얻어낸 확장 집합 객체가 여러 번 사용될 경우에는 변수에 저장해 둔다.
var $div = $('div'); //div선택해서 요소를 변수($div)에 담고
//div 엘리먼트 중에서 2 이상 3미만, 인텍스가 0부터 시작하기에 세번째 엘리먼트만 반환
$div.slice(2, 3).css('background', 'yellow'); //2~2번요소에 적용
//end가 생략된 상태에서 begin만 기술하면 begin부터 끝까지
$div.slice(4).css('background', 'pink'); //4번 이후부터 끝까지 적용
});
});children() : 해당 엘리먼트의 자식 엘리먼트들 찾기
contents() : 해당 엘리먼트 내부 탐색 및 내용 변경하기
$("div").contents().remove("span"); //div의 컨텐츠중에 span을 지워remove() : 껍데기까지 다 지움
empty() : 알맹이만 지움
clone() : 복제
next() : 해당 엘리먼트 뒤에 위치하는 형제 엘리먼트 찾기
nextAll() : 해당 엘리먼트 뒤에 있는 모든 엘리먼트 찾기
prev() : 해당 엘리먼트 앞에 있는 형제 엘리먼트 찾기
prevAll() : 해당 엘리먼트 앞에 있는 모든 형제 엘리먼트 찾기
siblings() : 해당 엘리먼트와 같은 레벨의 모든 엘리먼트 찾기
$(".hilite").siblings().css("color", "red").length;parents() : 모든 조상 엘리먼트 찾기
parent() : 가장 인접한 부모 엘리먼트 찾기
find() : 선택된 엘리먼트들 중에서 원하는 엘리먼트 얻기
map(fn) : 선택된 엘리먼트들의 내용을 변경
andSelf() : 현재 설정 스택에 요소의 이전 설정을 추가
end() : 체인을 통해 확장집합을 생성할 경우 최조의 요소로 돌아감
'프론트' 카테고리의 다른 글
| JQuery 이벤트, 효과 (0) | 2022.09.05 |
|---|---|
| JQuery Attribute (0) | 2022.09.05 |
| Javascript 스크립트 작성 방식 (0) | 2022.09.04 |
| JavaScript 문서 객체(DOM) (0) | 2022.09.03 |
| JavaScript 객체, 배열, 내장 객체, 브라우저 객체 (0) | 2022.08.31 |