JQuery - JQuery(제이쿼리) 노트 정리 #1

 

jquery(제이쿼리) css 속성 변경
//같은 부모를 대상으로 변하고
$('td:nth-child(3n+1)').css('background','red'); //3n 세칸 의미 ,+1은 첫번째칸 반복
$('td:nth-child(3n+2)').css('background','blue'); 
$('td:nth-child(3n)').css('background','yellow');
//전체를 대상으로 변한다
$('td:even').css('background','yellow'); //홀수
$('td:odd').css('background','yellow'); //짝수
//.css({속성:"속성값",속성:"속성값"}) 복수의 css

$('h1').html("모든 h1 변경");
$('h1').eq(0).html("h1 첫번째"); //first() 도 가능
$('h1').last().html("h1 마지막");
$('h1').last().append("추가"); //내용 추가
$('h1').addClass('addcl'); //클래스추가

$('h1').removeClass('addcl'); //클래스 삭제

 

jquery(제이쿼리) name으로 값 가져오기 

$(document).ready(function(){
	$("#test").click(function() {
		var myvalue = $("input[name=jmnote]").attr("value");
	});
});

jquery(제이쿼리) 배열

//$(배열).메서드(function(){ return }); //배열일때 가능
var tt = [1,2,3,4,5];
$('h2').html((idx){
	return tt[idx];
});			

jquery(제이쿼리) 테이블 만들기 4x4

var html;
	for(var cnt=1;cnt<=16;cnt++){
		if(cnt%4==1){
			html = "<tr>";
		}
		html += "<td>"+cnt+"</td>";
		if(cnt%4==0){
			html +="<tr>";
			$("table").append(html);
		}
	}

jquery(제이쿼리) each 반복문 

each() 메서드는 배열을 관리할때 사용, each()메서드는 매개 변수로 받은 것을 사용해
each()는 선택한 요소가 여러 개일 때 각각에 대하여 반복하여 함수를 실행

//배열일때
$('h2').each((idx,item){ //item 단위데이터
        		$(item).append('12');
        	});
//object 객체일때
$.each(object,(속성,데이터){ 
		})
			
ex) 반복문과 비슷하다
$('.list li').each(function (index, item) { 
// 인덱스는 말 그대로 인덱스 // item 은 해당 선택자인 객체를 나타냅니다. 
	$(item).addClass('li_0' + index); 
// item 과 this는 같아서 일반적으로 this를 많이 사용합니다. 
// $(this).addClass('li_0' + index); 
});

jquery(제이쿼리)  forEach() 배열의 루프

var fruits = ["Apple", "Banana", "Orange", "Strawberry"];
fruits.forEach(function (item, index, array) {
    console.log(item, index);
});

ex) 배열루프 체크상태
array.forEach(function(dd){
	$(".class[value=" + dd + "]").prop("checked",true); //클래스에 value와 배열인자를 비교
	//console.log(dd);
});

jquery(제이쿼리) 버전 충돌 문제시

$.noConflict();
var J = jquery;
J(document.write(){  });

jquery(제이쿼리) 객체를 전체를 넘길때

var obj = $.extend({a:20,b:20},{c:11,d:13}); //extend는 다수의 객체를 하나로 합칠때
console.log(JSON.stringify(obj));

jquery(제이쿼리) JSON

JSON.parse() //string 객체를 json 객체로 변환 시켜줌
JSON.stringify() //json 객체를 string 객체로 변환

var data = {
	id : "id" ,
	name : "name"
}
var person = JSON.stringify(data); 
/* person: "{"Name":"SooYoung","Age":"29"}" */
var Operson = JSON.parse(strperson);
/* Output: Object */

jquery(제이쿼리) filter

//.end() 메서가 없으면 현재 filter()한 기준에서 indexing을 다시하여 원하는 결과로 처리가 되지 않음.
$('h3').filter(":even").css({
	backgroundColor:'black',
	color:'white'
}).end().filter(":odd").css({background:'red'});

jquery(제이쿼리) .add() 해당객체를 이전객처에 추가하는게 아니라 이후에 적용할 메서드를 같이 적용

