A> add(셀렉터 혹은 엘리멘트 혹은 htmlString)
--새로운 엘리먼트 추가 (= 새로운 태그 추가)
|
1
2
3
4
5
6
7
|
$(function() {
$("button").click(function() {
$("div").addClass('redBorder')
.add("p")
.addClass('yellow');
});
});
|
cs |
이때 yellow 라는 클래스는 div 와 p 태그에 다 추가가 되지만
redBorder 는 div에만 적용이 된다.
B> filter(조건)
선택된 엘리먼트 중에서 조건에 맞는 엘리먼트 찾기
|
1
2
3
4
5
|
$(function() {
$("div").css("background", "yellow")
.filter(".middle")
.css("border-color", "red");
});
|
cs |
middle 이라는 클래스를 가지고 있는 요소들의 css 에
border-color 속성의 값을 red 로 하기
1.filter(function() ) 도 가능하다
|
1
2
3
4
5
6
7
|
$(function() {
$("div").css("background", "yellow")
.filter(function(index) {
return index == 1 || $(this).attr("id") == "fourth";
})
.css("border-color", "red");
});
|
cs |
|
1
2
3
4
5
6
7
8
|
<body>
<div id="first"></div>
<div id="second" class="middle"></div>
<div id="third" class="middle"></div>
<div id="fourth" class="middle"></div>
<div id="fifth" class="middle"></div>
<div id="sixth"></div>
</body>
|
cs |
html 이 이렇게 되어 있을때
4라인의 index == 1 은 div의 인덱스1인 3번재 라인이고
id가 fourth 인 5번째 라인의 border-color 를 red로 한다.
C> .not()
해당되지 않는 엘리먼트를 필터링
|
1
2
3
4
5
|
$(function() {
$("div").css("background", "yellow")
.not('.middle')
.css("border-color", "red");
});
|
cs |
<body>
<div id="first"></div>
<div id="second" class="middle"></div>
<div id="third" class="middle"></div>
<div id="fourth" class="middle"></div>
<div id="fifth" class="middle"></div>
<div id="sixth"></div>
</body>
html 이 이렇게 있을때 first 와 sixth 4번째 라인 스타일이 적용된다.
|
1
2
3
4
5
6
7
8
9
10
|
$(function() {
$('button').click(function(){
//셀렉터로 얻어낸 확장 집합 객체가 여러 번 사용될 경우에는 변수에 저장해 둔다.
var $div = $('div');
//div 엘리먼트 중에서 2 이상 3미만, 인텍스가 0부터 시작하기에 세번째 엘리먼트만 반환
$div.slice(2, 3).css('background', 'yellow');
//end가 생략된 상태에서 begin만 기술하면 begin부터 끝까지
$div.slice(4).css('background', 'pink');
});
});
|
cs |
|
|
<body>
<div></div>
<div></div> <div>6번째 라인 적용</div> <div></div> <div>8번째 라인 적용</div>
<div>8번째 라인 적용</div> <div>8번째 라인 적용</div> <div>8번째 라인 적용</div> <button> 노란색 입히기</button>
</body>
|
cs |
E> children()
-- 해당 엘리먼트의 자식 엘리먼트 찾기
|
1
2
3
4
5
6
7
|
$(function() {
$('button').click(function(){
$("div").children().css("border-bottom", "3px double red");
$("div").children(".selected").css("color", "red");
// $("div").contents().remove("span");
});
});
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<button> 엘리먼트에 스타일 입히기</button>
<div>
<span class="selected">밑줄 , 빨간색 </span>
</div>
<div> 그리고 마지막으로
<span> 밑줄 </span>
</div>
|
cs |
F> next()
--엘리먼트 바로 다음에 위치 하는 형제 요소 찾기
nextAll() -- 해당 요소 뒤에 있는 모든 엘리먼트 찾기
G> prev()
--동일한 형제 기준으로 앞에 있는 형제 엘리먼트 찾기
$('태그').prev() --태그 바로 이전의 요소 찾는다.
prevAll() --해당 요소 이전의 모든 요소를 찾는다.
H> siblings()
--형제 엘리먼트를 찾는다.
I> parent()
가장 인접한 부모 엘리먼트 요소를 찾는다.
parents()
--모든 부모 엘리먼트를 찾는다.
parentUntil('대상(태그나 선택자 등)')
--대상까지의 부모 엘리먼트를 찾는다.
J> find('표현식')
--표현식(태그, 선택자 등) 에 해당하는 엘리먼트를 찾는다.
K> andself()
-- 최초 대상이었던 엘리먼트를 포함해서 리턴한다.
--1.8 버전에선 deprecated
L> end()
--메소드 체이닝 중 최초의 엘리먼트로 돌아가기
|
1
2
3
4
5
6
|
$(function() {
$("div").find("p")
.addClass("background")
.end()
.addClass("border");
});
|
cs |
이때 end 를 쓰면 div에 대한 addClass 가 작동한다.
'언어 > javascript' 카테고리의 다른 글
| jQuery5 --이펙트(effect) (0) | 2021.02.17 |
|---|---|
| jQuery4 --DOM 조작하기 (0) | 2021.02.17 |
| jQuery3 --attribute 다루기 (0) | 2021.02.16 |
| jQuery2 - 필터( filter) (0) | 2021.02.16 |
| jquery1 --기본 선택자 (0) | 2021.02.15 |