[27]jQuery학습

작성일 | In

jQuery란?

  • 자바스크립트 기반의 라이브러리

  • 자바스크립트 기반 오픈소스

    .js

    • 제이쿼리 / AJAX / Bootstrap / AngularJS / moment
    • 시각화 : chart / d3 ~

jQuery라이브러리 사용

1) 해당 사이트 직접 링크
1
2
3
4
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <!--또는-->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
2) jQuery라이브러리 다운 / 오픈소스들은 head안에 작성하기
1
<script src="../js/jquery-3.4.1.min.js"></script>

jQuery시작

1) 원래 길이

1
2
3
$(document).ready(function(){
    alert("jQuery시작");
});

2) 압축시킨 것

1
2
3
$(function(){
    alert("jQuery시작!!");
});

3) jquery()축약형 -> $

1
alert($); //function(e,t){return new k.fn.init(e,t)}

jQuery기본문법

HTML

1
2
3
<form name="memfrm">
    <input type="text" name="uid" id="uid" value="soldesk">
</form>

JS와 jQuery비교

1
2
3
4
5
6
7
8
//1)JavaScript
//name=uid
alert(document.memfrm.uid.value); //soldesk
//id=uid
alert(document.getElementById("uid").value);//soldesk

//2)jQuery
alert($("#uid").val()); //soldesk

jQuery이용한 회원가입

HTML

1
2
3
4
5
6
7
8
9
10
11
<form name="memfrm" id="memfrm">
    
    아아디:<input type="text" name="uid" id="uid" placeholder="아이디를 입력하세요">
    
    <hr>
    
    <button id="btn_idcheck">ID중복확인</button>
    <button id="btn_join">회원가입</button>
    <button id="btn_reset">다시쓰기</button>
    
</form>

jQuery문법

  • jQuery 이벤트 (둘 다 많이 쓰임)

    $(“선택자”).on(“이벤트”,function(){});

    1
     $("#btn_idcheck").on('click', function(){});

    $(“선택자”).이벤트();

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
$("#btn_idcheck").click(function() {
    window.open("blank.html","idwin","width=250,height=200");
});//click

$("#btn_join").click(function() {
    var uid=$("#uid").val();
    uid=uid.trim(); //공백제거
    if(uid.length<8||uid.length>=13){
        alert("아이디 8~12내에서 입력하세요");
        $("#uid").focus();
        //<input type=submit> 서버로 폼 전송
        //<button>의 기본 속성도 submit
        return false;
    }
    //JavaScript
    // document.memfrm.submit(); //type=submit 과 동일기능
    //jquery
    $("#memfrm").submit();  //type=submit 과 동일기능
});

$("#btn_reset").click(function() {
    //type=reset과 동일한 기능
    // document.memfrm.reset();//javascript
    $("memfrm").reset(); //jquery
});

jQuery이용한 문자열,이미지 출력

HTML

1
2
3
4
5
6
<p>
    <button>입력!!</button>
</p>
<hr>
<div id="text"></div>
<div id="html"></div>

jQuery문법

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("button").click(function() {
    // alert("버튼클릭");
    var txt="<img src='../images/k7.png'>";
    
    //javascript
    // document.getElementById("html").innerHTML=txt;

    //jQuery
    //단순 문자열 출력
    $("#text").text(txt); //<img src='../images/k7.png'>
    //문자열이 마크업되면서 출력(요소생성)
    $("#html").html(txt); //이미지출력
    
});