728x90 300x250 SMALL javaScript/jQuery148 [jQuery] 클릭한 요소 텍스트 수정 html 추가 수정 jQuery var $member=null; var $memberName=null; var $clickItem=null; $(document).ready(function(){ init(); initEvent(); }) function init(){ $member=$(".member"); $memberName=$("#memberName"); } function initEvent(){ $("#add").click(function(){ add(); }) $("#modify").click(function(){ //수정버튼을 클릭하면 modify함수 실행 modify(); }) $member.on("click","li",function(){ addClass($(this)); }) } funct.. 2023. 2. 6. [jQuery]아직 존재하지 않는 요소 이벤트 등록(라이브 방식) 라이브 방식 이벤트 등록 라이브 방식으로 이벤트를 등록하면 아직 존재 하지 않는 요소에 이벤트를 등록할 수 있다. 만약 click 이벤트를 사용하면 요소가 동적으로 추가 또는 삭제 될 경우 이벤트도 같이 등록 또는 제거를 해줘야 하기 때문에 번거롭다. 이럴때 사용할 수 있는 기능이 라이브 이벤트 등록이다. $대상.on("이벤트명","대상자식노드", 이벤트리스너(){ }) 위의 구문을 실행하면 $대상의 자식노드중에서 대상자식노드에만 이벤트를 등록한다는 뜻이된다. var $member=null; var $memberName=null; var $clickItem=null; $(document).ready(function(){ init(); initEvent(); }) function init(){ $membe.. 2023. 2. 5. [jQuery]선택한 리스트에 클래스 추가 html 추가 js var $member=null; var $memberName=null; var $clickItem=null; $(document).ready(function(){ init(); initEvent(); }) function init(){ $member=$(".member"); $memberName=$("#memberName"); } function initEvent(){ $("#add").click(function(){ add(); }) $member.on("click","li",function(){ //생성된 li를 클릭하기 때문에 on메서드 사용 addClass($(this)); }) } function addClass($item){ if($clickItem!=null){ $clic.. 2023. 2. 3. [jQuery]input 입력 값 받아서 리스트로 등록 input 텍스트에 입력 하고 "추가"버튼 클릭 시 member 태그 안에 리스트 생성해서 제일 마지막에 추가 html 추가 js $(document).ready(function() { $("#add").click(function(){ memberName = $("#memberName").val(); //입력값 memberName 변수에 저장 $(".member").append(`${memberName}`) //append 메서드로 .member 마지막에 추가 }) }); 위에 같이 작성해도 동작은 하지만 ready메서드에 직접 작성하지 않고 효율성을 위해 기능별로 함수를 활용해 정리 해주면 아래와 같이 작성할 수 있다. js var $member=null; var $memberName=null; $(d.. 2023. 2. 2. 이전 1 ··· 19 20 21 22 23 24 25 ··· 37 다음 728x90 반응형 LIST