'Front-End/jQuery' 카테고리의 글 목록 (6 Page)

[jQuery] 특정 요소 범위에 한정하여 다른요소 검색 - find()

Front-End/jQuery 2017. 1. 3. 22:50

특정 요소 범위에 한정하여 다른요소 검색 - find()

- 문서 전체를 검색하는 것보다 효율적이다

1. 사용

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> </style> </head> <div id="trav"> King <div class="prince">prince1</div> <div>prince2</div> <div id="me">prince3 <div>prince3-1 <div class="prince">prince3-1 jr</div> </div> </div> <div>prince4</div> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#me') .css('border','solid 1px') .find('.prince') .css('font-weight','bold'); }); </script>

- class 이름이 같은 prince가 있지만 $() 함수를 이용하여 특정 지역을 선택함

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 기존의 요소 변경 - replaceAll(), replaceWith() (0)	2017.01.04
[jQuery] 요소 삽입/이동 - insertBefore(), insertAfter(), prependTo(), appendTo() (1)	2017.01.04
[jQuery] html() vs text() 의 차이 (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop() (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft() (0)	2017.01.03

리딩리드

,

[jQuery] html() vs text() 의 차이

Front-End/jQuery 2017. 1. 3. 17:09

html() vs text() 의 차이

- 요소의 인식과 접근하는 대상이 다르다

1. 차이점

1) 인식

- html() : HTML로 인식한다

- text() : 문자 열로 인식한다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <div id="container"> </div> <div id="container2"></div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#container').text('text:<br/><img src="nba.png"/>'); $('#container2').html('html:<br/><img src="nba.png"/>'); }); </script>

2) 접근 대상

- html() : 최초의 요소 전체만을 반환

- text() : $()함수로 읽은 아래 요소 모두 반환

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <p id="container"> text:<br/><img src="nba.png"> </p><p id="container2"> html:<br/><img src="nba.png"> </p> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ console.log($('#container').text()); console.log($('#container2').html()); }); </script>

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 요소 삽입/이동 - insertBefore(), insertAfter(), prependTo(), appendTo() (1)	2017.01.04
[jQuery] 특정 요소 범위에 한정하여 다른요소 검색 - find() (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop() (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft() (0)	2017.01.03
[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height() (0)	2017.01.03

리딩리드

,

[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop()

Front-End/jQuery 2017. 1. 3. 16:17

제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop()

- jQuery 1.5 이하에서는 attr() 메소드로 통합하여 취급했지만 1.6 이상에서는 분리하였다

1. attr()

1) 단일 설정

- attr() 함수를 이용하여 특정 요소의 속성에 접근 할 수 있다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <div id="container"> <ul> <li id="naver"><a href="www.naver.com" rel="externel">naver</a></li> </ul> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('a[rel="externel"]').attr('title','Move to naver'); }); </script>

2) 복수 설정

- 해쉬 설정으로 복수도 가능하다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <div id="container"> <img src="nba.png" id="#pic"> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#pic').attr({ alt:'image', title:'This is a nba' }) }); </script>

2. prop()

- checked, selected, disabled, multiple 프로퍼티 처럼 HTML 프로퍼티와 Javascript 프로퍼티와의 사이에 값이 다른 것에 대해 이용

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <label for="name">Name</label><br/> <input type="text" id="name" name="name" value="Hee" disabled/> <br/> <label for="blood">Blood</label><br/> <select id="blood" name="blood" multiple> <option id="typeA" value="A" selected>A Type</option> <option id="typeB" value="B">B Type</option> </select> <br/> <label for="marriage">marriage</label><br/> <input type="checkbox" id="marriage" name="marriage" value="1" checked/> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ console.log($('#name').prop('disabled')); console.log($('#name').attr('disabled')); console.log($('#blood').prop('multiple')); console.log($('#blood').attr('multiple')); console.log($('#typeA').prop('selected')); console.log($('#typeA').attr('selected')); console.log($('#marriage').prop('checked')); console.log($('#marriage').attr('checked')); }); </script>

