$(선택자).동작함수1().동작함수2()
$가 jQuery를 사용할 수 있게 하는 기본적인 식별자 역할을 한다. 선택자를 이용해서 원하는 요소를 선택하여 동작함수를 이용해 동작하는 구조로써, 현재 많은 web사이트에서 기본적으로 사용하는 중이다.
백단으로 넘어가지 않고 처리할수 있는 많은 부분들을 javascript로 해결하는데 그 js를 편하게 처리하고, 여러 기능을 제공해주는 js 라이브러리가 바로 jQuery이다.
Jquery와 JS의 차이점
Jquery와 js의 문법의 차이점은 아래와 같다.
$('#ssd') == document.getElementById('ssd')
$('.hdd') == document.querySelectorAll('.hdd')
#id 를 선택할때의 jquery와 js문, 그리고 .class 를 선택할때의 jquery와 js문이다. 이때 또 하나의 중요한 점은, 선택자에 의해 선택된 요소를 jQuery객체로 반환하는 것이다. 또한 선택의 요소가 여러개일 경우 (위와 같은 경우는 #ssd, .hdd 가 여러개일 경우)에 자동으로 리스트를 만들어서 저장해준다.
즉, 여러개의 요소가 있을 경우 하나하나 지정해줘야 하는 js와 다르게, jquery를 이용하면 조건없이 자동으로 조작이 가능하다.
여러가지 메소드 종류들을 아래에 기술한다.
jQuery 필터링 메소드
선택자 | 예시 | 설명 |
.first() | $("#요소").first() | 요소 중에서 첫번째 요소를 선택 |
.last() | $("#요소").last() | 요소 중에서 마지막 요소를 선택 |
.eq() | $("#요소").eq(index) | 요소 중에서 index에 해당하는 요소 선택 |
.filter() | $("#요소").filter([요소]) | 요소 중에서 해당 요소가 있으면 해당하는 요소 선택 |
.not() | $("#요소").not([요소]) | 요소 중에서 해당 요소가 있으면 해당 요소를 제외한 나머지 요소 선택 |
.has() | $("#요소").has([요소]) | 요소 중에서 해당 요소가 자식으로 되어 있으면 해당 요소 선택 |
.is() | $("#요소").is([요소]) | 요소 중에서 해당 요소가 있으면 true 값을 반환 |
.slice() | $("#요소").slice([요소]) | 요소 중에서 index 범위에 해당하는 요소 선 |
예제
1. first()
<div class="example">1</div>
<div class="example">2</div>
<div class="example">3</div>
var firstElement = $(".example").first();
console.log(firstElement.text()); // 출력: "1"
2. last()
<div class="example">1</div>
<div class="example">2</div>
<div class="example">3</div>
var lastElement = $(".example").last();
console.log(lastElement.text()); // 출력: "3"
3. eq()
<div class="example">1</div>
<div class="example">2</div>
<div class="example">3</div>
var secondElement = $(".example").eq(1);
console.log(secondElement.text()); // 출력: "2"
4. filter()
<div class="example">1</div>
<div class="example">2</div>
<div class="example example-special">3</div>
var specialElement = $(".example").filter(".example-special");
console.log(specialElement.text()); // 출력: "3"
5. not()
<div class="example">1</div>
<div class="example">2</div>
<div class="example example-special">3</div>
var notSpecialElements = $(".example").not(".example-special");
notSpecialElements.each(function() {
console.log($(this).text()); // 출력: "1", "2"
});
7. is()
<div class="example">Example</div>
var isExample = $(".example").is(".example");
console.log(isExample); // 출력: true
8. slice()
<div class="example">1</div>
<div class="example">2</div>
<div class="example">3</div>
<div class="example">4</div>
var slicedElements = $(".example").slice(1, 3);
slicedElements.each(function() {
console.log($(this).text()); // 출력: "2", "3"
});
jQuery 트리거 메소드
선택자 | 예시 | 설명 |
.trigger() | $("#요소").trigger["이벤트"]) | 이벤트를 실행하고, 바인딩된 핸들러도 실행시킴 |
.triggerhandler() | $("#요소").triggerahndler([요소]) | 이벤트 버블링이나 기본 동작은 발생되지 않고, trigger와 동일 |
1. trigger()
#triggerButton 을 클릭하면 #text의 클릭 이벤트가 trigger된다. 실제로 #text가 클릭되지 않아도 버튼을 클릭하면 해당 text가 클릭되는 효과를 주는 것이기 때문이다.
<button id="triggerButton">Trigger the Event</button>
<p id="text">This is some text.</p>
$("#text").click(function() {
$(this).text("The text has been clicked.");
});
$("#triggerButton").click(function() {
$("#text").trigger("click");
});
2. triggerHandler()
trigger와 triggerHandler의 차이점은 기본 동작과, 버블링이 차단된다는 것이다. trigger의 경우, 위의 코드에서 text를 실제로 클릭하는 효과가 나타나고, 그와 동시에 클릭도 실제로 된다.
그러나 triggerHandler는 실제로 클릭되지는 않지만 이벤트는 발생한다. 그와 동시에 버블링도 일어나지 않는다.
'Javascript' 카테고리의 다른 글
express.js를 이용해 mongodb와 통신중 에러발생 (0) | 2024.08.17 |
---|---|
JsGrid dataload (0) | 2024.04.09 |
AJAX 통신 Promise,async,await (0) | 2023.06.15 |