<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(":text").css("background-color", "yellow");
$(":password").css("background-color", "red");
});
</script>
</head>
<body>
<input type="text"/><br/>
<input type="password"/><br/>
<input type="number"/><br/>
</body>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(":enabled").css("background-color", "yellow");
$(":disabled").css("background-color", "red");
});
</script>
</head>
<body>
<input type="text"/>활성 상태<br/>
<input type="password"/>활성 상태<br/>
<input type="text", disabled="disabled"/>비 활성 상태<br/>
<input type="password", disabled="disabled"/>비 활성 상태<br/>
</body>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#a1").click(function(){
$("#a1").css("background-color", "black");
$("#a1").css("color", "white");
});
$("#a2").dblclick(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", "white");
});
$("#a4").mouseup(function(){
$("#a4").css("background-color", "white");
$("#a4").css("color", "black");
});
$("#a5").hover(function(){
$("#a5").css("background-color", "black");
$("#a5").css("color", "white");
}, function(){
$("#a5").css("background-color", "white");
$("#a5").css("color", "black");
});
$("#a6").focus(function(){
$("#a6").css("background-color", "blue");
});
$("#a6").blur(function(){
$("#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(){
$("a9").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="remove_event()">이벤트 제거</button>
<br/>
<h3 id="a8">one</h3>
<h3 id="a9">event setting</h3>
</body>
• click : 클릭
• dblclick : 더블 클릭
• Mouseenter : 마우스 커서가 들어왔을 때
• Mouseleave : 마우스 커서가 나갔을 때
• Mousedown : 마우스 키를 눌렀을 때
• Mouseup : 마우스 키를 떼었을 때
• Hover : 마우스 커서가 들어왔을 때와 나갔을 때
• focus : 포커스가 주어졌을 때
• Blur : 포커스를 잃었을 때
• on : 이벤트를 설정하는 함수
• off : 설정된 이벤트를 제거하는 함수
• one : 이벤트를 설정하고 이벤트가 발생했을 때 자동으로 제거
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getA1() {
var str = $("#a1").text();
alert(str);
}
function getA2() {
var str = $("#a2").text();
alert(str);
}
function setA3() {
$("#a3").text("문자열 설정");
}
function setHTML() {
$("#a3").text("<a href='http://apple.co.kr'>apple</a>");
}
</script>
</head>
<body>
<div id="a1">a1 문자열</div>
<button onclick="getA1()">a1 문자열 가져오기</button>
<div id="a2">a2 문자열
<a href="http://www.google.co.kr">google</a>
</div>
<button onclick="getA2()">a2 문자열 가져오기</button>
<div id="a3"></div>
<button onclick="setA3()">a3 문자열 설정하기</button>
<button onclick="setHTML()">a3 html 설정하기</button>
</body>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getHTML() {
var html = $("#a1").html();
alert(html);
}
function setHTML() {
$("#a1").html("<a href='http://apple.co.kr'>apple</a>");
}
</script>
</head>
<body>
<div id="a1">
<a href="http://www.google.co.kr">google</a>
</div>
<button onclick="getHTML()">html 가져오기</button>
<button onclick="setHTML()">html 셋팅하기</button>
</body>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getHTML() {
var html = $("#a1").html();
alert(html);
}
function setHTML() {
$("#a1").html("<a href='http://apple.co.kr'>apple</a>");
}
function getA2() {
var value = $("#a2").val();
alert(value);
}
function setA2() {
$("#a2").val("1234");
}
</script>
</head>
<body>
<div id="a1">
<a href="http://www.google.co.kr">google</a>
</div>
<button onclick="getHTML()">html 가져오기</button>
<button onclick="setHTML()">html 셋팅하기</button>
<input type="text" id="a2"/>
<br/>
<button onclick="getA2()">value 값 가져오기</button>
<button onclick="setA2()">value 값 설정하기</button>
</body>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getAttr() {
var src = $("#a1").attr("src");
var width = $("#a1").attr("width");
var height = $("#a1").attr("height");
var id = $("#a1").attr("id");
$("#result").html("src: "+ src + "<br/>"
+ "width :" + width + "<br/>"
+ "height :" + height + "<br/>"
+ "id :" + id + "<br/>");
}
function setAttr() {
$("#a1").attr("width", 544);
$("#a1").attr("height", 184);
}
</script>
</head>
<body>
<img src="image/구글.png" width="272" height="92" id="a1"/>
<br/>
<div id="result"></div>
<button onclick="getAttr()">속성 읽어오기</button>
<button onclick="setAttr()">속성 설정하기</button>
</body>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function append1 () {
$("#a1").append("<p>새롭게 추가한 pl</p>");
}
function append2 () {
var p = $("<p>");
p.text("새롭게 추가한 p2");
$("#a1").append(p);
}
function prepend1() {
$("#a1").prepend("<p>새롭게 추가한 p3</p>");
}
function prepend2() {
var p = $("<p>");
p.text("새롭게 추가한 p4");
$("#a1").prepend(p);
}
</script>
<style>
#a1 {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="a1">
<p>p 태그</p>
</div>
<button onclick="append1()">HTML 코드를 뒤에 추가</button>
<button onclick="append2()">HTML 객체를 뒤에 추가</button>
<button onclick="prepend1()">HTML 코드를 앞에 추가</button>
<button onclick="prepend2()">HTML 객체를 앞에 추가</button>
</body>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function after1 () {
$("#a1").after("<p>새롭게 추가한 p 태그 1</p>");
}
function after2 () {
var p = $("<p>");
p.text("새롭게 추가한 p태그 2");
$("#a1").after(p);
}
function before1() {
$("#a1").before("<p>새롭게 추가한 p태그 3</p>");
}
function before2() {
var p = $("<p>");
p.text("새롭게 추가한 p태그 4");
$("#a1").before(p);
}
</script>
<style>
#a1 {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="a1">
<p>p 태그</p>
</div>
<button onclick="after1()">HTML 코드를 뒤에 추가</button>
<button onclick="after2()">HTML 객체를 뒤에 추가</button>
<button onclick="before1()">HTML 코드를 앞에 추가</button>
<button onclick="before2()">HTML 객체를 앞에 추가</button>
</body>
JQ를 활용하여 다양한 것들을 할수있다는것을 알게되었다.