jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

.removeAttr()

.removeAttr()은 선택한 요소의 특정 속성을 제거한다.

문법

  • attributeName 속성을 제거한다.
.removeAttr( attributeName )
  • 예를 들어 아래는 h1 요소에서 title 속성을 제거한다.
$( 'h1' ).removeAttr( 'title' );

예제

  • input 요소의 placeholder 속성을 제거한다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      input { font-size: 30px; }
    </style>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'input' ).removeAttr( 'placeholder' );
      } );
    </script>
  </head>
  <body>
    <input type="text" name="address" placeholder="Input Address">
  </body>
</html>

참고

  • 속성 추가는 .attr()로 할 수 있다.
  • 클래스(class)의 값(value) 삭제는 .removeClass()로 할 수 있다.
  • 요소를 제거할 때는 .remove()를 사용한다.
같은 카테고리의 다른 글
jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

:nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다. 문법 $( ':nth-child(an+b)' ) a와 b는 상수, n은 변수입니다. n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다. an+b 대신에 even, odd를 사용할 수 있습니다. 예제 $( 'ol li:nth-child(2)' ) ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

jQuery / Selector / :empty - 내용이 없는 빈 요소를 선택하는 선택자

:empty는 내용이 없는 빈 요소를 선택하는 선택자이다. 문법 $( ':empty' ) 예를 들어 다음은 div 요소 중 내용이 없는 것을 선택한다. $( 'div:empty' ) 예제 표에서 내용이 없는 셀에 N/A 문자열을 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> table { ...

jQuery / Plugin / bxSlider / 슬라이더 플러그인

jQuery / Plugin / bxSlider / 슬라이더 플러그인

bxSlider는 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://bxslider.com/ GitHub : https://github.com/stevenwanderski/bxslider-4 홈페이지의 예제는 단순하지만, 옵션을 이용하여 다양한 활용이 가능합니다. 기본 사용법 jQuery, jquery.bxslider.min.js, jquery.bxslider.css를 연결합니다. 다음은 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> 다음과 같은 형식으로 마크업합니다. 클래스 값인 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-01.jpg" alt=""></div> <div><img src="images/slider-02.jpg" alt=""></div> <div><img src="images/slider-03.jpg" alt=""></div> <div><img ...

jQuery / Method / jQuery.inArray()

jQuery / Method / jQuery.inArray()

jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

jQuery / Selector / :even - 짝수 인덱스 요소를 선택하는 선택자

:even은 짝수 인덱스 요소를 선택하는 선택자이다. 문법 $( ':even' ) 예를 들어 다음은 짝수 인덱스 문단을 선택한다. 주의할 점은 첫번째 요소 인덱스가 0부터 시작한다는 것이다. $( 'p:even' ) 예제 짝수 인덱스의 li 요소를 선택하여 색을 빨간색으로 만든다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> ...

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

jQuery / Method / .unwrap() - 선택한 요소의 상위 태그를 제거하는 메서드

.unwrap() .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 $( 'h1' ).unwrap(); 은 h1 요소의 바로 상위의 태그를 제거합니다. 예제 1 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...

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

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

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

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jQuery / Plugin / jquery.toc / H 태그로 목차 만드는 플러그인

jquery.toc jquery.toc는 HTML 문서에 있는 h1, h2 등 h 태그를 이용하여 자동으로 목차를 만들어주는 플러그인입니다. GitHub : https://github.com/ndabas/toc Download : http://ndabas.github.com/toc/assets/jquery.toc.zip 목차 클릭 시 부드럽게 이동하는 효과를 주고 싶다면 다른 플러그인을 사용하세요. 기본 사용법 h 태그가 많은 다음과 같은 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } </style> </head> <body> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing ...

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

.find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다. 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...