[jQuery] jquery 기본문법
2018.01.16 기준
javascript 와 jquery 문법을 비교하여 기본문법을 정리했어요.
간단한 문법이라 보통 복사 붙여넣기로 넣긴 하지만.. ㅎㅎ
먼저 설치하는 방법부터 알아봅시다.
jQuery는 다운로드하거나 구글CDN이나
마이크로소프트CDN에서 가져다 사용할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /*1. 다운로드는 아래 사이트에서 할 수 있다.*/ http://jquery.com/download/ */2. 구글 CDN 활용*/ <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> </head> //가장 최신 버젼을 사용하고 싶으면 1.8.0 대신에 1을 쓰면 된다. 그럼 1로 시작하는 버젼중에 가장 최신 버젼을 사용할 수 있다. /*3. 마이크로 소프트 CDN 활용*/ <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> </head> //구글 또는 마이크로 소프트의 CDN을 사용하면 사용자가 요청한 파일은 가장 빠른 로딩 시간을 제공하기 위해 가장 가까운 서버를 연결시켜줍니다. 별도로 스크립트를 관리하지 않아도 되므로 편할 수 있으나 상업적인 용도로는 보안 측면에서 검토가 필요할 듯하다. | cs |
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 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | /*해당 엘리먼트 접근하기*/ Javascript document.getElementById("id"); jQuery $("#id"); / $(".class"); //엘리먼트의 ID 접근시 #을 붙이고, class 접근시 .을 붙인다. /*해당 엘리먼트의 값 접근하기*/ Javascript document.getElementById("id").value; jQuery $("#id").val(); //엘리먼트의 값을 대입하고 싶다면 $("#id").val("값"); /*해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드*/ Javascript document.getElementById("id").checked; jQuery $("#id").is(':checked'); //체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환 //$("#id").is(".orange, .blue, lightblue"); id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true /*해당 엘리먼트의 CSS 속성 부여하기*/ Javascript document.getElementById("id").style.border = "4px solid yellow"); jQuery $("#id").css("border", "4px solid yellow"); //첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다. /*해당 엘리먼트의 display 속성 부여하기*/ Javascript document.getElementById("id").style.display = "none"; jQuery $("#id").hide(); , $("#id").show(); //hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다. //아니면 수치로 1000분의 1초로 할 수 있음. show(950) /*체크박스의 전체선택 / 해제*/ Javascript function selectAll() { var blnChecked = document.getElementById("allCheck").checked; // 전체선택 체크박스의 상태 checkBoxes = document.getElementsByName('delCheck'); // 태그이름중 delCheck인 엘리먼트를 배열로 얻음 for(var i=0; i<checkBoxes.length; i++) { objCheck = checkBoxes[i]; if (objCheck) { objCheck.checked = blnChecked; } } } jQuery $(document).ready(function() { $('#allCheck').click(function() { // 전체선택 체크박스 선택 이벤트 if($('#allCheck').is(':checked')){ // 전체선택 체크박스 체크상태 $('.delCheck').each(function(){ // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴 $(this).attr('checked', 'checked'); // 가져온 체크박스를 checked }); }else{ // 전체선택 체크박스 미체크상태 $('.delCheck').each(function(){ $(this).attr('checked',''); // 가져온 체크박스를 미체크상태로 }); } }); }); /*엘리먼트의 존재여부를 체크하기*/ jQuery if($("#id").length > 0) //엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 Jquery.. 객체의 길이를 체크해서 존재여부를 체크한다. | cs |
'개발자가 좋은건가?? > Javascript , jQuery' 카테고리의 다른 글
| [jQuery] .text() 문자열 바꾸기 (0) | 2018.01.26 |
|---|---|
| [Javascript] opener함수 정리 (0) | 2018.01.18 |
| [Javascript] 현재페이지를 알아오기 (0) | 2018.01.18 |
| [Javascript] 웹브라우저 소스막기 (0) | 2018.01.18 |
| [jQuery] jQuery 적용이 안될때 (1) | 2018.01.16 |
