이것저것

on() 함수  1. 비동적 $("요소").on("이벤트", function() { ... 이벤트 처리 ... }); 2. 동적 앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의해 놓는 기능이다. 새로 추가될 요소에 대한 이벤트이기 때문에 이 이벤트가 정의되는 시점에서는 대상이 존재하지 않기 때문에, 이 이벤트는 document 객체에 설정해야 한다.  $(document).on( "이벤트", "셀렉터",  function() {       ... 이벤트 처리 ... });load() 읽어오고자 하는 대상의 내용이 단순한 text나 html 태그를 표현하며  읽어온 내용을 특정 요소에 출력하는 것만을 목적으로 할 경우 load() 함수를 사용해 코드를 축약할 수 있다.  $("CSS셀렉터").loa..

bind 함수 기본 형식 $("요소").bind("이벤트", function() {     ... 이벤트 처리 ... });$('#login').bind('submit', function(){ $('#pwdDiv').empty(); 이벤트 이름을 공백으로 구분하여 여러개 지정 $("요소").bind( "이벤트1 이벤트2 이벤트3", function() {     ... 이벤트 처리 ... }); $('#login').bind('submit click', function(){ $('#pwdDiv').empty(); JSON 형식$("요소").bind({     "이벤트1" : function() { ... 이벤트 처리 ...},     "이벤트2" : function() { ... 이벤트 처리 ...}, ..

Append A.append(B) -> A에 B를 추가한다. B.appendTo(A) -> B를 A에 추가한다.항상 뒤에 추가된다. 예시let i=1; $('input:eq(0)').click(function(){ let li1 = $('').css('color', 'red').html('추가 항목' + (i++)); let li2 = $('').css('color', 'red').html('추가 항목' + (i++)); let li3 = $('').css('color', 'red').html('추가 항목' + (i++)); // li 추가 $('ul').append(li1); $('ul').append(li2); $(li3).appendTo('ul');});$('input:eq(1)').click(f..

이미지HTML HTML5 jQuery BootStrap JavaScript $('.collapsible:eq(0) h2 a').addClass('selected');let file = $('.collapsible:eq(0) h2 a').attr('href');$('.content:eq(0)').load(file);$('.collapsible').not(':eq(0)').find('.content').hide();$('.collapsible .title a').click(function(){ $(this).toggleClass('selected'); $('.title a').not(this).removeClass('selected'); let target = $(this).pare..

요소의 탐색과 생성 jQuery는 특정 HTML 요소에 대한 객체를 기준으로 그 주변 요소나 태그의 트리 구조를 탐색할 수 있다. jQuery는 웹브라우저에 보여지는 HTML 태그 안에 HTML 요소를 생성하여 포함시키도록 하는 기능을 지원한다. DOM (Document Object Model)  DOM은 HTML과 XML 문서에 대한 구조적 정보를 제공하는 양식이다. 즉, DOM이 HTML과 XML 문서의 뼈대를 의미한다. DOM은 문서구조나 외양 및 내용을 바꿀 수 있도록 프로그램에서 접근할 수있는 방법을  제공하는 인터페이스를 말한다.DOM은 프로퍼티와 메소드를 가지는 객체와 노드의 트리형 구조로 표현되는데, 이 구조는 스크립트나 다른 언어에서 웹페이지에 접근할 때 필수적이다. DOM의 구성요소 E..

애니메이션 모든 애니메이션 관련 함수들은 시간값 외에 두 번째 파라미터로 함수를 지정할 수 있다. 이 함수들에 애니메이션 처리가 종료된 후에 동작할 내용을 담는다. 예) show(time [, function() {......}]); $('#view').hide(500, function(){ $('#view img').attr('src', href); // href를 $(this).show(500); //0.5초동안 보여라})animate() 함수를 사용한 CSS 속성의 애니메이션 처리  좀 더 다이나믹한 애니메이션을 구현할 수 있다. animate() 함수는 수치값을 지정하는 CSS 속성들을 제어하여 애니메이션 효과를 만들어 낸다.  구조 animate(properties [, duration..

$(this) $(this)는 클릭한 자기 자신을 의미한다.id 속성은 가장 첫번째거 하나만 수정된다.class 속성은 모든 class 속성이 수정된다. (동시에 모든클래스가 변경된다)모든 .multiButton 바꾸기 $('.multiButton').html('감사합니다') 모든 .multiButton 중에서 클릭한 요소만 바꾸기 --> this 사용 클릭된 .multiButton 만 바꾸기 $(this).html('감사합니다')$('.multiButton').click(function(){ $(this).html('감사합니다')});this vs $(this) 제이쿼리 선택자는 제이쿼리 객체로 묶어버려서 object 형식으로 나타난다.그래서 제이쿼리 선택자에서 DOM으로 다시 접근한 다음 지정해줘야 ..

slide() slideUp(), slideDown(), slideToggle()은 반드시  태그에 width, height 속성을 주어야 한다 그렇지 않으면 toggle()와 똑같은 동작을 한다  slideUp(speed) : speed값을 지정해서 슬라이드업 효과를 줄 수 있다speed : "slow" or "fast" or milliseconds(1/1000초)slide()특징slideUp 요소 기준 왼쪽 상단으로 올라간다.* 가로 세로 길이를 주면 커튼처럼 올라간다slideDown 요소 기준 왼쪽 상단에서 내려온다.fadeIn투명해지며 나타난다fadeOut투명해지며 사라진다slideToggle slideUp / slideDown 이 번갈아 가며 움직인다* 가로 세로 길이를 주면 커튼처럼 올라간다 ..

스타일 지정 속성값 읽기 var 변수명 = $("요소").css("CSS 속성이름"); 속성값 변경 및 추가하기 $("요소").css("속성이름", "값"); $("요소").css({     "속성1이름": "값",     "속성2이름": "값",     "속성3이름": "값" });$(this).css("background-image",'none')   클래스 속성 지정  속성 지정특징.hasClasscss 클래스 적용 여부 확인.addClass클래스 추가.removeClass클래스 삭제.toggleClass적용 해제 자동 반복클래스 있음 -> 삭제클래스 없음 -> 추가 CSS 클래스의 적용 여부 알기 var 변수 = $("요소").hasClass("클래스이름"); 클래스의 적용과 해제 $("요소")...

attr() / prop() jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다. 이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다.  attr()  HTML에 작성된 속성값을 문자열로 받아온다즉, 속성 값을 가져온다.attr = # attr = http://www.naver.com[형식] 1. 속성값 가져오기 var 변수명 = $("요소").attr("속성이름");2. 속성값 넣기 $("요소").attr("속성이름", "값"); $("요소").attr({         "속성1이름": "값",         "속성2이름": "값",         "속성3이..