:has()
:has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다.
문법
$( ':has(selector)' )
예를 들어
$( 'p:has(span)' )
은 span 요소를 가지고 있는 p 요소를 선택합니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$( document ...
:nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다.
문법
$( ':nth-child(an+b)' )
a와 b는 상수, n은 변수입니다.
n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다.
an+b 대신에 even, odd를 사용할 수 있습니다.
예제
$( 'ol li:nth-child(2)' )
ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다.
<!doctype html>
<html lang="ko">
<head>
...
jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다.
다른 라이브러리와 충돌
다른 버전의 jQuery와 충돌
각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다.
다른 라이브러리와 충돌
jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...
상단 고정 메뉴
웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...
:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다.
예제 1 - 라디오 버튼
색을 선택하면, div 요소의 배경색을 바꾼다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
* {
...
.insertAfter()는 특정 요소 뒤에 요소를 추가 또는 이동한다.
문법
h1 요소 뒤에 <p>World</p>를 추가한다.
$( '<p>World</p>' ).insertAfter( 'h1' );
h1 요소 뒤로 p 요소를 이동한다.
$( 'p' ).insertAfter( 'h1' );
예제 1
h1 요소 뒤에 <p>World</p>를 추가한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
...
jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다.
$( 'meta' ).attr( 'content' );
meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<meta name="author" content="JB">
<meta property="og:image" content="abc.png">
...
.prepend()
.prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다.
문법
.prepend( content )
예를 들어
<p>Lorem Ipsum Dolor</p>
가 있을 때
$( 'p' ).prepend( '123 ' );
라고 하면
<p>123 Lorem Ipsum Dolor</p>
으로 출력됩니다.
예제 1
순서 없는 목록 처음에 Dolor를 추가합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
...
.text()
.text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.
문법 1
.text()
선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어
var jb = $( 'h1' ).text();
는 h1 요소의 내용을 변수 jb에 저장합니다.
문법 2
.text( textString )
이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어
$( 'div' ).html( '<h1>Lorem</h1>' );
는 div ...