$(선택자).val();
input과 같은 value 값을 가져올 수 있다.
$(선택자).val("설정할 값");
input과 같은 곳에 value 값을 설정할 수 있다.
// input value 설정 및 가져오기
// val()
function getValue(){
let value = $('input').val() // 가져올때는 val()함수에 값만 비워두면 된다
alert(value)
}
function setValue(){
$('input').val('다른 글자로 설정!')
}
💫 style & 속성(attr) 변경하기
$(선택자).css("속성","속성값")
// 여러 요소에 한번에 적용됨
$('button').css('color','red')
// js와 jq 비교
function submitjs(){
// <div id="div1"></div>
document.getElementById('div1').innerText='반갑습니다!'
document.getElementById('div1').setAttribute('style','border: 2px solid red')
}
function submitjQ(){
$('#div1').text('hello jQuery')
$('#div1').css('border', '3px dotted blue')
}
// css()
function changeCSSJS(){
let span = document.querySelector('span')
span.style = 'font-size:20px; color:red;'
}
function changeCSSJQ(){
$('span').css('font-size','40px')
$('span').css('color','blue')
}
// attr()
function changeAttrJS(){
let a = document.querySelector('a')
a.setAttribute('href','https://www.naver.com')
}
function changeAttrJQ(){
$('a').attr('href','https://www.daum.net')
}
💫 text 변경하기
//text()
function changeTextJS(){
let p = document.querySelector('.p-text')
p.innerText='js로 바꾼 내용입니다.'
}
function changeTextJQ(){
$('.p-text').text('jQ로 바꾼 내용입니다.')
}
💫 HTML 변경하기
//HTML()
function changeHTMLJS(){
let p = document.querySelector('.p-html')
p.innerHTML ='<em>javascript</em>'
}
function changeHTMLJQ(){
$('.p-html').html('<h2>jQuery</h2>')
}
💫 요소 추가
//append() 선택된 요소의 자식 요소 중 마지막으로 추가
function appendJS(){
let ul = document.querySelector('.colors')
let li = document.createElement('li')
li.innerText='마지막 자식으로 추가된 li (js)'
ul.append(li)
}
function appendJQ(){
$('.colors').append('<li>마지막 자식으로 추가된 li (jquery)</li>')
}
//prepend() 선택된 요소의 자식 요소 중 첫번째로 추가
function prependJS(){
let ul = document.querySelector('.colors')
let li = document.createElement('li')
li.innerText='첫번째 자식으로 추가된 li (js)'
ul.prepend(li)
}
function prependJQ(){
$('.colors').prepend('<li>첫번째 자식으로 추가된 li (jquery)</li>')
}
//after() 선택된 요소의 "형제" 요소로 다음 형제로 추가
function afterJS(){
let green = document.querySelector('.green')
let newAfter = document.createElement('li')
newAfter.innerText='after (js)'
green.after(newAfter)
}
function afterJQ(){
$('.green').after('<li>after (jquery)</li>')
}
//before() 선택된 요소의 형제 요소로 이전 형제로 추가
function beforeJS(){
let green = document.querySelector('.green')
let newBefore = document.createElement('li')
newBefore.innerText='before (js)'
green.before(newBefore)
}
function beforeJQ(){
$('.green').before('<li>before (jquery)</li>')
}
💫 요소 삭제
// remove() 선택된 요소를 DOM트리에서 삭제
function removeJS(){
let li2 = document.querySelector('.li2')
li2.remove()
}
function removeJQ(){
$('.li2').remove()
}
// empty() 선택한 요소의 자식 요소를 모두 삭제, 선택된 요소는 남아있고 그 안이 다 비워진다
function emptyJS(){
let nums = document.querySelector('ul.nums') // 일치 선택자
nums.innerHTML=''
}
function emptyJQ(){
$('ul.nums').empty()
}
💫 요소 탐색
// 요소 탐색하기
// 바로 위에 존재하는 하나의 부모 요소 선택
function findParent(){
console.log($('.child2').parent())
}
// 바로 위 부모뿐만 아니라 부모의 부모, "모든 조상"을 선택
function findParents(){
console.log($('.child2').parents())
}
// 선택된 요소 바로 다음에 위치한 형제 요소 선택
function findNext(){
console.log($('.child2').next())
}
// 선택된 요소 바로 이전에 위치한 형제 요소 선택
function findPrev(){
console.log($('.child2').prev())
}
// 선택된 요소의 자식 요소 모두 선택
function findChildren(){
console.log($('.parent').children())
}
💫 클래스 조작하기
// 클래스 조작하기
// 선택된 요소에 클래스 추가
function addClass(){
$('#hi').addClass('fs-50')
}
// 선택된 요소에 클래스 삭제
function removeClass(){
// $('#hi').removeClass('color-blue')
// hi id에 달려있는 모든 클래스 제거
$('#hi').removeClass()
}
// 선택된 요소에 클래스가 있는지 여부 확인. Return 값은 true 와 false 로 나온다.
function hasClass(){
console.log($('#hi').hasClass('fs-50'))
}
//선택된 요소에 클래스가 있으면 추가, 없으면 삭제
function toggleClass(){
$('#hi').toggleClass('bg-pink')
}
2. jQuery 이벤트 리스너
// JS
console.log(window)
console.log(document)
// JQ
console.log($(window))
console.log($(document))
window: 브라우저 창을 나타내는 전역 객체
document: window 객체의 속성 중 하나, 웹 페이지의 내용을 나타내는 객체.
💫 마우스 이벤트
// click(): 클릭했을 때
// jQuery에서는 이벤트 이름으로 메서드가 존재함
// 요소.click(function(){}), 요소.hover(function(){}, function(){}) << hover의 경우 function이 두개이다.
$('.p-msg').click(function(){
$('.p-msg').css('color','red')
})
$('.num').click(function(){
$('.num').css('color', 'blue')
// $(this).css('color', 'green') // 자기 자신을 가리킴 (하나씩 색상 변경)
}) */
/* $('.num').on('click',function(){
$(this).css('color','pink')
})
// in JS (19~21 라인까지의 동작과 동일)
let nums = document.querySelectorAll('.num') // 노드리스트로 불려와서 바로 addEventListener를 사용할 수 없다
for(let i=0; i<nums.length; i++){
console.log(nums[i]) // nums의 i번째
nums[i].addEventListener('click',function(){
this.style.color = 'blue'
})
}
// hover(): 마우스를 올렸을 때, 마우스를 떼었을 때 정의
$('.div-hover').hover(function(){
$(this).addClass('hover')
},
function(){
$(this).removeClass('hover')
}
)
$(window).scroll(function(){
console.log('scrolling....')
})
기준점 - max-width: XXXpx - XXXpx 이하일 때, - 가장 큰 사이즈 먼저 제작 후 -> mobile 사이즈 제작 - min-width: XXXpx - XXXpx 이상일 때, - 가장 작은 사이즈부터 먼저 제작 후 -> PC 사이즈 제작 - tablet, PC, mobile 세 사이즈를 고려해야 함
