Verdana

paste 이벤트 발생 시 jQuery로 바인딩 하여
정규식을 이용해 개행문자를 제외한 모든 테그를 제거하고
selection과 range를 이용하여 커서위치에 붙여넣기 기능

//-- 방법1. 정규식으로 개행문자를 제외한 테그를 모두 바꾼 후 insertNode로 한번에 추가

//-- 방법2. 상위div 만들어서 감싸고 insertNode로 추가하는 법

//-- 방법3. 개행문자로 쪼갠 후 배열을 뒤집어서 insertNode 로 하나씩 추가하는 방법

//--방법4. 부모 노드에 appendChild로 추가하는 법 (노드중간에다가 추가할때 에러 발생)

자주 쓰는 정규식

//숫자 3단위마다 콤마 찍기

var numberWithCommas= function(num){

  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

// 아이디 체크 정규식
const regExpId = /^[a-z0-9_-]\w{5,20}$/;
  
// 비밀번호 길이 체크 정규식
const regExpPassword = /^\w[6,16]$/;
  
// 비밀번호 조합(영문, 숫자) 및 길이 체크 정규식
const regExpPassword = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,16}$/;
  
// 이메일 체크 정규식
const regExpEmail=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/;
  
// 휴대폰번호 정규식
const regExpMobile = /^01([016789]?)-?([0-9]{3,4})-?([0-9]{4})$/;
  
// 숫자만 사용 정규식
const regExpNumber = /^\d+$/;

ie 브라우저로 접속 시에만 결과값이 보인다. 

크로스브라우징 이슈가 있을 경우 브라우저 판단 후

body태그에 class를 추가해주면 css 작업시 편해진다.

Javascript에서 문자열 길이를 체크할때, 그냥 length를 사용하면

1Byte인 영문, 숫자 입력시엔 상관없지만

한글 '가' 입력시에도 length 값은 1로 나온다.

아래 스크립트는 escape() 함수를 이용해 입력받은 값이 한글인지 판단 후 글자수를 2byte로 계산해준다.

React를 사용해보고싶지만 webpack / babel 등을 설정하느라 시간을 투자하기 싫을때

create-react-app 도구를 사용하면

React 작업환경을 명령어 하나로 설정 할 수 있다.

CentOS7 (7.4v) 환경에서 React + create-react-app + yarn + Node js 환경을 구축해보자

공식사이트를 참고하여 Node js를 설치

https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora

CentOS7 에서 저장소 할당 후 Node js를 설치하면 된다.

저장소에 추가

Node js 설치

Node js 설치시 npm은 자동으로 설치된다

버전 확인

yarn 설치

버전 확인

create-react-app 설치

React 프로젝트 생성 (create-react-app 프로젝트명)

포트 열어주기

CentOS7은 포트를 열어주어야 한다.

나는 Node js 의 기본 포트인 3000번과 http의 기본포트인 80을 같이 열어놓았다.

포트허용

방화벽 상태도 확인해주자

public.xml 파일에 직접 입력시

====

<?xml version="1.0" encoding="utf-8"?>

<zone>

  <short>Public</short>

  <description>For use in public areas. You do not trust the other computers on networks to not harm your computer. Only selected incoming connections are accepted.</description>

  <service name="dhcpv6-client"/>

  <service name="ssh"/>

  <port protocol="tcp" port="80"/>

  <port protocol="tcp" port="3000"/>

</zone>

====

방화벽 적용

방화벽 시작

혹시 ip가 막혀있을수 있다면... 허용 IP 추가

--add-source=<source range>/netmask 옵션을 사용하여 IP 추가

ex ) 192.168.1. 대역에서 ssh 접근을 허용시

설정 변경후 재시작

create-react-app 프로젝트 내에서 포트 변경시

package.json파일의 "start"값 앞에 포트를 적어주자

- Window 

