고똘이의 IT 개발이야기

JavaScript → (31)건

[Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함)

안녕하세요. 오늘은 제이쿼리(Jquery) text(), html() 이벤트에 대해서 알아보겠습니다. 저희가 웹 개발을 하면서 상당히 자주 쓰이게 되는 이벤트 입니다. - text()란? text()이벤트란 $(셀렉터).text() 셀렉터의 문자를 변경 해주는 것입니다. text()는 태그는 반영되지 않고 문자열로 표시가 됩니다. - text() 소스 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 버튼 클릭 함수 $("#testClick").click(function(){ // 'testText'라는 id의 텍스트를 '안녕하세요 김철수 입니다.'라고 변경. $("#testText").text("안녕하세요 김철수 입니다."); }); 안녕하세요. 홍길동입니다. ..
JavaScript 2020. 2. 19. 02:00

[Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단)

안녕하세요. 오늘은 제이쿼리 AJAX에 대해서 설명드리겠습니다. - AJAX란? Ajax란 (asynchronous Javascript and XML)의 줄임말 입니다. 자바스크립트를 이용하여 비동기 식으로 서버와 통신을 합니다. 비동기통신이기 때문에 서버에 요청이 가더라도 화면의 깜빡 거림이나 화면이 이동 된다는 느낌을 주지 않고 상당히 자연스럽고 빠르게 클라이언트의 화면을 변화 시켜줍니다. 최근에는 XML형식이 아닌 JSON형식을 더 많이 사용하고 있습니다. - AJAX의 장단점 ♣장점 ● 서버에서 처리가 완료될때까지 기다리지 않고 다른 프로세스를 진행할 수 있다. ● 비동기 방식이기 때문에 동기 방식과 다르게 UI를 변경할 수 있어서 장점이 된다. ● 웹페이지 속도향상. ♣단점 ● 연속으로 데이터를..
JavaScript 2020. 2. 14. 15:39

[Javascript/Jquery] 자바스크립트 onclick 이벤트 리스너 설명 및 소스(초간단)

안녕하세요. 오늘은 자바스크립트 onclick 이벤트에 대해서 설명드리겠습니다. - onclick 동작방식 ● 이벤트가 발생시 실행될 함수를 만들어줍니다. ● 엘리먼트(Element)에 onclick 이벤트를 명시해줍니다. ● 엘리먼트(Element)를 클릭할 경우 이벤트가 발생됩니다. - 소스 설명 ↓ 화면 구성 소스 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 // 성명을 클릭 했을때 동작하는 함수 function inp1Cli..
JavaScript 2020. 2. 13. 15:32

자바스크립트(JavaScript)란 무엇이며 특징 및 장단점(기초)

안녕하세요. 오늘은 자바스크립트(JavaScript)가 무엇인지 알아 보겠습니다. - 자바스크립트의 역사 1995년에 처음 만들어졌으며 모카(Mocha)라는 명칭으로 개발이 되었으나 추후 이 언어를 공식적으로 라이브스크립트(LiveScrip)로 불렀으며 나중에는 자바스크립트(JavaScript)라고 불리게 됩니다. - 자바스크립트(JavaScript)란? 자바스크립트(JavaScript)를 쉽게 설명하자면 저희가 웹(Web)에서 행하는 행동을 제어할 수 있는 객체(Object)기반의 스크립트 언어입니다. 객체(Object)라는 말이 조금 어렵게 느껴지시면 쉽게 말씀 드리자면 저희가 크롬, IE, 파이어폭스등 저희가 사용하면 인터넷 브라우저에서 버튼을 클릭하고 새로운 사이트로 이동하는 행위를 하는 기능을 ..
JavaScript 2020. 2. 12. 14:09

[ Jquery ] 제이쿼리 addClass(), removeClass() 설명 및 예제(간단)

안녕하세요. 오늘은 제이쿼리 addClass()와 removeClass()에 대해서 알아 보겠습니다. - addClass()의 경우 object에 class를 추가 하는 것입니다. - removeClass()의 경우 object에 존재하는 class를 제거 하는 것입니다. 아래의 소스에 예제 및 설명을 적어놨습니다. 참고하시면 좋을거 같습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 $(document).ready(function(){ // 'divAdd'라는 id를 가진 object에 'addCl'이라는 class를 추가 $("#divAdd").click(function(){ $(this).addC..
JavaScript 2020. 2. 4. 13:10

[Jquery] 제이쿼리 오브젝트(object) 클래스 이름 가져오기, 클래스 데이터 추출

안녕하세요. 오늘은 클릭 이벤트 발생 시 해당 Object의 Class Name를 가져오는 이벤트에 대해서 설명 드리겠습니다. 아래의 소스에 예제와 설명이 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 // 버튼클릭 $("#testBtn").click(function(){ // class name 가져오기 var select = $(this).attr('class'); // 'testclass' 라고 alert에 표출. alert(select); }); // div 클릭 $("#testD").click(function(){ // class name 가져오기 var select..
JavaScript 2020. 2. 3. 18:34

[Jquery] 제이쿼리 체크박스 체크하기(간단)

안녕하세요. 오늘은 제이쿼리를 사용하여 체크박스 제어를 해보겠습니다. 아래의 소스에 설명이 달려 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // 버튼클릭 $("#testBtn").click(function(){ // 체크박스 체크하기 $("#testChk").prop("checked", true); // 체크박스 체크풀기 $("#testChk").prop("checked", false); }); 감사합니다.
JavaScript 2020. 2. 3. 17:18

[Jquery] 제이쿼리 null 체크 함수 예제(간단)

안녕하세요. 오늘은 null 체크 함수를 공유할려고 합니다. 아래의 소스를 보시면 설명이 달려 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 // id 'testBtn'이라는 버튼을 클릭 시 체크박스 검사. $("#testBtn").click(function(){ // id 'testInput'의 value의 null 체크 if(vali($("#testInput").val())){ alert("데이터가 존재하지 않습니다."); } else { alert("데이터 존재."); } }); // null 체크 함수(custom) function vali(val){ ..
JavaScript 2020. 2. 3. 16:09

[Jquery] 제이쿼리 체크박스 체크 유무 및 값 추출 예제 포함

안녕하세요. 오늘은 체크박스의 체크 유무를 판단 및 값을 추출하는 제이쿼리 입니다. 아래 소스에 설명이되어 있으니 참고하시기 바랍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 // id 'testBtn'이라는 버튼을 클릭 시 체크박스 검사. $("#testBtn").click(function(){ // id 'box1'이란 체크박스를 검사.(체크가 되어 있는경우 : true, 체크가 되어 있지 않은경우 : false) if($("#box1").is(":checked")){ alert("box1 체크박스가 체크 되어 있습니다."); } else { ..
JavaScript 2020. 2. 3. 15:22

[ jquery ] 제이쿼리 무한스크롤 설명 및 예제 포함.

안녕하세요. 오늘 제이쿼리 무한 스크롤 방법에 대해서 설명 드리겠습니다. 아래를 보시면 소스 상에 설명이 들어가 있습니다. 우선 소스를 보시로 밑에서 따로 설명을 추가하겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 $(document).ready(function(){ start.init(); }); var start = { param : { curPage : ..
JavaScript 2019. 10. 16. 16:15
◀ 1 2 3 4 ▶

티스토리툴바