text: type 속성이 text인 input태그를 선택
password : type 속성이 Password인 input 태그를 선택
radio : type 속성이 radio 인 input태그를 선택
checkbox : type 속성이 submit인 input태그를 선택
submit type속성이 submit인 input 태그를 선택
reset : type속성이 rese인 input태그를 선택
button : type 속성이 button인 input 태그를 선택
실습1
<script>
$(function(){
//$(":input").css("background-color", "yellow");
$(":text").css("background-color","yellow");
$(":password").css("background-color","red");
})
</script>
</head>
</head>
</body>
<input type="text"/><br>
<input type="password"/><br>
</body> enabled: 활성 상태인 input 태그가 선택
disabled: 비 활성 상태인 input 태그가 선택
selected: select 태그 내의 option 태그 중 현재 선택되어 있는 태그를 선택
checked : checked나 radio 에서 현재 check 되어 있는 태그를 선택
s("background-color", "yellow");
ss("background-color","red");
활성상태 <br>
d"/>활성 상태<br>
disabled="disabled"/>비 활성 상태<br>
d", disabled="disabled"/>비 활성 상태<br>disabled를 통해 비 활성 상태도 스타일 적용 가능
jQuery 이벤트 함수
실습2
<script>
$(fuction(){
$("#a1").click(function(){
$("#a1").css("background-color", "black");
$("#a1").css("color","white");
$("#a2").dbclick(function(){
$("#a2").css("background-color", "black");
$("#a2").css("color","white");
});
$("#a3").mouseenter(function(){
$("#a3").css("background-color", "black");
$("#a3").css("color","white");
});
$("#a3").mouseleave(function(){
$("#a3").css("background-color", "white");
$("#a3").css("color","black");
});
$("#a4").mousedown(function(){
$("#a4").css("background-color", "black");
$("#a4").css("color","whtie");
});
$("#a4").mouseup(function(){
$("#a4").css("background-color", "white");
$("#a4").css("color","black");
});
$("#a5").hover(function(){
$("#a5").css("background-color", "black");
$("#a5").css("color","whtie");
},function(){
$("#a5").css("background-color", "white");
$("#a5").css("color","black");
});
$("#a6").focus(function(){
$("#a6").css(background-color", "blue")
});
$("#a6").css(background-color", "red")
});
$("#a7").on("click", function(){
alert('a7');
});
$("#a8").one("click", function(){
alert('a8');
});
$("#a9").on({
click: function(){
alert('click);
},
mouseenter : function(){
$("#a9").css("background-color", "black");
},
mouseleave: function(){
$("#9).css("background-color","white");
}
});
function remove_event(){
$)"#a7:).off(click");
}
});
</script>
</head>
<body>
<h3 id="a1">click</h3>
<h3 id="a2">double click</h3>
<h3 id="a3">mouse enter/leave</h3>
<h3 id="a4">mouse down/up</h3>
<h3 id="a5">mouse hover</h3>
<input id="a6" type="text"/>
<h3 id="a7">on</h3>
<button type="button" onclick="romove_event()">이벤트 제거</button>
<br>
<h3 id="a8">one</h3>
<h3 id="a8">one</h3>
<h3 id="a9">event setting</h3>
</body>```
click 이벤트
클릭하면 색변경
실습 .text
<script>
function getA1(){
var str =$("a1").text();
alert(str);
}
function getA2(){
var str=$("#a2").text();
alert(str);
}
function setHtml(){
$("#a3").text("<a href='http://apple.co.kr'>apple</a");
}
</script>
</head>
<body>
<div id="ai"> 문자열</div>
<buttona1문자열 가져오기</button>
<div id="a2">
<a href="http ://www.google.co.kr">google</a>
<div>
<buttona2문자열 가져오기</button>
<div id="a3"></div>
<button onclick="SetA3()">a3 문자열 가져오기</button>
<button onclick="setHtml()">a3 html 설정하기</button>
</body>
```
APPEND :HTML코드나 태그를 태그 내부의 뒤에 추가
PREPEND : HTML코드나 태그를 태그 내부의 앞에 추가
학습소감
jQUERY를 이용해서 구글 버튼가져오기와 셋팅하기를 만들어보았다.
문자열 가져오기 등 버튼을 만들어보았는데 신기하기도 하고
아직 부족하여 많이 연습해야함을 느꼈다.
학습하면서 어려웠던 점
많은 양을 학습하다보니 배우는데 조금 시간이 걸렸다.
해결방법으로 많이 연습해야겠다.
열심히 배우자