"scripts": { "start": "set PORT=원하는포트 && react-scripts start",

- Linux & Mac 

"scripts": { "start": "PORT=원하는포트 react-scripts start",

나는 80포트에서 실행하고싶어서 80으로 설정해두었다.

이제 생성한 프로젝트 안의  package.json 파일 위치에서 yarn start로 실행하고

http://localhost:설정포트 

로 접속하면 초기 페이지가 뜬다.

포트설정을 별도로 하지 않았다면

http://localhost:3000

나처럼 80포트로 설정해두었다면

http://localhost 

로 접속하면 된다.

정상적으로 뜬다면 성공

출처 : https://juein.tistory.com/36?category=780579

php에서 Notice: No file uploaded in Unknown on line 0 에러 등등

파일첨부를 하지 않았을 때 처리 하는 방법

submit 하기전에 

선택된 파일이없으면 disabled 처리해준다

1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기

    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()

    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근

    -- $("선택자").children().eq(N)

    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근

    -- $("선택자").children().first()

    -- $("선택자").children(":first")

    -- $("선택자").children().eq(0)

    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근

    -- $("선택자").children().last()

    -- $("선택자").children(":last")

3. 부모 노드 찾기

 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기

    -- $("선택자").parents()  모든 부모

 - 모든 부모 중 선택자에 해당하는 부모 찾기

    -- $("선택자").parents("선택자")

4. 형제 노드 찾기

 - 이전 형제 노드 찾기

    -- $("선택자").prev()

    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기

    -- $("선택자").next()

    -- $("선택자").nextAll("선택자");

5. 노드 생성,추가,이동,삭제

 - 생성

    -- $("노드")

    -- $("선택자").html("<노드>...")

    -- $("노드").clone()

 - 추가

    -- $기준노드.append($추가노드)

    -- $추가노드.appendTo($기준노드)

    -- $기준노드.prepend($추가노드)  

    -- $추가노드.prependTo($기준노드)

    -- $추가노드.insertBefore($기준노드)

    -- $기준노드.before($추가노드)

    -- $추가노드.insertAfter($기준노드)

    -- $기준노드.after($추가노드)

 - 삭제

    -- $("선택자").remove()

 - 이동

    -- $기준노드.append($이동노드)  

    -- $이동노드.appendTo($기준노드)

    -- $이동노드.insertBefore($기준노드)

    -- $기준노드.before($이동노드)

    -- $이동노드.insertAfter($기준노드)   

    -- $기준노드.after($이동노드)

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")

 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

기본 CSS 셀렉터 사용하기

a - 모든 링크(<a>) 엘리먼트와 일치하는 셀렉터.

#exID - exID를 아이디로 가지는 엘리먼트와 일치하는 셀렉터.

.exClass - exClass를 클래스로 가지는 엘리먼트와 일치하는 셀렉터.

a#exID.exClass - 아이디가 exID 이고, 클래스가 exClass인 링크와 일치하는 셀렉터.

p a.exClass - <p> 엘리먼트 내에 클래스가 exClass인 모든 링크와 일치하는 셀렉터.

아래 코드와 같이 쓰임

$("p a.exClass")

자식 셀렉터(child selector) : 부모와 자식 엘리먼트는 오른쪽 부등호(>)로 구분

예제) ul.myList > li > a

설명) myList 클래스를 지닌 <ul> 엘리먼트의 바로 아래 자식 리스트 앨리먼트인 <li>에서

바로 아래 자식 링크만 선택한다.

[ 어트리뷰트 셀렉터 ]

