Jquery 기본 속성

문서의 시작

- jquery가 본문 내용을 먼저 읽고 실행 할 수 있도록 작성해주어야 하는 함수

$(document).ready(function(){

=> 이 안에 모두 작성

})

=> 아래처럼 간략하게 사용 가능
$(function(){

})

 

 

기본 작성 방법

- css 사용법과 비슷하게 id, class, 태크 요소를 선택하여 사용할 수 있다.

//요소를 지정하여 css 속성 변경하기
$('h1').css('color', 'orange')

$('p').css({
  'border': '1px solid red',
  'width': '100px'
})


// nth-child 요소 지정
$('ul li:first-child') 첫번째 자식 요소 선택
$('ul li:last-child') 마지막 자식 요소 선택

$('ul li:first') 모든 요소 중 첫번째 요소
$('ul li:last') 모든 요소 중 마지막 요소

$('li:not(:first)') li 요소 중에 첫번째가 아닌 요소 전부 선택


// nth-child의 공식
:nth-child( -n+5 ) 자식요소 1번부터 5번까지 선택
:nth-child( n+5 ):nth-child( -n+9 ) 자식요소 5번부터 9번까지 선택
:nth-child( n+9 ) 자식요소 9번부터 끝까지 선택
=> n의 자리에는 정수가 차례대로 대입된다.(1, 2, 3, 4 ...)


// 인덱스 번호로 요소 지정
$('li').eq(n) 인덱스 n번째의 li요소 선택


// 특정 부분만 선택
$(#ul li:lt(3))
=> lt < 3 : 0부터 시작하여 3미만으로 선택


// 주변 요소 선택
.next() 선택자 다음 요소
.parent() 선택자 부모 요소
.child() 선택자 직계 자식 요소
.find() 선택자 자식 요소 중 찾기
.siblings() 선택자 형제 요소


// 현재 선택된 요소
$(this)


// 속성값으로 찾기
a[abc] abc 속성을 포함한 a
a[href^='abc'] href의 속성값이 abc로 시작하는 a
a[href$='abc'] href의 속성값이 abc로 끝나는 a
a[href*='abc'] href의 속성값이 abc를 포함하는 a

 

 

기본 함수

.text()
=> 안에 값을 비워두면 선택한 요소 내부에 텍스트를 전부 가져옴.
=> 값을 넣어주면 선택한 요소에 텍스트 삽입.

.attr('class')
=> 값을 한개만 적으면 속성의 값을 가져옴.
.attr('class', 'on')
=> 값을 2개 적으면 속성의 값을 바꿈.

.animate({
  속성: '값'
},시간)
=> 애니메이션 효과 적용

.delay()
=> 애니메이션 효과 딜레이 제어

.on('click',function(){})
.click(function(){})
=> 클릭 이벤트 적용

.dblclick()function({})
=> 더블클릭 이벤트

.toggle()
=> 하나의 반대의 기능을 주는 특징
=> display:none; 상태의 요소에게 토글하면 block으로 바뀌고 
다시 눌렀을때 none으로 바꾸는 작업을 자동으로 수행해 줌

.slideToggle('slow', function(){})
=> 하나의 요소에 slideUp/Down 기능을 자동으로 넣어 줌

.toggleClass()
=> 클래스를 자동으로 붙였다가 뗐다가 해줌

.slideUp()
.slideDown()
=> 슬라이드 효과를 주는 함수 ()괄호 안에 'fast', 'slow', 1000=1초 로 작성 가능
=> 속성 자체에 display 속성을 none/block 시키는 기능이 있음.

.hide()
.show()

.fadeIn()
.fadeOut()

.mouseover()
.mouseout()

.mouseenter()
.mouseleave()

.bind('click focus', function(){}) 
=> 이벤트를 여러개 동시 지정 가능

.hover()

.stop() 오류로 인해 자동 작동하는것을 방지하기 위해 작성
=> slideUp/Down, hide/show, fadeIn/Out 등과 함께 작성

.after('abc')
.before('abc')
=> 지정한 요소 박스 바깥쪽에 요소의 제일 마지막/처음 위치에 abc 추가

.append('abc')
.prepend('abc')
=> 지정한 요소 박스 안쪽에서 요소의 제일 마지막/처음 위치에 abc 추가

// apprend 와 appendTo
add.append('abc') => add의 마지막 요소로 'abc' 추가
$('abc').appendTo(add) => 'abc'를 add의 마지막 요소로 추가
--> 결과는 같으나 쓰는 순서가 다름.

p.insertAfter('h2') h2뒤에 p를 추가
p.after('h2') p를 h2뒤에 추가

.remove() 요소 완전 삭제

.addClass('abc') abc값의 클래스 추가
.removeClass('abc') abc값의 클래스 삭제

// a와 같은 요소 자체에 발생되느 속성을 제어
a.click(function(e){
  e.preventDefault()
})

a.click(function(){
  return false
})

.each(function(){})
=> 반복문 / 선택한 요소의 갯수만큼 알아서 반복 실행

.size() 선택한 요소의 갯수를 뽑아내 줌

.length() 선택한 요소의 갯수, 길이 뽑아내기

.is(':visible')
=> 현재 요소가 보이는 상태인지 확인. 보이면 true값을 반환
if문과 같이 사용하여 보이면 숨기로 안보이면 보이는 효과를 줄 수 있음

input.val('') input 요소의 value 값을 초기화 하는 기능

.clone() 선택 요소 복사본 만들기

.detach() 선택 요소 잘라내기

.replace('abc','efg') 요소의 속성 값 abc를 efg로 변경

.substr(2,1) 문자 속성 값을 몇번째부터 몇개 뽑아낼지 정함
=> 인덱스 2번 부터 1개  추출 : 인덱스 2번째 글자 뽑아냄.

Number() / parseInt()
=> 문자열인 숫자를 정수값으로 변환 함.
=> parseInt는 문자가 섞여 있어도 숫자만 뽑아내 변환시켜 줌.

.trigger('event') 이벤트를 강제 발생 시킬 수 있는 함수

.focus() 포커스 되도록 만들 수 있음

$(window).scroll(function(){}) 스크롤 될 때마다 이벤트 발생

$('html, body').animate({scrollTop:$(this).offset().top},1000)
=> offset().top : 요소의 스크롤 top 위치-> 브라우저 상단에서부터 떨어져 있는 거리 값
=> body가 지정한 해당 요소로 위치로 scroll되도록 애니메이션 효과 지정

$(window).scroll(function(){
  if($(this).scrollTop() >= 650 ) {}
})
=> if문을 사용하여 특정 위치에 왔을 때 이벤트가 발생하도록 작성 가능

.on('mousewheel', function(){
  return false
})
=> 마우스 휠 이벤트를 발생하는데 값을 false를 주어 스크롤을 잠금.