jQuery정리

2022.08.17

1. Class 관련

.addClass('className')
선택한 요소에 클래스 값을 추가한다. 

.removeClass('className')
선택한 요소에 클래스 값을 제거한다. 

.toggleClass('className')
선택한 요소에 클래스값을 넣었다 뺐다 할 수 있다. 
지정한 클래스를 이미 갖고 있으면 제거, 없으면 추가한다.

.hasClass('className')
if문과 함께 사용하며, 선택한 요소가 클래스값을 가지고 있는지에 따라서 true or false를 반환한다.

2. 선택한 요소의 크기 가져오기 

영역 예시

.width()
- padding 안쪽의 너비를 가져온다.

.innerWidth()
- border 안쪽의 너비를 가져온다.

.outerWidth()
- border를 포함한 너비를 가져온다.

.height()
- padding 안쪽의 높이를 가져온다.

.innerHeight()
- border 안쪽의 높이를 가져온다.

.outerHeight()
- border를 포함한 높이를 가져온다.

3. id, class, name

//1. id로 class, name구하기
var name_by_id = $('#test_id').attr('name');
var class_by_id = $('#test_id').attr('class');
 
//2. class로 id, name구하기
var name_by_class = $('.test_class').attr('name');
var id_by_class = $('.test_class').attr('id');
 
//3. name으로 class, id구하기
var id_by_name = $('[name="test_name"]').attr('id');
var class_by_name = $('[name="test_name"]').attr('class');
 
 
<!--sample div -->
<div class="test_class" id="test_id" name="test_name"></div>

 

 

참조
- https://www.codingfactory.net/10684

jQuery / 선택한 요소의 가로 크기 가져오기 - width, innerWidth, outerWidth