a[href^=http://] - href의 값이 http://로 시작하는 모든 링크를 의미. 캐럿문자(^)는 값의 시작 부분이 일치하는지를 뜻함

form[method] - 명시적으로 method 어트리뷰트를 가지는 <form> 엘리먼트

input[type=text] - type이 text인 모든 input 엘리먼트

div[title^=my] - title 어트리뷰트의 값이 my로 시작하는 모든 <div> 엘리먼트

a[href$=.pdf] - PDF 파일을 참조하는 모든 링크

a[href*=jquery.com] - jQuery 사이트를 참조하는 모든 <a> 엘리먼트. *는 어트리뷰트의 값이 임의의 문자열을 포함하는 엘리먼트를 찾아오라는 셀렉터.

li:has(a) - <a> 엘리먼트를 포함하는 모든 <li> 엘리먼트

li a - <li>엘리먼트 바로 아래 자식의 모든 <a> 엘리먼트

기본 CSS 셀렉터

* - 모든 엘리먼트와 일치

E - 태그명이 E인 모든 엘리먼트와 일치

E F - E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치

E>F - E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트와 일치

E+F - E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치

E~F - E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치

E:has(F) - 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치

E.C - 클래스명 C를 가지는 모든 엘리먼트 E와 일치. E의 생략은 *.C와 동일함.

E#I - 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함.

E[A] - 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A=V] - 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A^=V] - 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A$=V] - 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

E[A*=V] - 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치

위치 셀렉터

a:first - 페이지에서 첫 번째 <a> 엘리먼트

p:odd - 모든 홀수 번째 문단 <p> 엘리먼트

p:even - 모든 짝수 번째 문단 <p> 엘리먼트

li:last-child - 부모 엘리먼트의 마지막 자식 엘리먼트

:first - 페이지에서 처음으로 일치하는 엘리먼트

:last - 페이지에서 마지막으로 일치하는 엘리먼트

:first-child - 첫 번째 자식 엘리먼트

:last-child - 마지막 자식 엘리먼트

:only-child - 형제가 없는 모든 엘리먼트를 반환한다

:nth-child(n) - n번째 자식 엘리먼트

:nth-child(even:odd) - 짝수 또는 홀수 자식 엘리먼트

:nth-child(Xn+Y) - 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인 경우 생략 가능.

 li:nth-child(3n)은 3의 배수 번째 아이템을 반환

 li:nth-child(5n+1)은 5의 배수 + 1 번째 아이템을 반환

:even - 페이지 전체의 짝수 번째 엘리먼트

:odd - 페이지 전체의 홀수 번째 엘리먼트

:eq(n) - n번째로 일치하는 엘리먼트

:gt(n) - n번째 엘리먼트(포함되지 않음) 이후의 엘리먼트와 일치.

:lt(n) - n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치.

n번째 자식 셀렉터는 CSS와 호환성을 유지하려고 인덱스를 1부터 시작.

jQuery 정의 셀렉터는 범용 프로그래밍 규약에 따라 인덱스를 0부터 시작.

정의 셀렉터

:animated - 현재 애니메이션이 적용되고 있는 엘리먼트를 선택

:button - 모든 버튼을 선택 ( input[type=submit], input[type=reset], input[type=button], button )

:checkbox - 체크박스 엘리먼트만 선택

:checked - 선택된 체크박스나 라디오 버튼만 선택 (CSS에서 지원)

:contains(foo) - 텍스트 foo를 포함하는 엘리먼트만 선택

:disabled - 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택 (CSS에서 지원)

:enabled - 인터페이스에서 활성화 상태인 모든 엘리먼트를 선택 (CSS에서 지원)

:file - 모든 파일 엘리먼트를 선택 ( input[type=file] )

:header - 헤더 엘리먼트만 선택 <h1>부터 <h6>까지 선택

:hidden - 감춰진 엘리먼트만 선택

:image - 폼 이미지를 선택 ( input[type=image] )

:input - 폼 엘리먼트만 선택 ( input, select, textarea, button )

:not(filter) - 필터의 값을 반대로 변경 ( 1.3 버전에서는 변경됨 )

:parent - 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택

:password - 패스워드 엘리먼트만 선택 ( input[type=password] )

:radio - 라디오 버튼 엘리먼트만 선택 ( input[type=radio] )

:reset - 리셋 버튼 선택 ( input[type=reset] 이나 button[type=reset] )

:selected - 선택된 엘리먼트만 선택

:submit - 전송 버튼을 선택 ( button[type=submit] 이나 input[type=submit] )

:text - 텍스트 엘리먼트만 선택 ( input[type=text] )

:visible - 보이는 엘리먼트만 선택

