JQuery API Document 참조
$('선택자').함수();
- $ 기호는 제이쿼리를 의미
- 선택자를 이용하여 원하는 HTML 요소를 선택하고 함수를 정의하여 선택 된 요소에 원하는 동작을 설정할 수 있다.
< 속성탐색 선택자 >
// 태그[속성=값]
$('input[type=text]').val('아이티윌');
// 태그[속성^=값] (값으로 시작하는 속성을 찾음)
$('input[type=password]').val('1234');
$('input[type^=p]').val('12345678');
< 위치 탐색 선택자 >
// first(처음) / last(끝)
// odd(홀수) / even(짝수)
$('tr:first').css('background','red');
$('tr:odd').css('background', 'pink'); // 홀수 - pink
$('tr:even').css('background', 'orange'); // 짝수 - orange
< 배열 사용 >
// 배열을 사용하여 다르게 적용
var cArray = ['orange','yellow','grey']
$('h2').css('color', function(index){
return cArray[index];
});
< css 속성을 여러가지 사용 >
$('h2').css({
color : "green",
backgroundColor: "yellow"
});
< attr('속성', '값'); >
// 1번 그림의 이름
$('img#img1').attr('src');
$('img').attr('border','5');
< html( ) , text( ) >
- html( ) : 대상 요소의 첫 데이터 하나만 가져오기
- text( ) : 대상 요소의 모든 데이터를 가져오기
$('h2').html();
$('h2').text();
- 안에 데이터를 담으면 선택자에 해당하는 태그의 내용이 모두 변경됨.
$('h2').html("testMSG");
$('h2').text("MSGtest");
- 데이터 입력시 html( ) : 태그인 경우 태그를 적용
- 데이터 입력시 text () : 문자 그대로를 적용
=> 태그를 넣을 땐 html()을 사용. text는 태그도 텍스트 그대로 출력됨!
< append / prepend >
- append : 요소의 뒤에 추가
- prepend : 요소의 앞에 추가
$('body').append("<h2>안녕하세요 append</h2>");
$('body').prepend("<h2>안녕하세요 prepend</h2>");
< each >
- 각각의 요소에 실행
// $(요소).each(function(){});
// $.each(요소, function(){});
var arr = [
{name : "학생1", addr : "부산"},
{name : "학생2", addr : "서울"},
{name : "학생3", addr : "제주"}
];
$(arr).each(function(i,e) {
$('table').append(function() {
return "<tr><td>"+e.name+"</td><td>"+e.addr+"</td></tr>";
});
});
< setInterval >
- 일정 시간마다 반복
setInterval(function() {
$('body').append($('img').first());
}, 2000); // 시간 2초로 설정
// => 제일 앞에 있던 이미지가 2초마다 제일 뒤로 옮겨짐
< addClass >
- 요소에 클래스 추가
$('h2').each(function(idx){
$(this).addClass('high_'+idx);
});
// -> h2 태그에 순서대로 high_0, high_1 .. 과 같이 클래스 추가
* this 레퍼런스 : 사용자가 페이지에 방문해서 등록된 이벤트를 발생할 때 마다 해당 이벤트가 발생한 요소를 가리킴
< bind >
- 여러 이벤트에 적용
// bind는 여러개 동작에 지정 가능
$('h2').bind('click, keyup',function(){
});
< 메서드 체이닝 사용 >
$('img').mouseover(function() {
$('img').attr('src','../jq/2.jpg');
});
$('img').mouseout(function() {
$('img').attr('src','../jq/1.jpg');
});
// 메서드 체이닝 사용해 표현 =>
$('img').mouseover(function() {
$('img').attr('src','../jq/2.jpg');
}).mouseout(function() {
$('img').attr('src','../jq/1.jpg');
});
< keyup >
// 화면에 입력 가능한 글자 수(200) 출력
// 초과하면 빨간색으로 글자 수 출력
$('textarea').keyup(function() {
// 기준(200)-입력가능한 값 화면에 출력
var result = 200 - $('textarea').val().length;
$('#len').html(result);
// 입력된 글자수가 200자 이상 빨간색 출력
if(result < 0) {
$('#len').css('color','red');
// " 이하 검정색 출력
} else {
$('#len').css('color','black');
}
});
< submit >
// 폼이 submit될 때 아이디와 pw 입력 여부 확ㅇㄴ
$('form').submit(function(){
if( $('#id').val() =="" ){
alert("아이디를 입력하세요");
$("#id").focus();
eturn false;
}
if( $('#pw').val().length <=0){
alert("비밀번호를 입력하세요");
$('#pw').focus();
return false;
}
});
< 효과 >
- show() / hide() / toggle()
- slideDown() / slideUp() / slideToggle()
- fadeIn() / fadeOut() / fadeToggle()
// $(요소).toggle("속도",콜백함수);
// 콜백함수 : 적용하려는 효과가 모두 실행된 후에 동작하는 함수
$('div').toggle("slow",function(){
alert("토글 끝!");
});
참조
'2. Front-end > 2-3. Java Script' 카테고리의 다른 글
JS - [ 이클립스에서 JS 자동완성 사용하기 ] (0) | 2022.04.25 |
---|---|
JQuery- [ 라이브러리(slick) 설치 ] (0) | 2022.04.23 |
JQuery - [ 설치 ] (0) | 2022.04.20 |
JS - [객체의 종류] (0) | 2022.03.14 |
JS - [위치 정보 받아오기(getCurrentPosition) / Weather 기능] (0) | 2022.03.03 |