Additional Selectors
eq()
<script>
$("b:eq(1)").css("background-color","orange"); //b태그중 2번째 인덱스
$("b").eq(2).css("background-color","pink"); //b태그중 3번째 인덱스
</script>- eq()는 선택자 중 동일한 태그 중 하나를 특정
first(), last()
<script>
$("b:first").css("border","2px solid red"); //b태그중 첫번째 인덱스
$("b").last().css("border","4px dotted green"); //b태그중 마지막 인덱스
</script>- first는 eq(0), last는 eq(마지막 인덱스 번호)와 같음
lt(), gt()
<script>
$("b:gt(1)").css("font-size","30px"); //2번 인덱스부터 모두 변경
$("b:lt(2)").css("background-color","black"); //0,1번
</script>- gt(i)는 i보다 큰 인덱스 전체 선택, lt(i)는 i보다 작은 인덱스 전체 선택
next(), prev()
<script>
$("figure>img").next().text(); //figure아래 img 다음 태그의 text 추출
$("h3>b").next().next().text(); //h3아래 b 태그의 다음 다음 태그의 text 추출
$("span").prev().text(); //span태그의 앞 태그의 text 추출
</script>- next()와 prev()는 해당 태그 뒤와 앞의 태그 선택
- append()는 선택된 태그 안에 추가하는 함수이므로 next() 혹은 prev()로 선택 불가
find()
<script>
$("ul li").find("b").remove(); //ul아래 li태그의 하위태그중 b태그를 제거
</script>- find()는 대상 태그의 하위 태그로 한정된 범위에서 태그를 선택하여 추출
Inserting within HTML
- html() : 자바스크립트의 innerHTML()에 해당
- text() : 자바스크립트의 innerText()에 해당
- append() : 안에 추가
- after() : 이후에 추가
<body>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
</body>- 기존의 html 요소를 준 후 이곳에 다른 요소를 삽입
<script>
//h2중에서 1번째에 html태그 넣기
$("h2").first().html("<b>H2태그입니다</b>");
//h2태그중에서 2번째에 text로 2번째h2태그입니다
$("h2:eq(1)").text("<b>2번째 H2태그입니다</b>");
//append는 기존값 뒤에 추가하기
$("h2:eq(2)").append("<img src='../Food/f1.png'>");
</script>- html()로써 삽입한 태그는 태그가 적용된 채로 출력
- text()로써 삽입한 태그는 태그가 전부 텍스트로 출력
- append는 기존 html 요소 내부의 후방에 태그 추가
<script>
//3번째 h2태그 뒤에 이미지넣고 너비,높이 100
$("h2").eq(2).append("<img src='../Food/f2.png'>");
$("h2:eq(2) img").css({
"width":"100px",
"height":"100px"
});
//이벤트
//첫번째 h2를 클릭시 자기가가지고 있는 text를 alert로 반환
$("h2:eq(0)").click(function(){
alert($(this).text());
});
//마지막h2 클릭시 자신의 html을 경고창에 반환
$("h2:last").click(function(){
alert($(this).html());
});
</script>- html(), text(), append() 등으로 변경한 html 요소의 style 등을 변경하기 위해서는 다른 코드를 추가 입력해야 함(대상 태그($( ))가 달라져야 하므로)
- 대상 태그($( ))에 특정 행위 시 발생하는 이벤트는 $(대상 태그).(이벤트).(function( ){ });
Variable Local to Global
- 변수 앞에 var 지정어를 제거하면 지역변수를 전역변수화 가능
<body>
<h3 class="a"></h3>
<h3 class="b"></h3>
</body>
<script>
$("h3.a").click(function(){
tag=$(this).html(); //var 제거하면 전역변수화
alert("안의 코드 복사함");
});
//h3.b를 클릭시 위의 내용이 그대로 복사되도록
$("h3.b").click(function(){
$(this).html(tag);
});
</script>- 위의 변수 tag를 function 밖에서 선언할 경우 this변수를 사용할 수 없고, 내부에서 선언할 경우 지역변수가 되므로 다른 function에서 사용 불가
- 그러나 tag를 전역변수화하면 다른 함수에서도 동일하게 사용 가능
this in JQuery
- jquery에서 this는 $()내의 대상 태그를 의미
<body>
<img src="../만화이미지/02.png" width="150">
<img src="../만화이미지/03.png" width="150">
<img src="../만화이미지/04.png" width="150">
</body>- 이미지 3개 출력
- 이미지에 각각 마우스를 올리면 f20 이미지로 변경되며, 마우스가 벗어나면 원래이미지로 돌아가게 하는 코드 작성
<script>
$("img").mouseover(function(){
imgO=$(this).attr("src");
$(this).attr("src","../Food/f20.png");
});
$("img").mouseout(function(){
$(this).attr("src",imgO);
});
</script>- this가 아닌 img라고 코드 작성 시 img 태그 3개 모두가 선택되므로 오류 발생
- this는 지정된 img 태그들 중 선택된 각각의 이미지 의미
ToggleClass
- addClass("클래스명") : 클래스 추가
- removeClass("클래스명") : 클래스 제거
- removeClass() : 모든 클래스 제거
- toggleClass("클래스명") : 클래스 추가, 제거 번갈아 실행
<style>
.select{
//css style 코드..
}
</style>- 클래스 속성 부여
<body>
<img src="../쇼핑몰사진/14.jpg"><br>
<img src="../쇼핑몰사진/15.jpg"><br>
<img src="../쇼핑몰사진/17.jpg"><br>
</body>- 3개의 이미지 출력
- 마우스를 올리면 클래스 추가, 벗어나면 제거하기 위한 코드 작성
<script>
$(function(){
//첫이미지에 마우스올리고 벗어날때 이벤트
$("img:eq(0)").hover(function(){
$(this).addClass("select");
},function(){
$(this).removeClass("select");
});
//toggle로 적용
$("img:eq(1)").hover(function(){
$(this).toggleClass("select");
});
//부트스트랩의 class추가
$("img:eq(2)").hover(function(){
$(this).toggleClass("rounded-circle img-thumbnail");
});
});
</script>- hover() 이벤트는 두 개의 function()을 요구(mouseover, mouseout 각각 이벤트 부여)
- toggleCalss()는 addClass()와 removeClass() 기능을 합한 것
Additional Features of Attribute
<body>
<img src="../만화이미지/10.png" width="100" irum="캐릭터">
<h3>이미지 속성 변경하기</h3>
<figure>
<img src="../Food/f1.png">
<figcaption>꽃1</figcaption>
</figure>
<figure>
<img src="../Food/f2.png">
<figcaption>꽃2</figcaption>
</figure>
</body>- 첫번째 이미지에 irum이라는 사용자 정의 속성을 부여
<script>
$("img:eq(0)").click(function(){
//irum속성 얻어서 2번 img다음에 b태그로 넣기
//after: 특정태그 이후 추가
//append: 특정태그 안에 추가
var irum=$(this).attr("irum");
$("img:eq(2)").after("<b>"+irum+"</b><br>");
});
</script>- irum은 사용자 정의 속성임에도 불구하고 attr(getAttribute)로 호출 가능
- 0번 인덱스 이미지를 클릭하면 2번 인덱스 이미지와 figcaption 사이에 irum 속성이 굵게 출력
Loop in JQuery
each()
<script>
//b태그 갯수만큼 자동반복
//i는 index: 0부터
//element는 인덱스에 해당하는 b 태그(생략가능)
$("b").each(function(i,elt){
//$(elt).text(i);
$(this).text(i);
});
$("ul li").each(function(i){
$(this).addClass("bg_"+i);
});
</script>- 선택자 태그의 갯수만큼 주어진 함수 반복 (인덱스는 0부터 시작)
- 함수의 인자 값으로는 (인덱스, 대상 태그) 입력 필요 (다만 대상 태그는 함수 내부에서 this로 대체 가능하기 때문에 생략 가능)
<body>
<button type="button" class="btn btn-outline-info">스타일 적용</button>
<button type="button" class="btn btn-outline-danger">스타일 제거</button>
<div>안녕하세요</div>
<div>오늘은 제이커리</div>
<div>반복문과 addClass를</div>
<div>배우고 있어요</div>
<div>화이팅!!!</div>
</body>- 2개의 버튼과 5개의 <div> 박스
<script>
$(function(){
//적용버튼 누르면 모든 div에 인덱스별로 적용된다
$("button.btn-outline-info").click(function(){
$("div").each(function(i){
$(this).addClass("hello_"+i);
});
});
//제거 누르면 인덱스별 적용된 클래스 제거
$("button.btn-outline-danger").click(function(){
$("div").each(function(i){
$(this).removeClass("hello_"+i);
});
});
})
</script>- 각 버튼 클릭 시 div 태그의 갯수만큼 함수가 반복되며 인덱스(i) 증가
초보개발자
감사합니다. 이런 정보를 나눠주셔서 좋아요.