Jquery 함수 모음

    태그 요소 필터

//특정 태그 제외 
$("div").not(".clsn")  
  
//해당 태그 내용물들 전체 삭제 
$("#div1").remove(); 
  
//div안 모든 것을 비운다 
$("#div1").empty();  
  
//div내의 특정 요소만 삭제 (pcls요소 삭제) 
$(".pcls").empty();  
  
//태그내의 특정요소들 삭제(p태그 내의 pid요소와 pcls요소 두가지를 한 번에 삭제)  
$("p").remove("#pid, .pcls");

//특정 태그 지정
$("input[type='checkbox'][name='tag_name']")

//value 값으로 지정
$("input:radio[name ='rd']:input[value='ABC']")

// 홀수 또는 짝수 인덱스 요소 선택

// odd  : 홀수 요소 선택  1-3-5
// even : 짝수 요소 선택 0-2-4

$( 'p:odd' )
$( 'p:even' )

 

    태그 속성 값 조회 , 추가

.attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 

 

※ 참고

jQuery 1.6에서는 기존의 attr()로 처리되었던 것을  attr()과 prop()로 분리 처리함. 

사용에 관한 구분을 보고싶다면 ↓ 
http://egloos.zum.com/tiger5net/v/5667938 

 

    조회

// div 태그에 class 명을 조회한다.
$('div').attr('class'); 

// div 태그에 id 명을 조회한다.
$('div').attr('id');

    추가

// .attr( 속성, 값 ) 
$('div').attr( 'width', '150px' ); 
//div에 width:150px를 추가한다.

 

 

    테이블 컨트롤

    데이터 클릭 

1. 단일 클릭

$('td#btn1').click(function() { alert("Click btn1"); }); 

2. 더블 클릭

$('td#btn2').dblclick(function() { alert("Double Click btn2"); });

    데이터 추가 

$('#table > tbody:last').append('<tr> <td>1</td> <td>2</td> </tr>');

※ 맨 마지막 행에 데이터 삽입

    데이터 삭제 

 

1. 행 삭제
1-1 넘겨받은 객체 삭제 

$(this).closest("tr").remove(); 

1-2 지정 객체 삭제

$('#table tr td:nth-child(1)').remove(); 

※ 모든 td 첫 번째 요소를 삭제한다.
   nth-child의 index는 1부터 시작이다.

2. 모든 행 삭제

$( '#table > tbody').empty(); 

※ table tbody에 주제컬럼을 만들면 모두 지워지므로,
   테이블 헤더를 thead에 별도로 만들어 둔다.

 

    하위 태그 수집 

children()은 부모 요소의 바로 아래 자식만 선택하나, 
find()는 부모 요소의 모든 하위 요소를 가져온다. 

 

    children

 

    ul의 자식요소를 찾는다. 

$('#ul_id').children

    Article에서 view 클래스명의 자식요소를 찾는다. 

$('#Article').children('.view'); 

    div 태그에서 span 태그를 찾는다. 

$('div').children('span')

    find 

    ul 태그에서 모든 li태그를 찾는다. 

$('ul').find('li')

 

    기타

    클래스 존재 여부 확인 

$('#table').hasClass("class_name") 

※ 해당 태그에 class_name이 있으면 true , 아니면 false 반환

    그룹 태그 값 가져오기

<input type="text" name="tb" value="val1">
<input type="text" name="tb" value="val2">
$("input[name^='tb']").each(function() { alert($(this).val()) });

※ 입력 태그 중에 name이 tb인 모든 요소를 가져온다.

 

    라디오 버튼 및 체크박스 제어

// checked 여부 확인
$("input:checkbox[id='ID']").is(":checked") == true : false  /* by ID */
$("input:checkbox[name='NAME']").is(":checked") == true : false /* by NAME */

// checked/unchecked 처리
$("input:checkbox[id='ID']").prop("checked", true); /* by ID */
$("input:checkbox[name='NAME']").prop("checked", false); /* by NAME */

// 클릭한 checkbox의 선택 여부 확인
$(function(){
    $("#div :checkbox").click(function(){
    alert($(this).is(":checked"));
  });
});

// 현재 선택된 checkbox index 구하기
$(this).index('input:checkbox')

// 클릭한 버튼의 name 값 가져오기
$(".copy_selector").click(function(e){ let but_name = $(this)[0].name; })