:checkbox:checked:enabled - 활성화되고 선택된 체크박스만 선택

:not 필터

- 필터 결과가 반대로 나오게 함.

- CSS 필터에서 지원

- jQuery 정의 셀렉터에서도 동작

- 필터 셀렉터에는 적용할 수 있지만 찾기 셀렉터에는 적용하지 못한다.

- 모두 콜론 문자(:)나 대괄호 문자([)로 시작.

input:not(:checkbox) - 체크박스가 아닌 <input> 엘리먼트 선택

필터 셀렉터 - 기준을 추가해서 일치하는 엘리먼트의 집합을 줄여나간다.

찾기 셀렉터 - 이미 선택된 엘리먼트와 맺은 관계를 통해 다른 엘리먼트를 찾는다. [ 자손 셀렉터(공백문자), 자식 셀렉터(>), 형제 셀렉터(+) ]가 있다.

커맨드 문법

size() - 확장 집합의 엘리먼트 개수를 반환

예제) $('a').size()

설명) 모든 <a> 타입의 엘리먼트의 개수를 반환

get(index) - 확장된 집합에서 하나 또는 모든 일치하는 엘리먼트를 가져온다. 매개변수가 명시되지 않았다면 모든 엘리먼트를 자바스크립트 배열로 반환

예제) $('img[alt]').get(0)

index(element) - 확장 집합에서 전달된 엘리먼트를 찾고, 집합에서 찾은 엘리먼트의 인덱스를 반환. 집합에 해당 엘리먼트가 존재하지 않으면 -1을 반환

예제) var n = $('img').index($('img#findMe')[0]);

add(expression) - expression 매개변수로 명시한 엘리먼트를 확장 집합에 추가한다. 표현식에는 셀렉터, HTML, 코드, DOM 엘리먼트, DOM 엘리먼트 배열이 올 수 있다.

예제1) $('img[alt]').add('img[title]')

예제2) $('img[alt]').addClass('thickBorder').add('img[title]').addClass('seeThrough')

설명2) alt 어트리뷰트를 가진 모든 <img>엘리먼트의 확장 집합을 생성한 뒤 두꺼운 테두리를 만드는 클래스를 적용. title 어트리 뷰트를 가진 <img> 엘리먼트를 추가하고, 마지막으로 투명도를 주는 클래스를 적용.

not(expression) - expression 매개변수의 값에 따라서 일치하는 집합에서 엘리먼트를 제거.

예제) $('img[title]').not('[title*=puppy]')

설명) title 어트리뷰트를 지닌 모든 <img> 엘리먼트를 선택할 때, title 어트리뷰트 값이 puppy를 포함하는 엘리먼트를 제외.

filter(expression) - 전달 받은 셀렉터 표현식이나 필터링 함수를 이용해서 확장 집합에서 엘리먼트를 필터링.

예제) $('td').filter(function(){return this.innerHTML.match(/^\d+$/)})

설명) 모든 <td> 엘리먼트로 구성된 확장 집합을 생성한 다음 엘리먼트 각각에 대해 filter() 메서드에 전달된 함수를 호출.

호출된 함수를 this값으로 현재 순회 중인 엘리먼트를 이용.

전달된 함수는 정규 표현식을 사용하여 숫자로 내용이 구성된 패턴을 만족하는지 검사.

필터 함수를 호출한 결과로 false를 반환하는 엘리먼트가 모두 확장 집합에서 제거

slice(begin, end) - 일치하는 집합에서 연속하는 일부분을 포함하는 새로운 확장 집합을 생성하고 반환

- begin : 반환되는 부분 집합에 포함될 첫 엘리먼트의 위치로, 0부터 시작

- end : 반환되는 부분 집합에 포함될 마지막 엘리먼트의 바로 다음 위치로, 0부터 시작하며, 생략하면 집합의 마지막까지 포함한다.

예제1) $('*').slice(2,3);

설명1) 페이지에 있는 모든 엘리먼트를 선택한 다음 세 번째 엘리먼트를 담은 새로운 집합을 생성

예제2) $('*').slice(0,4);

