JS 파일을 다운 받자.
http://jquery.com/ 오른쪽 가운데에 에서 파일 두개를 받아 저장 하자.
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script> 맨처음 받은 js 파일을 html 폴더에 js 폴더를 생성후에 옮긴후 src 로 연결 해주자.
명령어 모음
$(document).ready(function(){
alert("이것은 $ 이용한 ready 이벤트 입니다. ");
});
$(function(){
alert("ready이벤트의 축약형 입니다. ");
});
// 위 두개는 같은 것이다. 1번째 것을 축약 한것이 2번째 이다.
alert( $("body").html() );
$(function(){
//alert($("p").get(1).innerHTML );
//alert($($("p").get(1)).html() );
//alert($($("p").get(1)).text() );
alert($($("p")[1]).text() );
jQuery.noConflict();// 이 명령 이후에는 jQuery 대신 $ 를 사용 할수 없다.
var $j = jQuery.noConflict();
// jQuery 의 애칭인 $ 을 $j 로 변경 한것./ 제이쿼리의 애칭 사용을 금지 하고 제이쿼리객체를 돌려 준다.
$j(function() {
alert($j($j("p")[1]).text());
});
기본 바디의 onload 명령어를 js 를 이용 하여 이용 한다. window.onload=function(){} or ready 이벤트
기본 명령은 jQuery 이며 애칭은 $ 이다./ 앞으로는 $ 을 되도록 사용 하게 될것이다.
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
function start() {
alert("안녕하세요 load 이벤트 입니다.");
}
//window.onload=start;
window.onload = function() {
alert("이것도load 이벤트 입니다. ")
}
//ready 이벤트 ==> 문서를 읽어 DOM 구조로 만든후 발생하는 이벤트
//jQuery 에서는 load 이벤트 대신 ready 이벤트를 이용 한다.
jQuery(document).ready(function() {
alert("이것은 ready 이벤트 입니다.");
});
// jQuery 명령을 대신해서 $ 를 사용 할수 있다.
$(document).ready(function(){
alert("이것은 $ 이용한 ready 이벤트 입니다. ");
});
$(function(){
alert("ready이벤트의 축약형 입니다. ");
});
</script>
=======================================================================
설명:appendTo("body") 바디의 끝단에 $(<div></div>)의 객체에 test라는 클래스를 지정.
"text" 명령 : "Click Me!!" 텍스트 삽입 . "Click": 명령=>function 명령으로 alert이벤트 발생함.
=========================================================================
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
//$("div").css("background-color","yellow");
// div 테그를 찾아서 css를 적용 한다.
$("<div></div>",{
"class": "test",
"text" : "Click Me!!",
"click" : function(){
alert("클릭 이벤트 입니다.");
}
}).appendTo("body");
//alert( $("body").html() ); // 해당 요소안의 내용을 HTML 코드 형식으로 보여 준다.
// 위 아래 는 바디 끝단에 추가 하여 원하는 요소들이 잘 추가가 되어있는지 확인 하는데 유용 하다.
alert($("body").text() ); // 해당 요소 안의 내용중 문자 데이터만 보여 준다.
});
//<시작테그명> 내용 </종료테그명>
</script>
</head>
<body>
<div>이 내용은 미리 존재 하는 내용 입니다.11 </div>
<div>이 내용은 미리 존재 하는 내용 입니다.22 </div>
<div>이 내용은 미리 존재 하는 내용 입니다.33 </div>
</body>
설명: .html() 을 이용 하기 위해서 전체 객체로 추출 해야 한다
$("div")[1]<-- div를 객체로 생성 [1] 것의 element추출 한 값을 다시 $() 객채 로 지정 . html()을 실행.
$(function(){
alert($($("div")[1]).html())
});
설명:size() 와 length 를 이용 하여 내용물의 크기를 알아 추출 가능 하다
<script type="text/javascript">
$(function(){
//alert("size()==>"+$("p").size());
//alert("length==>"+$("p").length);
var str= "";
$("p").each(function(idx,element){
str +="indx : "+idx+", data : "+ $(element).text()+"\n"; // $(this).text()+"\n";
});
alert(str);
});
</script>
<script type="text/javascript">
$(function(){
var str = "";
var pElement =$("p").get();
for(var i=0;i<pElement.length;i++){
str += $(pElement[i]).html()+"\n";
}
alert(str);
});
</script>
</head>
<body>
<p>첫번째</p>
<div>
<p>두번째</p>
</div>
<p>세번째</p>
</body>
설명: get()>>element(내용)추출/ /get(n)=[n] >>n(첨자)번째 내용물 추출
<script type="text/javascript">
$(function(){
//alert($("p").get(1).innerHTML );
//alert($($("p").get(1)).html() );
//alert($($("p").get(1)).text() );
alert($($("p")[1]).text() );
//alert($("p").get(1).innerText ); // 폭스 에서는 안대..
});
</script>
</head>
<body>
<p>첫번째</p>
<div>
<p>두번째</p>
</div>
<p>세번째</p>
</body>
설명: 일반적은 function 앞에 변수나 객채가 있어야 불러 올수있지만 아래와 같은 방법도 가능하다.
<script type="text/javascript">
(function(){
// 익명함수를 구성 하고 호출 하는 방법
alert("안녕하세요");
})();
// 익명 함수 를 바로 출력 하기 위에서는 뒤에 펑션을 ()로 한번 묶고 (); 를 붙이면 가능 하다.
(function(name){
// 익명함수를 구성 하고 호출 하는 방법
alert(name+"씨 안녕하세요");
})("홍길동");
</script>
</head>
<body>
<p>첫번째</p>
<div>
<p>두번째</p>
</div>
<p>세번째</p>
</body>
설명 : 기존에 사용 하는 jQuery 가 아닌 script 에서 (프로토 타입등.. ) $ 가 애칭등으로 사용된 경우 이후 jQuery를 사용 하는 경우 애칭이 사용이 안된다.이를 위해$을 애칭으로의 사용을 막는 것이다.
<script type="text/javascript">
jQuery.noConflict();// 이 명령 이후에는 jQuery 대신 $ 를 사용 할수 없다.
(function($){
// 이 영역에서는 jQuery 대신 $를 사용 할수 있다.
$(function(){
alert($($("p").get(1)).text());
});
alert("안녕하세요");
})(jQuery);
</script>
</head>
<body>
<p>첫번째</p>
<div>
<p>두번째</p>
</div>
<p>세번째</p>
</body>
위와 같다. 하지만 계속 $ 아닌 jQuery 를 사용 하는것은 불편 함으로 아래와 같이 적용 하자.
<script type="text/javascript">
var $j = jQuery.noConflict();
// jQuery 의 애칭인 $ 을 $j 로 변경 한것./ 제이쿼리의 애칭 사용을 금지 하고 제이쿼리객체를 돌려 준다.
$j(function() {
alert($j($j("p")[1]).text());
});
</script>
</head>
<body>
<p>첫번째</p>
<div>
<p>두번째</p>
</div>
<p>세번째</p>
</body>
이 글은 스프링노트에서 작성되었습니다.
'J-Query' 카테고리의 다른 글
| 3일차 export/change (0) | 2012.05.08 |
|---|---|
| 2일차 Selectors (0) | 2012.05.08 |
| 16일차 우편번호검색(json) (0) | 2012.05.08 |
| 16일차 select(DBMS:JSON:) (0) | 2012.05.08 |
| 15일차 DB->JSON(포멧 하기) (0) | 2012.05.08 |