- boolean 형식은 prop() 이 낫다

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 특정 요소 범위에 한정하여 다른요소 검색 - find() (0)	2017.01.03
[jQuery] html() vs text() 의 차이 (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft() (0)	2017.01.03
[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height() (0)	2017.01.03
[jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass (0)	2017.01.03

리딩리드

,

[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft()

Front-End/jQuery 2017. 1. 3. 16:07

제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft()

1. scrollTop(), scrollLeft()

- 화면이 시작되자 마자 원하는 위치로 스크롤을 이동 시킨다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ font-size :30px; } </style> </head> <div id="container"> <p>아들만 있는 집안에서 어떤 부호가 딸을 갖고 싶다는 간절한 마음에 여우들이 출몰하는 여웃골 근처 절에서 치성을 드리다 드디어 딸을 갖게 되었지만 사실 그 딸이 여우 요물(매구나 구미호)이라는 사실을 모르고 귀여워해줬다는 얘기로부터 시작한다.<br>그러던 어느날 가축들이 아무런 이유도 없이 죽어나가자 아버지는 첫째 아들한테 감시를 시켜 조사하라고 했으나 누이가 여우로 변해 가축의 간을 뜯어먹는 장면을 목격하게 된다. 아버지는 이를 믿지 않고 이후 다른 아들들에게도 감시를 명했지만 아들들은 누이가 여우로 변신하여 가축의 간을 뜯어먹는것만을 목격했고 아버지에게 이 사실을 알렸으나 아버지는 아들들이 단체로 누이를 모함한다며 내쫓았다.[1] 아버지란 사람이 가축을 부검해 아들들의 증언이 맞는걸 확인하거나 자기가 직접 밤에 잠입해 확인할 생각조차 안한다는건 덤... 이후 첫째 아들은 다른 집에 장가들어 가정을 꾸렸는데[2] 세월이 지나 한번 고향집에 돌아가고 싶어져 아내에게 사실을 말하고 짐을 꾸린다. 하지만 누이가 여우라는 사실때문에 마음에 걸려하고 있었는데 마침 처갓집이 도술에 일가견이 있는집이라 아내가 삼색의 호리병과 날카롭고 예리한 환도, 몇백리를 달려도 지치지 않는 준마를 가지다주며 혹시라도 위급한 상황이 발생하면 사용하라고 말해주는데... 어쨌거나 몇날 며칠을 말달려 고향근처 주막에서 주모에게 고향 마을 소식을 물으니 고향은 언제부터인가 횡액이 들어 고향에서 제일 잘나가던 부잣집인 아버지집이 몰락한지 오래고 고향사람들은 이유 모르게 하나둘씩 비명횡사하여 사람들이 견디다 못해 사방팔방으로 흩어졌다며 웬만하면 가지 말라고 조언해준다.마을에 도착하자 집은 말 그대로 폐허뿐이고 누이만이 남아있었다. 누이는 오빠를 대접하겠다며 방에서 기다리고 있으라 하지만 첫째 아들은 눈치를 채고 달아나고, 누이는 여우로 변해 뒤쫓아온다.[3]여우가 뒤쫓아오자 첫째 아들은 아내가 준 호리병을 차례로 던진다. 하얀 병을 던지자 가시덩굴이 여우의 길을 막고, 파란 병을 던지자 바다처럼 물이 범람해 여우를 막는다. 그러나 여우가 끝까지 쫓아오자 첫째 아들은 마지막 빨간 병을 던져서 불로 여우를 퇴치한다.</p> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ var p = $(window); p.scrollTop(700).scrollLeft(100); }); </script>

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] html() vs text() 의 차이 (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop() (0)	2017.01.03
[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height() (0)	2017.01.03
[jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass (0)	2017.01.03
[jQuery] 요소의 스타일 변경 (0)	2017.01.02

리딩리드

,

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

'Front-End/jQuery'에 해당되는 글 36건

[jQuery] 특정 요소 범위에 한정하여 다른요소 검색 - find()

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] html() vs text() 의 차이

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop()

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft()

'Front-End > jQuery' 카테고리의 다른 글

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바