유블로그

JavaScript 코드를 jQuery로 변환하기 본문

JavaScript & jQuery

JavaScript 코드를 jQuery로 변환하기

yujeong kang 2020. 9. 20. 22:43
  바닐라 js ( 순수 자바스크립트 ) jquery
DOM 탐색

document.getElementById("div1");

document.getElementsByTagName("div")[0];

document.getElementsByName("div3")[0];

document.getElementsByClassName("div4")[0];

$("#div1");

$("div").eq(0);

$("[name=div3]").eq(0);

$(".div4").eq(0);
태그 내용 가져오기 document.getElementById("div1").innerHTML;

document.getElementsByClassName("result")[0].innerText;		 $("div1").html();

$(".result").text();
태그 내용 변경하기 document.getElementById("#div1").innerHTML = '<h2>변경</h2>';

document.getElementById("#div1").innerText = '안녕';
 $("#div1").html('<h2>변경</h2>');

$("#div1").text(“안녕”);
이벤트

btn.addEventListener("click", function() {
    console.log("성공");
});

$("#button").click(function() {
    console.log("성공");
});
속성 get document.getElementById("img1").width $("img").attr("width")
속성 set

document.getElementById("img1").width = “200px”;

$("img").attr("height", "300px");

$("img").attr( { "width":"600px", "height":"500px" } );
css 추가/변경

document.querySelector("#result").style.color = 'white';

document.getElementById('result').setAttribute(
    'style',  
 'background-color: #345; color: white; border: 10px solid tomato; border-radius: 50%;'  );

 

 $(".h1").css("color"); -> 값 얻기

$(".h1").css("color", "red");
class 추가 / 변경 document.querySelector("#result").className = "test"; $("#result").addClass("test");

 

'JavaScript & jQuery' 카테고리의 다른 글

자바스크립트 데이터 타입  (0) 2021.06.17
ECMA Script, ES6, 바벨  (0) 2021.06.17
[JavaScript] window 객체와 객체 사용법  (0) 2020.09.20
[jQuery] jQuery의 특징  (0) 2020.09.20
[JavaScript] 변수범위, 데이터타입, 함수, 문자열  (0) 2020.09.20
'JavaScript & jQuery' Related Articles more