jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

.resize()

.resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다.

문법

$( window ).resize( function() {
  // do somthing
​} );

예제

웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      p {
        width: 80%;
        margin: auto;
        padding: 20px;
        text-align: center;
        border: 1px solid #bcbcbc;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jbWidth = $( 'p' ).width();
        $( 'p' ).append( jbWidth );
        $( window ).resize( function() {
          jbWidth = $( 'p' ).width();
          $( 'p' ).empty().append( jbWidth );
        } );
      } );
    </script>
  </head>
  <body>
    <p></p>
  </body>
</html>

Related Posts

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

jQuery / Method / .wrapAll() - 선택한 요소 모두를 새로운 태그로 감싸는 메서드

.wrapAll() .wrapAll()은 선택한 요소 모두를 새로운 태그로 감쌉니다. 문법 .wrapAll( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 모든 p 요소를 모아서 div 태그로 감쌉니다. 예제 1 .wrap()은 선택한 요소에 각각 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인 - 클릭 시 부드럽게 이동

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. 목차 클릭 시 해당 위치로 부드럽게 이동(smooth scroll)하는 기능을 포함합니다. GitHub : https://github.com/jakobbossek/jquery.toc Download : https://github.com/jakobbossek/jquery.toc/archive/master.zip 기본 사용법 h 태그가 많은 HTML 문서를 만듭니다. 다음 코드를 추가하여 jQuery와 jquery.toc.js를 연결합니다. 보통 </head> 위나 </body> 위에 넣습니다. jquery.toc.js의 경로는 적절히 수정하세요. <script src="//code.jquery.com/jquery-3.5.1.min.js"></script> <script src="js/jquery.toc.js"></script> 다음 ...

jQuery / meta 태그의 값 가져오기

jQuery / meta 태그의 값 가져오기

jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.after() .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있습니다. 문법 .after( content ) 예를 들어 $( 'h1' ).after( '<p>Hello</p>' ); 는 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가합니다. $( 'h1.a' ).after( $( 'p.b' ) ); 는 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 ...

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

jQuery / Method / .toggleClass() - 선택한 요소에 클래스 값을 넣었다 뺐다 하는 메서드

.toggleClass() .toggleClass()로 선택한 요소에 클래스(Class) 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 $( 'p' ).toggleClass( 'xyz' ); 는, p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

.get() .get()은 선택한 요소를 배열(Array)로 가져옵니다. 문법 .get() 선택한 모든 요소를 가져옵니다. .get( index ) 선택한 요소 중 특정한 것만 가져옵니다. 예제 1 모든 li 요소를 jb 배열로 가져온 후, 각 요소의 내용을 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

:has() :has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다. 문법 $( ':has(selector)' ) 예를 들어 $( 'p:has(span)' ) 은 span 요소를 가지고 있는 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ...

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. 문법 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

jQuery / HTML 태그 바꾸기

jQuery / HTML 태그 바꾸기

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );

jQuery 강좌