설명2) 페이지에 있는 모든 엘리먼트를 선택한 다음 처음 네 개의 엘리먼트를 포함한 집합을 생성

예제3) $('*').slice(4);

설명4) 페이지의 모든 엘리먼트와 일치한 다음 처음 네 엘리먼트를 제외한 모든 엘리먼트의 집합을 반환

  < 관계를 통해 새로운 확장 집합을 얻을 수 있는 메서드 >

  children() - 확장 엘리먼트의 고유한 자식으로 구성된 확장 집합을 반환

  contents() - 엘리먼트의 콘텐츠로 구성된 확장 집합을 반환. 텍스트 노드도 포함되며 주로 <iframe> 엘리먼트의 콘텐츠를 얻고자 사용

  next() - 확장 집합 내의 각 확장 엘리먼트 바로 다음에 나오는 형제로 구성된 확장 집합을 반환

  nextAll() - 확장 집합 내의 각 확장 엘리먼트 다음에 나오는 모든 형제로 구성된 확장 집합을 반환

  parent() - 확장 집합 내에 있는 모든 확장 엘리먼트의 바로 위 부모로 구성된 확장 집합을 반환

  parents() - 모든 확장 엘리먼트의 조상으로 구성된 확장 집합을 반환. 바로 위 부모와 상위의 모든 조상이 포함되지만 문서 루트(document root)는 포함되지 않는다.

  prev() - 확장 집합 내의 각 확장 엘리먼트 바로 이전에 나오는 형제로 구성된 확장 집합을 반환

  prevAll() - 확장 집합 내의 각 확장 엘리먼트 이전에 나오는 모든 형제로 구성된 확장 집합을 반환

  siblings() - 확장 엘리먼트의 모든 형제를 포함하는 확장 집합을 반환

find(selector) - 원본의 모든 엘리먼트 중 전달된 셀렉터 표현식과 일치하는 엘리먼트로 구성된 새로운 확장 집합을 반환

예제) wrappedSet.find('p cite')

설명) 변수 wrappedSet에 할당된 확장 집합에서, 문단 <p>에 포함된 모든 인용문 <cite>로 구성된 확장 집합을 반환

is(selector) - 확장 집합에 전달된 셀렉터 표현식과 일치하는 엘리먼트가 있는지 확인. 엘리먼트가 하나 이상 셀렉터와 일치하면 true를, 그렇지 않으면 false를 반환

예제) var hasImage = $('*').is('img');

설명) 현제 페이지에 이미지 엘리먼트가 있으면 hasImage 변수의 값을 true로 설정

end() - jQuery 커맨드 체인에서 사용하며 이전 확장 집합으로 돌아간다.

예제) $('img').clone().appendTo('#somewhere').end().addClass('beenCloned');

설명) 페이지의 모든 <img> 엘리먼트로 구성된 원본 확장 집합을 close() 메서드를 통해 복사본 확장 집합을 생성한 뒤, 복사본인 두 번째 확장 집합을 반환한다. 복사본 확장 집합에 appendTo() 커맨드를 수행한 뒤, end() 커맨드를 통해 현재 확장 집합(복사본 확장 집합)에서 앞으로 돌아가서 이전 확장 집합(원본 확장 집합)을 반환하고, 원본 확장 집합에 addClass() 커맨드를 수행한다.

andSelf() - 커맨드 체인에서 이전 확장 집합 두 개를 하나로 합친다

출처: http://crosstheline.tistory.com/41 [이거 알아영???ㅎㅎㅎ]

안녕하세요. 이번 시간에는 선택한 태그의 속성이나 내용, 스타일, 데이터를 조회하거나 변경하는 방법에 대해 알아보겠습니다. 다음과 같은 태그가 있다고 가정합니다. 상응하는 순수 자바스크립트 코드도 보여드리겠습니다.

<div id="zero" hidden="false" name="zero" class="babo" value="Hello" data-age="23">Content</div>

get

