이번에는 제이쿼리이다. 제이쿼리는 자바스크립트 라이브러리이다.
– 클래스는 <div class=”sth”> 으로 표현되고 .sth 로 선택할 수 있다. 클래스는 닷이다! …
– $사인은 jQuery랑 똑같다. $(‘tag’), $(‘class’) $(‘id) 등으로 해당 DOM에 접근할 수 있다.
– val 은 해당 엘리먼트에 접근해서 값을 가져오게 한다.
$(‘#input’).on(‘change’, function() {
var val;
val = $(‘input’).val();
$(‘h1’).text(val);
});
이렇게 하면 input 값을 h1 태그에 세팅해 준다.
자세한건 위의 링크 참조!
– 제이쿼리에서는 for 구문이 매우 간단해졌다. each() 로 간단하게 해결 완료! 아래는 p 태그에 접근 한 후 p 태그의 텍스트의 길이를 읽고 그 길이를 반환해 준다.
function numberAdder (){
var text, leng;
text = $(this).text();
leng = text.length;
$(this).text(text + ” ” + leng);
}
$(‘p’).each(numberAdder);
– 이번에는 $ 사인 안에 펑션을 넣어 페이지가 로드할 때 실행되게 하는 코그이다. 함수를 인자로 넣어서 전달 했다.
$(function () {
$(‘img’).attr(‘src’, ‘https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQPyCR1adzw9IHz1ViKDA4SluzhFiBeWpDK3sOyuoIeuDLyColW’);
});