// 특정 라디오버튼 선택 / 모든 라디오버튼 선택해제
$("input:radio[name='NAME']:radio[value='VALUE']").attr("checked",true);
$("input:radio[name='NAME']").removeAttr("checked");

// 전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택 jQuery
$(function(){
    $("#check_all").click(function(){
        var chk = $(this).is(":checked");//.attr('checked');
        if(chk) $(".select_subject input").prop('checked', true);
        else  $(".select_subject input").prop('checked', false);
    });
});

// 전체선택 체크박스를 선택하면 그 아래의 모든 체크박스를 선택 HTML
<label><input type="checkbox" id="check_all" class="input_check"> <b>전체선택</b></label>
<ul class="select_subject">
<label><input type="checkbox" class="input_check" name="class[1]" value="1"> <b>1</b></label>
<label><input type="checkbox" class="input_check" name="class[2]" value="2"> <b>2</b></label>
</ul>

 

   html 페이지 로딩 및 추가

$("#output-html").html( `<p>hi</p>`);
$("#output-html").append( `<p>hi2</p>`);

 

 

   입력창 변경 감지

// 입력 창 변경 감지
$("#tag").on('change keyup paste', function() 
{
   alert('change');
});

 

 

 

    화면 중앙정렬

 

1. 커스텀 메소드 사용 - http://bitly.kr/JCpDS2

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");    
    return this;
} $(element).center();

2. 양쪽 정렬

$("body").css( { "margin-left" : $(window).width() / 2 , "margin-right" : $(window).width()/2 } );

 

    태그 존재 여부 확인

if ( $('#my_tag').length ){

alert("my_tag exists");

}else{

alert("my_tag does not exists");

}

 

    jQuery 카테고리 선택에 따른 하위 카테고리 변경 (selecbox, 다중셀렉트)

https://huskdoll.tistory.com/497

 

 

    중복 데이터 제거

// ■ 방법1 ■
var array = [1,2,3,1,2];
var result = [];
$.each(array, function(i,e){ if($.inArray(e,result)===-1) result.push(e) ;});
// result - [1,2,3]

// ■ 방법2 ■
const distinct = (value,index,self) => {
return self.indexOf(value) === index;
}
const years = [2016,2017,2017,2016,2019,2018,2019];
const disy = years.filter(distinct);
// disy - [2016, 2017, 2019, 2018]

// ■ 방법3 ■
var myArray = [ 1, 2, 3, 2, 1 ];
var result = $.unique(myArray.sort());
// result - [1,2,3]

 

    XML 조작

 

var xml=""; //예제 xml파일 
xml+="<friends>";
xml+="<friend>";
xml+="<name>홍길동</name>";
xml+="<age>40</age>";
xml+="</friend>";
xml+="<friend>";
xml+="<name>강감찬</name>";
xml+="<age>37</age>";
xml+="</friend>";
xml+="<friend>";
xml+="<name>이순신</name>";
xml+="<age>39</age>";
xml+="</friend>";
xml+="</friends>";


var xmlDoc=$.parseXML(xml); 

var str="";

$(xmlDoc).find("friend").each(function(index){    

  str +="<div>";
  str+="<h1>"+$(this).find("name").text()+"</h1>";
  str+="<p>"+$(this).find("age").text()+"</p>";
  str +="</div>";

});

 

    폰트 사이즈 조절하기

$("div.button").click(function() {
var $speech = $("div.speech");
var currentSize = $speech.css("fontSize"); /* 폰트사이즈를 알아낸다. */
var num = parseFloat(currentSize, 10); /* parseFloat()은 숫자가 아니면 숫자가 아니라는 뜻의 NaN을 반환한다. */
var unit = currentSize.slice(-2); /* 끝에서부터 두자리의 문자를 가져온다. */

if(this.id == "switcher-large"){
num *= 1.4; /* num = num * 1.4 와 동일하다. */
} else if(this.id == "switcher-small") {
num /= 1.4; /* num = num / 1.4 와 동일하다. */
}

$speech.css("fontSize", num + unit);
});

 

    1초 지나면 한번 실행하기

function my_timer()
{
  var focus_timer = setInterval(function() {
      //실행할 스크립트
      clearInterval(focus_timer);
  }, 1000);
}

<input type="button" onclick="my_timer()" value="click_me">

 

    서서히 사라지는 요소

$("#copy_to_text").text("Something was selected").show().fadeOut(500);