기본설정
Visual Studio 2008(이하 VS2008)에서는 간단한 설정 만으로 jQuery에 대한 인델리센스를 사용하여보다 빠르고 쉽게 코드를 작성할 수 있다.
인 텔리센스를 사용하기 위해서는 우선 vsdoc.js 관련 패치 파일인 VS90SP1-KB958502-x86.exe을http://code.msdn.microsoft.com/KB958502/Release /ProjectReleases.aspx?ReleaseId=1736 에서 다운받아 설치 한다.
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> //JS로드
<reference path=”-vsjoc.js” /> //독립된 자바스크립트 문서에서 JS로드방법
<script type="text/javascript">
$("document").ready( function(){ // 페이지가 로드완료된후 곧바로 타는 함수 <body onload="">와 비슷
}
[엘리먼트선택 표현식]
$("#ElementID") // document.getElementById("ID") 를 줄여준 표현식
$("ElementName") // document.getelementByTagName("Name") 을 줄여준 표현식
$(".ClassName") // Page내의 지정한 클래스명들을 수정가능
$(“Parent > Child”) // Parent 의 하위 Child들을 선택
(# 이면 ID찾기 . 이면 Class찾기 없으면 Name찾기 ]
[CSS style주기]
$("").css("border", "#ff0000 3px solid"); // 속성값 하나만 수정할때
$("").css( {
"background" : "#ff0000" , "font-size" : "15px"
} ); // 속성값 다수를 수정할때 { } 중괄호와 : 사용
[속성*attribute]
$("").attr("title") //지정한 엘리먼트의 title 값을 가져온다
$("").attr("title","NOW") //지정한 엘리먼트의 title 값을 NOW로 지정한다
$("").attr( { "title" : "나쁜아이", "alt" : "착한아이" } ) //지정한엘리먼트의 title값과 alt값을 지정한다
[효과*effect]
$("").show() //지정엘리먼트를 show 시켜준다
$("").hide() //지정엘리먼트를 hide 시켜준다
$("").toggle() //지정엘리먼트가 show 면 hide로. hide면 show 로 반대로 바꿔준다.
$("").slideUp(); //선택한 엘리먼트를 위로 미끄러지듯이 사라지게 한다.
$("").slideDown();//선택한 엘리먼트를 아래로 미끄러지듯이 나타나게 한다.
$("").slideToggle();//slideUp과 slideDown의 효과를 상태값에 따라 적용한다.
//함수의 인자값으로 slow, normal, fast 또는 밀리세컨드의 숫자 타입을 전달해 해당 효과의 시간을 지정할 수 있다
$("").fadeIn();//선택한 엘리먼트를 서서히 나타게 한다.
$("").fadeOut();//선택한 엘리먼트를 서서히 사라지게 한다.
$("").fadeTo(1000, 0.5);//선택한 엘리먼트를 원하는 투명도로 조절한다.
//fadeTo() 함수는 원하는 투명도값을 설정하는 역할을 한다. Opacity의 값은 0~1까지의 값을 취하며 값이 0에 가까울수록 엘리먼트가 투명해 진다.
$("#img1").fadeIn();//선택한 엘리먼트를 서서히 나타게 한다.
$("#img1").fadeOut();//선택한 엘리먼트를 서서히 사라지게 한다.
$("#img1").fadeTo(1000, 0.5);//선택한 엘리먼트를 원하는 투명도로 조절한다.
// Opacity의 값은 0~1까지의 값을 취하며 값이 0에 가까울수록 엘리먼트가 투명해 진다.
$("#img1").animate().({width:"50%", opacity:0.3},5000);
//5초동안 선택한 이미지의 크기를 50%로 줄이고 투명도를 0.3으로 설정한다.
$("#img1").animate().({width:"100%", opacity:1},5000);
//5초동안 선택한 이미지의 크기를 100%로 늘리고 투명도를 1로 설정한다.
$("#img1").animate({ width: "50%", opacity: 0.5 }, 5000)
.animate({ width: "480px", opacity: 1 }, 5000);
//메소드연결을 이용하여 두가지 효과를 적용한다.(왼쪽에서 차례대로 실행된다.)
</script>
'유용한정보' 카테고리의 다른 글
| Windows 8을 저사양PC에 최적화하기! (0) | 2015.04.05 |
|---|---|
| HTML 5 video 코드 사용 및 jQuery로 동영상 동적 load (0) | 2015.02.21 |
| [HTML5] Video & Audio (0) | 2015.02.21 |
| JavaScript 최적화 (CompressorRater) (0) | 2015.02.20 |
| CSS border-image 속성 (0) | 2015.02.16 |
| 위, 아래 자동 스크롤 (0) | 2014.09.01 |
| <UL><LI>를 이용한 가로정렬 메뉴 만들기 (0) | 2014.09.01 |
| 홈페이지에 무료음악 플레이어 설치하기 (0) | 2014.06.06 |
댓글