$('h1').css('background','red').add('h2').css('float','left');

jquery(제이쿼리) this -  $(this) : 배열의 단위 객체

jquery(제이쿼리) .is(".클래스") : 해당 class 인지 여부를 boolean true 또는 false으로 처리

if($(this).is('select')){}

jquery(제이쿼리) xml을 객체로 변환

var xmldom = $.parseXML(xml);

jquery(제이쿼리) parent() 자신의 부모

$(this).parent().css('background','red');

jquery(제이쿼리) 속성 설정 및 검사 제거

.attr('속성','속성값')
.attr('속성',()=>{})
.attr(object)
removeAttr(name) //문서 객체의 속성 제거

$(".wbinput").attr("readonly",true);

/*$('배열').attr('속성',()=>{
	$(this):각각의 속성에 대한 속성값을 가져오거나 변경을 할 수 있다.
	});*/
$('img').attr("width",(idx)=>{
	return (idx+1)*100;
	});
//속성값을 여러개 할 수 있다.	
$('img').attr({
	width: (idx)=>{
		return
	},
	height: (idx)=>{
		return
	}
	});
	

jquery(제이쿼리) .empty()내용을 없애줌 태그는 그대로 있다

$('div').empty();

jquery(제이쿼리) .fadeIn() .fadeOut() //천천히 나타나기 , 사라지기

 

jquery(제이쿼리) DOM

$('<h1>') //DOM내용을 selector
$('<h1></h1>') //DOM객체의 메모리를 생성.
$('<h1></h1>').html('hi').appendTo('body'); //appendTo('상위객체') : 포함할 상위 객체에 할당.

jquery(제이쿼리) clone 깊은 복사

$('div').append($('h1').clone()); //기존은 없어지고 새로운 내용이 들어감

jquery(제이쿼리) .on() 이벤트

$(선택요소).on('click', function() {
  // 실행할 구문
});

//div 안에 있는 요소를 바인딩
$("#rowsel").on('click' ,".cs1", function(){
 console.log("on event");
});

jquery(제이쿼리) .offset() 이벤트 //마우스를 클릭했을때 위치값을 가져온다

$('#test').off('click'); //click 이벤트를 지운다
event.preventDefault(); //이벤트의 기능을 작동을 못하게 하는 메서드
event.stopPropagation(); //이벤트 전파를 막아주지만 기본 이벤트는 마강주지 않는다

jquery(제이쿼리) this.checked 객체가 체그가 되었는지여부

$('.sel').prop("속성",true/false); //checked 속성을 변경

jquery(제이쿼리) key 이벤트 키코드

$('textarea').keyup((event)=>{
			$("h1").html(event.keyCode);
		});

jquery(제이쿼리) mouseenter , mouseleave

  $('.yellow_circle').mouseenter(function(){
    $('.yellow_circle_word').text('마우스 포인터가 노란색원 안에 있습니다. ');
  });
  $('.yellow_circle').mouseleave(function(){
    $('.yellow_circle_word').text('마우스 포인터가 노란색원을 떠났습니다. ');
  });

jquery(제이쿼리) select 값 가져오기

$('select[name=ca_name]').val()

jquery(제이쿼리) ajax

//get post 둘다 가능
$.get(url,{id : id, zip : zip, type : type}, function(data){
	$(".tagArea").html(data) ;
});

//json으로 넘어 올때
$("#heart").click((){
	$.get(url,{ table : _table , id : id },function(data){
		$("#heartcnt").html(data.id);
	},"json");
});

jquery(제이쿼리) confirm 확인 취소

var con_test = confirm("취소??."); //팝업창
if(con_test == true){
	alert(12);	
}
else if(con_test == false){
	alert(13);	
}

jquery(제이쿼리) trim() 양쪽공배 공백제거

$(this).trim(str);

jquery(제이쿼리) attr() 속성 값을 추가하거나 가져온다

$( 'div' ).attr( 'class' ); //get
$( 'h1' ).attr( 'title', 'Hello' ); //추가