[풀스택] jQuery

0. 사용하기 전 파일 불러오기

- 저장해서 불러오기 : <script src="../jquery-3.6.0.min.js"></script>

- 웹에서 불러오기 : <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

1. 작성법 (selector 표현식)

1) 작성 : jQuery("selector").method() == $("selector").method()

2) 기능 구현 : onload = function(){} == $(function(){}) == $(document).ready(function(){})

 

2. 함수 및 속성 : $("selector").다음에 올 함수명

1) 탐색 관련

 (1) first(), last(), before(), after() : 첫, 끝, 전, 후

 (2) val() : value. 값 ; index() : 인덱스

 (3) html() : 태그 안 html 내용. (js에서는 innerHTML)

 (4) each(function(i){함수 실행 내용}) : 함수 각 요소별로 접근해서 실행.

* 체크박스 : .checked == 체크된 요소.

 (5) eq() : 선택한 엘리먼트들 중에 인덱스로 탐색

 (6) slice() : 선택한 엘리먼트들 중에 슬라이스로 탐색

 (7) find("selector") : 선택한 엘리먼트의 자손들 중에 탐색

 (8) children("select") : 선택한 엘리먼트의 자식들 중에 탐색 

 (9) parent() / parents("selector") : 선택한 엘리먼트의 부모 / 조상 탐색 

 (10) siblings() : 선택한 엘리먼트의 형제 탐색

 (11) next("selector") : 선택한 엘리먼트 다음에 따라오는 요소 탐색

 (12) add().추가할 내용 : 선택한 엘리먼트에 추가적으로 selector 표현식을 작성할 때 사용

 (13) is() : 선택한 엘리먼트 중 구하는 엘리먼트가 있는지 확인할 때 사용

 (14) $("태그1").prepend($("<태그2>")) : 태그1 내부에 (존재하지 않던) 태그2를 위에 만들어줌

 (15) $("태그1").append($("<태그2>")) : 태그1 내부에 (존재하지 않던) 태그2를 아래에 만들어줌

 (16) $("태그").before(...) : 태그 이전 바깥쪽에 (...) 문장 만들어줌

 (17) $("태그").after(...) : 태그 이후 바깥쪽에 (...) 문장 만들어줌

 (18) $(~).appendTo(~) : 태그 아래에 만들어주는데, 기존에 있던 태그라면 자리 이동됨.

 (19) A.wrap(B) : A요소를 B로 감싸줌 / A.unwrap(B) : A요소에 있는 B요소 없애주세요 감싸줌

         A.wrapInner("<~></~>") : A요소의 자식 요소들을 <~>태그로 감싸줌

         A.wrapAll("<~></~>") : A요소의 바깥에 <~> 태그를 감싸줌

 

2) 실행 관련

 (1) click(function(){클릭하면 실행할 함수 내용}) : 클릭하면 실행

 (2) hide() : 숨김 < > show() : 보임

 (3) css("바꿀 항목", "내용") < css({"바꿀 항목1" : "내용1", "바꿀 항목2" : "내용2" ... })

 (4) text("내용") : 텍스트 내용 추가

 (5) html("내용") : html 내용 추가

 (6) toggle() : 전환(누르면 켜지고 누르면 꺼지는 것 처럼)

 (7) change(function(){바뀌면 실행할 함수 내용}) : 요소가 바뀌게 되면 실행. 

 (8) submit(fuction(){제출되면 실행할 함수 내용}) : submit 이벤트 발생시 실행.

 (9) slideToggle(), slideUp(), slideDown() : 슬라이드해서 전환, 올라감(닫힘), 내려감(열림)

 (10) toggleClass("onoff") : 클래스를 전환하면서 <.. class = "onoff">가 생겼다 없어졌다 함.

       hasClass("addsize") : addsize라는 클래스가 있는지 없는지 판별.

       removeClass : addsize 클래스를 제거

       addClass : addsize 클래스를 생성

 (11) $("타겟 태그").replacedWith("바꿀문장") = $("바꿀문장").replaceAll("타겟 태그")

 (12) remove() : 삭제, detack() : 잘라내기, empty() : 비우기

 

3) 이벤트 전파 막기 : 이벤트함수(function(e){e. 뒤에 올 내용

- stopPropagation(): 이벤트 요소의 전파 막기. (이벤트 실행됨. 다음 요소는 이벤트 실행 안함)
- preventDefault(): 이벤트에 의한 기본 동작 막기 (이벤트 실행 안함)
- return false : 위 기능 둘 다 적용

 

4) 속성

- attr() : HTML의 속성 (attribute)

- prop() : JS의 속성 (property) * 대부분은 prop 사용. 

 

3. selector

*	모든 요소 선택
#	id
.	class
" "(공백)	모든 하위 요소(엘리먼트)
>	직계 하위 요소 (손주 X)
+	바로 뒤에 있는 요소(하나)
~	뒤에 있는 요소들(여러개)
:nth-child(n)	자식 요소 중 몇번째(n, even, odd)
:first-child	자식 요소 중 첫번째
:last-child	자식 요소 중 마지막
[attr(='내용')]	해당 속성을 가진 요소 (='내용') 구체화 가능
:hover	커서를 올렸을 때

 

4. ajax

$(function(){
            $("#emp_search").click(function(){
                var empid = $("input[name=empid]").val();
                if(!isNaN(empid) && (empid >= 100) && (empid <= 206)) {
                    $.ajax({
                        url:"emplist.xml",              // 통신할 경로
                        method:"get",                   // 전송 방식(get(default), post)
                        async:true,                     // 비동기(default)/동기
                        dataType:"xml",                 // 전송받을 데이터 타입 (xml, json, html, script, ..)
                        // data:{"key":value},          // 전송할 데이터
                        success:function(data){         // 성공시
                            // alert(data);
                            var empInfo = $(data).find("EMPLOYEE_ID:contains("+empid+")").parent();
...

$(function(){
    $("#emp_search").click(function(){

        $.ajax({
            url:"emplist.xml",
            dataType:"xml",
            success:function(data){
                var empRowList=$(data).find("ROW");
                $("body").append(makeTable(empRowList));
            },
            error:function(){
                alert("통신 실패");	
            }
        });

    });
});