나만의 jquey 함수를 만들어보자.
파일 생성을 해서 공통적으로 사용할 js 파일을 얹혀 쓸껀데.
일반자바스크립트에서 function을 태우려면
html 코드
<div onclick="myFunction();">클릭! </div>
js 코드
function myFunction(){
alert("함수연결 완료");
}
이런식으로 연결할수있는데요..
혹시 jquery 사용하시다보면,
$("#myDiv").show();
이런 내장함수를 본적있으신가요?
흔히 자주 사용을합니다.
해당 선택자의 엘리먼트를 display:block 시켜주는것입니다.
이런 .show 이런것처럼 우리만의 사용자함수를 만들어보는 시간을 가져보겠습니다.
저도연습이 많이 필요하다고 생각이 드네요.
현업에 나와서 다른사람들이 사이트에 나와서
js 파일 만들고 기존에 있던 (MIT) 라이브러리 파일을 수정해서 사용하고.
이런것들보면 대단하다고 느낍니다.
제가 못하는걸수도 있구요..
※ 잡지식 : MIT 라이센스란??
무료 라이센스라고 생각하면 편합니다.
자세히 파고들면 copyright 부분을 변경해주거나. 하면되는데.
사실상 .. MIT 라이센스를 가진 라이브러리 라면 오픈소스의 라이브러리라고 생각합니다.
기존에 있던라이브러리를 고쳐서 사용해도 되고 이걸 배포할시에 오픈할권리도 없고
소스 공개 의무도 없는 가장 제약이 없는 라이센스라고 생각하시면 됩니다.
소스코드중
jquery $. 만드는부분은
http://webclub.tistory.com/108
여기를 참조했습니다.
Question
같은 클래스를 가진 input 태그의 (개수 상관없이) < 보통 n개라고하죠...
숫자를 입력 받아
모두 더해주는 코드를 만들어라.
제가 한 코드 보여드릴께여
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/myScript.js"></script> <script> </script> <style> .inpNum { width:80px; font-size:20px; border: 1px solid black; margin-bottom:10px;} </style> </head> <body> <div class="test"> <input type="text" class="inpNum" /> <br> <input type="text" class="inpNum" /> <br> <input type="text" class="inpNum" /> <br> <input type="text" class="inpNum" /> <br><br> <button type="button" id="arrCreate" >$.sum 호출</button> <div id="result"></div> </div> <script> $(document).ready(function(){ $("#arrCreate").on("click",function(){ var inpNums = $(".inpNum"); var arr = new Array(); for(var i=0; i < inpNums.length; i++){ //배열생성 arr.push(inpNums.eq(i).val()); } $("#result").text( $.sum(arr) ); }); }); </script> </body> </html> | cs |
myScript.js 파일입니다.
1 2 3 4 5 6 7 8 9 10 11 | (function($){ $.sum = function(arr){ var tot = 0; $.each(arr, function(idx,value){ value = $.trim(value); value = parseFloat(value) || 0; tot += value; }); return tot; } })(jQuery); | cs |
이밑에는 위를 이용한
심화과정같이 더 작업해서올린 소스입니다.
전 4개정도만 간단하게 만들어서 테스트했습니다.
매우잘되는군요
이것보다 더쉽게하는방법도 있긴합니다만 jquery 함수적용해봤다는것에 만족하며 저는 물러가겠습니다
다음에 또 포스팅 하겠습니다 열공!
'WEB DEVELOPER > JQUERY' 카테고리의 다른 글
| [jquery] FormData 의 직렬화 Serialize (0) | 2019.02.21 |
|---|---|
| [jquery] join() 배열의 요소들을 String 으로 반환 (0) | 2019.01.21 |
| [JSON] object에 접근하기 (0) | 2019.01.07 |
| [jquery] 이벤트 등록 방법 여러가지. (0) | 2019.01.02 |
| [HTML] image 버튼을 만들어보자. (0) | 2018.12.21 |