get 메소드는 제이쿼리 객체를 자바스크립트 객체로 다시 전환하는 역할을 합니다. get 메소드 안의 인자는 여러 개의 태그(클래스같은 경우 여러 개의 태그를 동시에 선택 가능) 중에 몇 번째 태그를 자바스크립트 객체로 전환할 건지 선택할 수 있게 해줍니다.

$('#zero').get(0); // <div id="zero"></div>

attr

attr 속성을 조회하거나 변경할 수 있는 메소드입니다. 인자를 하나만 주면 해당 속성의 값을 조회하고, 두 개를 주면 해당 속성의 값을 변경합니다. 아래의 prop 메소드도 보고 그 차이점을 꼭 알아두셔야 합니다.

$('#zero').attr('name'); // 'zero'
$('#zero').attr('name', 'hero'); // name 속성을 hero로 변경 
document.getElementById('zero').name = 'hero';

val

value 속성만을 다루는 메소드입니다. 인자가 없으면 value를 조회하고, 인자가 있으면 그 값으로 value를 바꿉니다.

$('#zero').val(); // 'zero'
$('#zero').val('hero'); // value를 hero로 변경
document.getElementById('zero').value = 'hero'

prop

attr과 유사하지만 속성중에 true/false 값을 가지는 속성들만을 위한 메소드입니다. 대표적인 예로 hidden, readonly, checked 등의 속성이 있습니다.

$('#zero').prop('hidden'); // false
$('#zero').prop('hidden', true); // hidden 속성의 값을 true로 변경
document.getElementById('zero').hidden = true;

addClass

클래스를 추가하는 메소드입니다.

$('#zero').addClass('genius');
document.getElementById('zero').classList.add('genius')

removeClass

클래스를 제거하는 메소드입니다.

$('#zero').removeClass('genius');
document.getElementById('zero').classList.remove('genius');

toggleClass

해당 클래스가 있으면 지우고, 없으면 만듭니다.

$('#zero').toggleClass('genius'); // genius 추가
$('#zero').toggleClass('genius'); // genius 삭제
document.getElementById('zero').classList.toggle('genius')

html

innerHTML과 같습니다. 

$('#zero').html(); // Content
$('#zero').html('Changed'); // 내용을 Changed로 변경
document.getElementById('zero').innerHTML = 'Changed';

text

textContent를 바꿉니다. innerHTML과는 달리 태그를 넣을 수는 없습니다.

$('#zero').text(); // Content
$('#zero').text('TextChanged'); // 내용을 TextChanged로 변경

css

스타일 속성을 조회하거나 변경합니다. 인자를 하나만 주면 해당 스타일 속성값을 조회하고, 두 개를 주면 해당 값으로 변경합니다. 두 개의 인자를 따로 주는 대신에 하나의 객체를 인자로 넘겨 여러 스타일을 동시에 바꿀 수 있습니다.

$('#zero').css('width'); // 465px
$('#zero').css('width', 300); // 300px로 변경
$('#zero').css({ width: 300, height: 300 }); // 여러 스타일 동시 변경
document.getElementById('zero').style.width = '300px';

height

태그의 높이를 알려줍니다.

$('#zero').height();
document.getElementById('zero').style.height;

width

태그의 너비를 알려줍니다.

$('#zero').width();
document.getElementById('zero').style.width;

position

태그의 상대적인 위치를 알려줍니다.

$('#zero').position(); // { left: 값, top: 값 }
var el = document.getElementById('zero');
{ left: el.offsetLeft, top: el.offsetTop }

data

마지막으로 태그에 데이터를 조회하거나 저장하는 방법입니다. html5에서는 태그에 데이터를 저장할 수 있습니다. data-age, data-name 처럼 data- 접두어를 붙이면 됩니다. 이렇게 만들어진 데이터는 data 메소드로 가져올 수 있습니다.

$('#zero').data('age'); // 23
$('#zero').data('age', 24); // 24로 data-age를 24로 변경
document.getElementById('zero')['data-age'] = 24; 

출처 : https://www.zerocho.com/category/jQuery/post/57a9d6266a275815008d9a9f