jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드
jQuery.trim()
jQuery.trim()은 문자열에 있는 공백(whitespace)을 제거합니다. 주의할 점은 문자열 앞과 뒤에 있는 공백은 제거하지만, 문자열 중간에 있는 공백은 제거하지 않는다는 것입니다.
문법
jQuery.trim( str )
예제
같은 문자열에 대하여, 두 번째 줄은 jQuery.trim()을 적용하였습니다.
<!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 ).ready( function() {
var str = ' Lorem Ipsum dolor ';
$( '.ab' ).html( str );
$( '.cd' ).html( jQuery.trim( str ) );
} );
</script>
</head>
<body>
<pre class="ab"></pre>
<pre class="cd"></pre>
</body>
</html>
Related Posts
jQuery / Method / .wrap() - 선택한 요소를 원하는 태그로 감싸는 메서드
.wrap() .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 $( 'p' ).wrap( '<div></div>' ); 는 p 요소를 div로 감쌉니다. class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드
.click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. 문법 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).click( function() { // function } ); 예제 문단을 클릭하면 테두리가 생깁니다. 다시 클릭하면 테두리가 사라집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...
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 / 체크박스 모두 선택, 모두 선택 해제 만들기
<!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 ).ready( function() { $( '.check-all' ).click( function() { ...
jQuery / Method / .addBack() - 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하는 메서드
.addBack() .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 $( 'ul' ).find( 'li' ).addBack() 은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / .ajax() / 동기식으로 사용하는 방법
Ajax는 Asynchronous JavaScript and XML의 약자입니다. 이름에서도 알 수 있듯이 비동기식으로 데이터를 가져옵니다. jQuery의 .ajax()도 마찬가지입니다. 데이터 요청을 해놓고 요청에 응답하는 순서대로 처리합니다. 비동기식이 여러모로 효율적이지만, 간혹 동기식 처리가 필요한 경우가 있습니다. 데이터 처리를 요청한 순서대로 해야 하는 경우 .ajax()로 가져온 데이터를 전역 변수로 넘겨야 하는 경우 .ajax()를 동기식으로 처리하려면 async: false 를 추가하면 됩니다. $.ajax ( { ...
jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...
jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드
.replaceWith() .replaceWith()는 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p ...
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 / .fadeToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드
.fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다. 문법 .fadeToggle( ) duration duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다. 문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다. .fadeToggle( 'fast' ) 숫자로 시간을 정할 ...