22.06.08 TIL
22.06.08 TIL
JavaScript(jQuery) - toggleClass
인자값으로 들어가는 텍스트값을 가진 클래스를 적용/미적용 시킬수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.red {background-color: red;
.blue {background-color: blue;}
</style>
<div id="circle" class="red"></div>
<button id="btn">버튼</button>
<script>
$("#btn").click(function() {
$("#circle").toggleClass("red");
$("#circle").toggleClass("blue");
});
</script>
JavaScript - prop()
특정 엘리먼트의 속성값을 반환한다.
1
$("#엘리먼트아이디").prop("반환할 속성값");
JavaScript - after()
선택자 다음에 값을 넣는 메소드이다.
1
$(선택자).after("<p>After</p>");
JavaScript - wrap()
선택자를 wrap()의 인자값으로 들어간 엘리먼트로 감싼다.
1
2
3
4
5
6
<body>
<div id="test">test</div>
</body>
<script>
$("#test").wrap("<h2>");
</script>
JavaScript - upwrap()
선택자의 부모태그요소를 없앤다.
1
2
3
4
5
6
7
8
<body>
<h2>
<div id="test">test</div>
</h2>
</body>
<script>
$("#test").unwrap();
</script>
JavaScript - wrapInner()
선택자 안에 있는 요소를 wraoInner()의 인자값으로 감싼다.
1
2
3
4
5
6
7
8
<body>
<h2>
<div id="test">test</div>
</h2>
</body>
<script>
$("#test").wrapInner("<span>");
</script>
JavaScript - wrapAll()
선택자와 동일한 모든 엘리먼트를 wrapAll()의 인자값으로 감싼다.
1
2
3
4
5
6
7
8
9
<body>
<h2>
<div id="test">test</div>
</h2>
<div>test2</div>
</body>
<script>
$("div").wrapAll("<span>");
</script>
JavaScript - replaceWith()
선택자를 replaceWith()의 인자값으로 대체한다.
1
2
3
4
5
6
7
8
9
<body>
<h2>
<div id="test">test</div>
</h2>
<div>test2</div>
</body>
<script>
$("#test").replaceWith("<span>test</span>");
</script>
JavaScript - replaceAll()
선택자에 해당되는 모든 엘리먼트를 인자값으로 대체한다.
1
JavaScript - ready(), load()
ready()이벤트 메소드는 문서객체의 로딩이 끝나면 이벤트 발생 load() 이벤트 메소드는 외부에 연동된 소스의 로딩이 끝나면 이벤트 발생
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<p>
<img src="place-hold.it/300x300" class="img1"/>
</p>
</body>
<script>
$(document).ready(function() {
var h1 = $(".img1").height();
console.log("ready", h1);
});
$(window).load(function() {
var h2 = $(".img1").height();
console.log("load", h2);
})
</script>
JavaScript - 기본이벤트 차단하기
preventDefault()
1
2
3
$(".btn1").on("click", function(e) {
e.preventDefault(); //기본이벤트 차단하기
});
JavaScript - on()
.on(“eventMethod”, function(){}) .on()의 첫 번째 인자로는 이벤트 메소드를, 두 번째 인자로는 호출할 콜백함수를 전달하는 방법이다. 이벤트 메소드의 인자값으로 들어가는 이벤트는 여러 이벤트를 동시에 적용시킬 수 있다.
1
2
3
$("#btn").on("mouseover focus", function() {
$("txt2").hide();
});
JavaScript - on(mousemove, function(){})
현재 마우스의 움직임을 감지하는 메소드이다.
1
2
3
4
5
6
7
8
9
10
11
<p>X : <span class="posX">0</span></p>
<p>Y : <span class="posY">0</span></p>
<script>
$(function() {
$(document).on("mousemove", function(e) {
$(".posX").text(e.pageX);
$(".posY").text(e.pageY);
});
});
</script>
JavaScript - on(mouseout, function(){})
선택자의 태그안에 다른 엘리먼트가 있을경우 그 엘리먼트로 마우스가 이동하더라도 해당 구문을 실행한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="box_1">
<p><a href="#">ddd</a></p>
<p><a href="#">ddd</a></p>
<p><a href="#">ddd</a></p>
</div>
<script>
$(function() {
$("#box_1").on("mouseout", function() {
$("box_1").css({"background-color" : "yellow"});
});
});
</script>
JavaScript - on(mouseleave, function(){})
mouseout과 달리 마우스가 선택자의 바깥으로 나가게되면 해당 구문이 실행된다.
1
2
3
4
5
6
7
8
9
10
11
<div id="box_2">
<p><a href="#">ddd</a></p>
<p><a href="#">ddd</a></p>
<p><a href="#">ddd</a></p>
</div>
$(function() {
$("#box_2").on("mouseleave", function() {
$("#box_2").css({"background-color": "pink"});
});
});
JavaScript - append()
선택자 엘리먼트의 뒤에 append()의 인자값()을 위치시킨다.
1
$("#demo").append($(".box1"));
JavaScript - clone()
선택자를 복제시킨다.
1
$(선택자).clone();
This post is licensed under CC BY 4.0 by the author.