제이쿼리(함수), css selector 선택자, 콜백함수, JSON, Traversing 트래버싱, 비동기

https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

 

$("태그명")

$("#아이디")

$(".클래스")

$("*") --> 전체 모두, 잘 사용하지 않음 

$("요소 요소") : 후손 선택자 

$("요소 > 요소") : 자식 선택자 

 

제이쿼리

$(function() {})

 

 

제이쿼리를 이용해 CSS 주기 

$(function() {

            $(".wrapper a[target]").css({"color" : "#f00", "background-color" : "blue"}); //후손선택자

        })

==> ("키" : "밸류")

 

 

<$= 포함하고 있는 텍스트>

$(function() {

            $(".wrapper a[href$=net]").css({"background-color" : "#00f"});

        })

 

<*= >

$(function() {

            $(".wrapper a[href*=google]").css({"background-color" : "#f0f"});

        })

 

 

<input 타입별 선택방법>

$(function() {

            $("input:text").css({"background-color" : "#ff0"});

            $("input:password").css({"background-color" : "black"});

        })

 

 

<많이 사용되는 것>

[]를 이용한 것들 

a[target]

a[href$=net]

a[href*=google]

 

 

 

 

제이쿼리 함수 사용법

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

               

            });

 

==> 이벤트와 엮에서 사용하는 함수 콜백함수 

 

 

제이쿼리를 이용해 입력한 값 가져오기 

$("#btn").click(mycheck);

           

             });

           

            function mycheck(){

                let usrid = $("#usrid").val();

                //input요소에서만 사용(사용자가 입력한 값을 가져오는 것), text(), html()=> tkdlrkqt 함수와 헷갈려하면 nono!

                alert(usrid);

            }

 

 

기존의 데이터에 추가할 경우 

값.append(요소)

 

값.append(요소), 값.prepend(요소), tble.appendTo(요소), tble.prependTo()

 

 

제이슨 JSON

$(function(){

            let data = '[{"name" : "홍길동", "age" : 29}, {"name" : "손오공", "age" : 100}, {"name" : "저팔계", "age" : 22}]'; //xml, json

            data = JSON.parse(data);

            console.log(data[0]["name"]);

        });

 

 

data는 문자열이기 때문에 parse를 해줘야 배열로 인식해 값을 가져올 수 있다.

data = JSON.parse(data);

 

 

비동기 /동기 

: 요청을 보내고 대기 상태로 기다려야하느냐 아님 기다림없이 데이터처리를 할 수 있는가

예로 채팅이 비동기, 음악을 들으며 다운, 2가지를 동시에 하는 것처럼 느껴지게 하는 것이 비동기 

: 화면 전환없이 데이터를 처리하는 것 

 

비동기 

순서없이 데이터 처리