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

[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height()

Front-End/jQuery 2017. 1. 3. 15:56

제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height()

1. height(), width()

- CSS 속성을 이용하느 방법도 있지만 height(), width()를 이용하면 동적으로 변경 가능하다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <div id="container"> <img src="nba.png" class="notice"> <button id="btn">button</button> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#btn').click(function(){ var img = $('img.notice'); img.height(62).width(240); }); }); </script>

- 버튼을 클릭하면 이미지의 크기가 줄어든다

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

[jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop() (0)	2017.01.03
[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft() (0)	2017.01.03
[jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass (0)	2017.01.03
[jQuery] 요소의 스타일 변경 (0)	2017.01.02
[jQuery] 문서로드 완료된 후 실행하기 - <script> 위치 (0)	2016.12.26

리딩리드

,

[jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass

Front-End/jQuery 2017. 1. 3. 15:48

제이쿼리 스타일 클래스 적용/제외

1. toggleClass

- 마우스 포인트가 요소 안에 있거나 벗어난 시점에 효과는 toggleClass가 좋다

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ border: 1px solid black; width:500px; height:500px; } ul{ list-style: none; } li{ border-bottom-style: dotted; } .highlighted{ background-color: deepskyblue; color:red; } </style> </head> <div id="container"> <ul> <li id="spring">Spring</li> <li id="summer">summer</li> <li id="fall">fall</li> <li id="winter">winter</li> </ul> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('li').hover(function(){ $(this).toggleClass('highlighted'); }) }); </script>

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

[jQuery] 제이쿼리를 이용하여 특정 위치로 스크롤 이동 - scrollTop(), scrollLeft() (0)	2017.01.03
[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height() (0)	2017.01.03
[jQuery] 요소의 스타일 변경 (0)	2017.01.02
[jQuery] 문서로드 완료된 후 실행하기 - <script> 위치 (0)	2016.12.26
[jQuery] 제이쿼리 객체를 json 문자열로 상호 변환 - $.parseJson (0)	2016.12.25

리딩리드

,

[jQuery] 요소의 스타일 변경

Front-End/jQuery 2017. 1. 2. 22:51

요소의 스타일 변경

1. 방법

1) 기본

<div id="container"> <ul> <li id="spring">Spring</li> <li id="summer">Summer</li> <li id="fall">Fall</li> <li id="winter">Winter</li> </ul> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#spring').css('background-color','green'); }); </script>

- css() 속성을 사용하여 변경한다

2) 해시 형식으로 여러 프로퍼티 지정

<div id="container"> <ul> <li id="spring">Spring</li> <li id="summer">Summer</li> <li id="fall">Fall</li> <li id="winter">Winter</li> </ul> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function(){ $('#spring').css({ backgroundColor: 'green', color:'red', fontWeight:'bold' }); }); </script>

3) 수치 프로퍼티로 상대값 설정

<div id="container"> <ul> <li id="spring">Spring</li> <li id="summer">Summer</li> <li id="fall">Fall</li> <li id="winter">Winter</li> </ul> <button id="btn">button</button> </div> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('#btn').click(function(){ $('#spring').css('font-size','+=10'); }); </script>

- +=10, -=10 으로 늘리거나 감소 시킬 수 있다

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

[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height() (0)	2017.01.03
[jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass (0)	2017.01.03
[jQuery] 문서로드 완료된 후 실행하기 - <script> 위치 (0)	2016.12.26
[jQuery] 제이쿼리 객체를 json 문자열로 상호 변환 - $.parseJson (0)	2016.12.25
[jQuery] 페이지이동 제어 - href, replace, pushState() (0)	2016.12.25

리딩리드

,

[jQuery] 문서로드 완료된 후 실행하기 - <script> 위치

Front-End/jQuery 2016. 12. 26. 22:27

문서로드 완료된 후 실행하기 - <script> 위치

- Javascript 코드는 위에서부터 차례대로 읽어 수행

1. 문제

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('p a:first').css('background-color','yellow'); </script> <p><a href="http://www.naver.com">naver</a></p>

- <script> 요소가 실행되는 시점에 <p> 가 읽히지 않아 적용되지 않는다

2. 해결

1) 위치 이동

<p><a href="http://www.naver.com">naver</a></p> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $('p a:first').css('background-color','yellow'); </script>

- <p> 태그를 <script> 보다 위에 놓는다

2) 익명함수 사용 - $(function(){..})

- 익명의 함수로 묶인 코드는 페이지가 모두 읽힌뒤에 실행된다

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

[jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass (0)	2017.01.03
[jQuery] 요소의 스타일 변경 (0)	2017.01.02
[jQuery] 제이쿼리 객체를 json 문자열로 상호 변환 - $.parseJson (0)	2016.12.25
[jQuery] 페이지이동 제어 - href, replace, pushState() (0)	2016.12.25
[jQuery] 제이쿼리 일정시간 마다 처리 - setInterval(), clearInterval() (0)	2016.12.25

리딩리드

,

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

[jQuery] 제이쿼리를 이용한 요소의 높이와 폭 조절 - width(), height()

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

[jQuery] 제이쿼리 스타일 클래스 적용/제외 - toggleClass

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

[jQuery] 요소의 스타일 변경

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

[jQuery] 문서로드 완료된 후 실행하기 - <script> 위치

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

공지사항

카테고리

태그목록

글 보관함

달력

링크

리딩리드

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바

« 2024/11 »
일	월	화	수	목	금	토
					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