728x90
반응형
1. jQuery 기본 작성법 : Selector 표현식 (css표현식 + javascript표현식)
$("selector").메서드();
->$("#test").css("color","red");
2. 연습코드(body)
<body>
<h1>jQuery 시작!</h1>
<ul id="list01">
<li>1. selector</li>
<li>2. dom 탐색</li>
<li>3. 이벤트</li>
<li>4. 이펙트</li>
<li>5. ajax</li>
</ul>
<button onclick="hightlight();">강조!</button>
<hr>
<button onclick="showImg();">show</button>
<button onclick="resizeImg();">resize</button>
<button onclick="addImg();">add</button>
<button onclick="toggleImg();">toggle</button>
<br/><br><br>
<div>
<img alt="test"src="resources/image/img02.jpg"/>
</div>
<div></div>
</body>
3. script
주석처리된 부분은 jquery표현식을 javascript로 바꾸었을 때의 코드로,
jquery를 사용했을 때 얼마나 간단히 코드를 작성할 수 있는지 비교 할 수 있다.
<script type="text/javascript src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
function hightlight(){
$("li").eq(0).css("background","olive");
// var li = document.querySelectorAll("li");
// li[0].style.background = "red";
}
$(function(){
$("img").click(function(){
alert("클릭되었습니다.");
$(this).attr({"src":"","alt":""});
})
})
// window.onload = function(){
// document.getElementsByTagName("img")[0].onclick = function(){
// alert("클릭되었습니다.");
// }
// }
function showImg(){
$("img").show();
}
function resizeImg(){
$("img").css({"width":"50px","height":"50px"});
// var img = document.getElementsByTagName("img");
// img[0].style.width = "500px";
// img[0].style.height = "500px";
}
function addImg(){
$("img").last().after("<img src='resources/image/img01.jpg'>");
// var img3 = document.createElement("img");
// img3.setAttribute("src", "resources/image/img03.jpg");
// document.getElementsByTagName("div")[0].appendChild(img3);
}
function toggleImg(){
$("img").toggle();
// var img = document.getElementsByTagName("img");
// for(var i=0; i<img.length; i++){
// if(img[i].style.display!="none"){
// img[i].style.display = "none";
// } else {
// img[i].style.display = "";
// }
// }
}
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]DOM_필터링메소드 (0) | 2020.07.31 |
|---|---|
| [JQ]selector_03 (0) | 2020.07.31 |
| [JQ]selector_02 (0) | 2020.07.31 |
| [JQ]selector_01 (0) | 2020.07.31 |
| [JQ]jQuery다운받기 (0) | 2020.07.30 |
