jq에서 자주 사용하는 메소드를 알아보자.
each() 반복문은 for in과 비슷하다. 반복문을 태그에 쓰는 것으로 여러 태그를 불러 왔을 때
간편하게 일괄 처리 할 수 있다. 그리고 그의 순서와 값은 key 와 value인 index와 item을 사용한다.
index는 가져온 태그의 순서, item은 해당 값을 의미한다.
addClass(" ") : addClass는 말 그대로 속성값 class를 추가해준다.
removeClass(" ") : addClass는 말 그대로 속성값 class를 제거해준다.
toggleClass(" ") : toggleClass는 클릭 했을 때 클래스가 적용 or 해제되는 속성을 추가
is() : 해당 객체(요소)가 괄호에 입력한 객체인지 판별해주는 메소드 (true & false)
$.extend() : 객체에 속성을 추가하거나 객체와 객체를 합치는 메소드
$.noConflict() : js 라이브러리나 다른 버젼의 jquery의 $ 키워드 충돌을 방지하기 위해 사용하고
이 키워드를 사용하면 $ 달러 키워드를 다른것으로 바꿔 사용 할 수 있다.
어떻게 쓰이는지 확인해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.high_light_0 {background:yellow;}
.high_light_1 {background:orange;}
.high_light_2 {background:blue;}
.high_light_3 {background:green;}
.high_light_4 {background:red;}
</style>
</head>
<body>
<h1>메소드</h1>
<h3>each() 메소드</h3>
<p>배열을 관리하는 for in문과 비슷한 기능을 하는 메소드이다.</p>
<p>$.each(object, function(index, item){})의 형식으로 사용한다.<br>
index : 배열의 인덱스 또는 객체의 키를 의미한다.<br>
item : 해당 인덱스나 키가 가진 값을 의미한다.</p>
<script type="text/javascript">
/*
$(function() {
var arr = [
{name:"A", link:"http://www.naver.com"},
{name:"B", link:"http://www.google.com"},
{name:"C", link:"http://www.w3c.com"},
{name:"D", link:"http://www.daum.net"}
];
$.each(arr, function(index, item) {
var output = "";
output += "<a href=" + item.link + ">";
output += "<h2>" + item.name + "</h2>";
output += "</a>";
document.body.innerHTML += output;
});
})
*/
</script>
<hr>
<div id="wrap">
<h1>item-0</h1>
<h1>item-1</h1>
<h1>item-2</h1>
<h1>item-3</h1>
<h1 id="item4">item-4</h1>
</div>
<script>
$(function() {
$("#wrap").children().each(function(index, item) {
// 문서 객체에 class 속성을 추가하는 메소드
$(this).addClass("high_light_" + index);
if(index == 2){
$(this).removeClass("high_light_" + index);
}
});
$("#item4").click(function() {
$(this).toggleClass("high_light_4");
});
})
</script>
<hr>
<h3>문서 객체의 특징 판별 : is()</h3>
<p>매개변수로 선택자를 입력하고, 선택한 객체가 선택자와 일치하는지 판단하여 boolean 리턴</p>
<h3 class="test">test1</h3>
<h3>test2</h3>
<h3 class="test">test3</h3>
<h3 class="test">test4</h3>
<h3>test5</h3>
<h3 class="test">test6</h3>
<script>
$(function(){
$("h3").each(function(){
if($(this).is(".test")){
$(this).css({"background":"orangered", "color":"white"})
}
});
});
</script>
<hr>
<h3>$.extend() 메소드</h3>
<p>객체에 속성을 추가하거나 여러개의 객체를 하나로 합칠 때 사용한다.</p>
<script type="text/javascript">
$(function() {
var obj1 = {
name:"김김김",
age:20
}
var obj2 = {
name:"님님님",
hobby:["낚시", "영화"]
}
$.extend(obj1, {job:"강사"});
console.log(obj1);
console.log(obj2);
// 두 객체를 하나로 합칠 때 사용 할 수 있다.
// 중복되는 객체의 속성은 나중의 것으로 덮어 쓴다.
var objs1 = $.extend(obj1, obj2);
console.log(objs1);
})
</script>
<hr>
<h3>$.noConflict()</h3>
<p>다른 라이브러리나 다른 버전의 jquery와 '$'의 충돌 방지를 위해 사용한다.</p>
<h1 id="test">noConflict() 테스트</h1>
<script type="text/javascript">
/*
var jq = $.noConflict(); // 이 키워드를 통해 $ 키워드 대신 jq를 사용 할 수 있게 된다.
jq(function() {
jq("#test").css("color", "red");
})
*/
// 위의 주석문을 해제하면 페이지의 모든 $가 jq로 바뀌므로 $로 호출한 함수들은 사용할 수 없다.
</script>
<!-- 다른 버전의 jquery와 충돌나는 경우 예시 -->
<!-- <script src="jquery-1.11.1.js">
var jb = jQuery.noConflict();
</script>
<script src="jquery-2.1.1.js">
var hs = jQuery.noConflict();
</script> -->
</body>
</html>
attr() : 해당 객체의 속성을 바꾸거나 확인 할 수 있는 메소드
css() : 해당 객체의 스타일을 바꾸거나 확인 할 수 있는 메소드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.first{color: red;}
.second{color: pink;}
.third{color: orange;}
</style>
</head>
<body>
<h3>attr() 메소드</h3>
<p>문서 객체의 특정 속성 값을 알아내거나 속성을 추가할 때 사용한다.</p>
<img src="../image/flower1.PNG" width="400px" height="300px">
<script>
$(function(){
// 속성 명에 해당하는 속성 값을 리턴
var img = $("img").attr("src");
console.log("사진경로 : " + img);
// 속성명에 해당하는 속성 값을 변경
$("img").attr("src", "../image/flower2.PNG");
// 함수를 통해 인덱스와 value를 활용할 수 있음
$("img").attr("src", function(index, value){
console.log(index, value);
});
// 객체를 통해 여러 속성을 설정
$("img").attr({"width":"100px", "height":"50px"});
// 객체의 속성을 제거
$("img").removeAttr("width").removeAttr("height");
});
</script>
<hr>
<h3>css() 메소드</h3>
<p>문서 객체의 스타일을 검사하거나 변경할 때 사용한다.</p>
<h1 class="first">test-0</h1>
<h1 class="second">test-1</h1>
<h1 class="third">test-2</h1>
<script type="text/javascript">
$(function() {
// 속성 명에 해당하는 속성 값을 리턴
console.log($(".first").css("color"));
// 속성명에 해당하는 속성 값을 변경
$(".first").css("color", "black");
// 함수를 통해 인덱스와 value를 활용할 수 있음
$(".first").css("color", function(index, value) {
console.log(index, value);
});
//객체를 통해 여러 속성을 지정
$(".first").css({"font-size":"3em", "background":"orange"});
})
</script>
</body>
</html>