jQuery

//js
document.querySelector('hello').innerHTML ="바보"

//jquery
$('.hello').html('바보');

//js
document.querySelector('hello').style.color = 'red'

//jquery
$(.hello').css('color','red')

 

 

$(선택자).동작함수();

CSS선택자와 동일. 이용해 동작함수사용가능

$제이쿼리접근할수있는 식별자

$생성된요소  = 제이쿼리객체

제이쿼리객체메소드사용하여 여러동작설정

 

 

${document}.read(실행될익명함수function(){});

자동위에있는코드로 받아드림 위에 것을 줄여서 사용

$(실행될 익명함수 function() {});

 

 

 

이벤트메소드 addEventListener = on

//js 
document.querySelector("선택자).addEventListener("이벤트타입".function(){})

//jquery
$("선택자").on("이벤트타입. 실행될익명함수function(){});

on이라는 제이쿼리메소드사용 이벤트넣어줌 어떤함수실행되는지 알수있음

 

$("button").on("click",function(){});

 

선택자를 클릭하면 함수실행된다

 

 

css선택자를 사용하는 것과 비슷하다

,이용여러개태그 아이디동시 선택가능

형제선택자 a~b  ~사용시 b형제선택자사용

 

a+b +인접형제선택자 a아래에있는b의 가까운형제선택 

first태그의 첫번째 last

nth-child(숫자) 그 값해당되는거 들고옴

 

eq(n) 같다n번째 인덱스들고옴 인덱스ul li 있는경우

gt(n) n보다 더큰수(인덱스)값다들고옴

lt(n) n보다 더작은값들만 다들고옴

 

 

 

input요소선택가능

:button:checkbox

 

 

 

선택요소접근가능

js

.innerHTML

 

.html()

- 태그까지 바꿔줌

.text()

-태그적으면 태그까지나옴

 $("p").text("텍스트입니다");

 

크기나 이름 값 속성등사용가능

getter 값들고옴 요소값반환

setter  글자들고옴 제이쿼리객체를반환

 

 

메소드체이닝

메소드연속호출

$("p").css("color","red").html("텍스트입니다");

 

.html() 을 통해 연속으로 호출가능

 

추가

$(<div>)  

 

 

.append()   마지막

$("body").append($("<p>").text("p태그입니다"));

 

.append를 사용하면 script의 아래 body태그안에 있다

 

.prepend()  처음

 

.before()     바로앞

 

.after()       바로뒤

$("p").after($("<p>").text("p태그입니다"));

.after를 사용하면 body태그 바깥 html태그 안에 있다

 

 

 

 

제거

.remove

$("p").remove()

p태그삭제

 

 class탈부착

js - .classList.remove()

 

.removeClass()

토글

.toggleClass()

 

 

 

복제

.clone

앞요소복제

$("body").append($("h1").clone());

h1을 복제하낟

 

.parent()  부모

.parents()  모든조상

 

형제

.sibling()  모두선택

.next()     다음선택

.prev()     이전선택

 

자손

.children()

자식모두선택

 

	<ul>
        <li>첫번째리스트</li>
        <li>두번째리스트</li>
        <li>세번째리스트</li>
        <li>네번째리스트</li>
    </ul>
    <button>버튼</button>

        $("button").on("click",function () {
            $("ul").children().css("color","blue")

//ul자식인 li에게 버튼누르면 li태그의 글색이 파란색으로
        });

 

.find()

전달받은 선택자에 해당하는 자손요소모두선택

 

<ul>
        <li>첫번째리스트</li>
        <li>두번째리스트</li>
        <li id="li_id">세번째리스트</li>
        <li>네번째리스트</li>
    </ul>
$("ul").find("#li_id").css("color","orange");//찾은자손에 색넣기
        //find이용전달받은 선택자 요소찾아줄수있음3번째id를 적어 글색 주황색