jQuery 기본 문법(초급편)
16728 단어 jQuery
script.js 로드
jQuery를 사용하려면 jQuery 라이브러리를 로드해야 합니다. 라이브러리는 인터넷을 통해 읽는 것이 일반적입니다. head 태그 안에서 아래 그림과 같이 URL을 읽어들입니다.
script는 CSS 파일의 로드와 같이 head 태그 안에도 쓸 수 있습니다만, body 종료 태그의 직전에 쓰는 것으로, WEB 페이지의 표시 속도를 보다 빨리 할 수 있습니다.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Hello, World</h1>
<!-- script.jsの読み込み -->
<script src="script.js"></script>
</body>
</html>
hide 메소드
요소를 숨깁니다.
script.js
$(function() {
$('h1').hide();
});
fadeOut
script.js
$(function() {
// 以下で、fadeOutメソッドを用いて<img>要素を隠す
$('img').fadeOut();
//slideUpメソッドも後ろの()内に引数として、アニメーションの速度を指定できます。
$('img').fadeOut(1500);
// 以下で、slideUpメソッドを用いて<p>要素を隠す
$('p').slideUp();
});
HTML ID, 클래스를 숨깁니다.
script.js
$(function() {
// slideUpメソッドを用いて、「#title」の要素を隠す
$('#title').slideUp();
// fadeOutメソッドを用いて、「.lesson-item」の要素を隠す
$('.lesson-item').fadeOut();
});
fadeIn 메서드
css의 display: none;으로 숨긴 요소를 show 메소드, fadeIn 메소드로 표시한다.
script.js
$(function() {
// showメソッドを用いて、「#title」要素を表示してください
$('#title').show();
// fadeInメソッドを用いて、「#image」要素を表示してください
$('#image').fadeIn();
});
click 이벤트
이벤트 구문은 $('선택기'). 이벤트 이름(function(){ });과 같이 씁니다.
script.js
$(function() {
// 「#hide-text」要素に対するclickイベントを作成してください
$('#hide-text').click(function() {
$('#text').slideUp();
});
});
CSS 방법
css 메서드에서 요소의 문자 색상을 변경하려면 $('선택기').css('color', 'red'); 와 같이 설명합니다. width나 font-size 등 다른 프로퍼티도 모두 css 메소드로 변경할 수 있습니다.
script.js
$(function() {
// 「#change-css」要素に対するclickイベントを作成してください
$('#change-css').click(function() {
$('#text').css('color', 'red');
$('#text').css('font-size', '50px');
});
});
HTML 변경(1)
text 메소드
jQuery에서는 CSS뿐만 아니라 text 메소드를 사용하여 HTML 자체를 변경할 수도 있습니다. text 메소드는, $('셀렉터').text('다시 쓰는 캐릭터 라인'); 과 같이 기술합니다.
script.js
$(function() {
// 「#change-text」要素に対するclickイベントを作成してください
$('#change-text').click(function() {
$('#text').text('ようこそ、Progateへ');
});
// 「#change-html」要素に対するclickイベントを作成してください
$('#change-html').click(function() {
$('#text').html('<a href="https://prog-8.com/">ようこそ、Progateへ</a>');
});
});
this 구문
여러 li 요소에 click 이벤트가 설정된 경우 클릭했을 때 실제로 클릭된 li 요소에만 처리를 수행할 수 있습니다. 이런 경우에는 this를 사용하여 실제로 이벤트가 발생한 요소를 가져옵니다.
script.js
$(function() {
// 「.list-item」要素に対するclickイベントを作成してください
$('.list-item').click(function() {
$(this).css('color', 'red');
});
});
변수와 메소드 체인
jQuery에서 변수 선언에는 var를 사용합니다.
script.js
$(function() {
$('.btn').click(function() {
// $('#title')を変数$titleに代入してください
var $title=$('#title');
// 「#title」に対する3つのメソッドを、変数を使って書き換えてください
$title.css('color', 'red');
$title.html('こんばんは、にんじゃわんこさん');
$title.fadeOut(1000);
// 「#text」に対する3つのメソッドを、メソッドチェーンを使って書き換えてください
$('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう！</h3>').fadeOut(1000);
});
});
find 메소드, children 메소드
script.js
$(function() {
$('#find-method').click(function() {
// findメソッドで、「#wrapper」内にあるすべての「a」要素を取得し、
// cssメソッドで文字の色をredに指定してください
$('#wrapper').find('a').css('color', 'red');
});
$('#children-method').click(function() {
// childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
// fadeOutメソッドで隠してください
$('#wrapper').children('a').fadeOut();
});
});
hover 이벤트
$('셀렉터').hover(마우스를 얹었을 때의 처리, 마우스를 떼었을 때의 처리); 와 같이 씁니다. click 이벤트와 달리 두 개의 인수를 작성한다는 점에 유의하십시오. 인수 사이는 쉼표로 구분합니다.
script.js
$(function() {
// 「#language-wrapper」にhoverしたときのhoverイベントを作成してください
$('#language-wrapper').hover(
function() {
$('.language-text').fadeIn();
},
function() {
$('.language-text').fadeOut();
}
);
});
Reference
이 문제에 관하여(jQuery 기본 문법(초급편)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/syuu1227/items/3316ce0175a5c875f085텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
