jQuery 문법의 모든것...

Cheol·2023년 7월 18일
jquery
1

edu day 44, 45, 46

jQuery❓

모든 브라우저에서 동작하는 자바스크립트 오픈소스 라이브러리이다.

  • 제작 목표
    • DOM과 관련된 처리 쉽게 구현
    • 일관된 이벤트 연결 쉽게 구현
    • 시각적 효과 쉽게 구현
    • Ajax 애플리케이션 쉽게 구현

jQeury 특징

  • CSS 선택자 기반의 DOM 처리가 가능하여 기존 JavaScript와 비교할 떄 매우 쉽고 동적인 화면 처리가 가능하다.

  • Ajax 애플리케이션 개발이 쉽다.

  • 한꺼번에 여러 다른 동작을 처리하는 함수를 연결하여 사용하는 '메서드체인' 기능을 효과적으로 사용할 수 있다.

  • 오픈 소스로서 무료로 사용 가능하다.

  • 다양한 jQuery 플러그인을 사용할 수 있다.

  • 웹 브라우저 종류와 상관 없이 개발 가능한 크로스 브라우징(Cross Browsing)이 가능하다.

설치환경

jQuery 공식 사이트에 들어가 다운로드 하면
사용할 수 있다.
<script type="text/javascript" src="jquery-2.2.1.js"></script>


❗CDN 방식??

  • Content Delivery Network의 약자(링크 형태)
  • 사용자에게 간편하게 컨텐츠 제공하는 방식 의미
    (분산 서버를 활용하여 병목현상 방지)
    • 구글, MS, jQuery측에서 사용자가 jQuery를 사용하기 편하게 컨텐츠 제공
      <script type="text/javascript" src="../jquery-3.5.1.min.js"></script>

앞으로 CDN 방식으로 계속 사용할 것이다.


📌jQeury 문법

기본 문법

$(selector).action();

  • $문자는 jQuery를 선언하거나 접근할 때 사용한다.
    $문자는 'jQuery' 문자의 별칭(alias)이다. jQuery(selctor).action();과 동일
    일반적으로 $ 문자를 주로 사용한다.
  • selector는 CSS의 선택자를 의미한다.
  • action()는 HTML에서 특정 이벤트가 발생할 때 실행되는 함수이다.

$(document).ready(함수명)

  • jQuery로 시작하는 모든 페이지는 ready()로 시작한다.
  • 문서 준비가 완료되면 인자로 전달된 함수를 실행하라는 의미
  • jQuery 이벤트 메서드 중 하나로서 여러 번 사용 가능하다.

😁document 객체의 ready 이벤트 연결

<script>
  	$(document).ready(function(){
  
	});
</script>

🤔window 객체의 load 이벤트 연결

<script>
	window.onload = function(){
  
	};
</script>


📚태그 선택자 [ selector ]

📒jQuery 기본 선택자 (Core)

선택자 종류표현식설명
All Selector$("*")HTML DOM의 모든 Element 선택
Element Selector$("tag")지정된 tag와 일치하는 모든 Element 선택
ID Selector$("#id")지정된 id와 일치하는 Element 선택
Class Selector$(".class")지정된 class와 일치하는 모든 Element 선택
Multiple Selector$("tag1, tag2")지정된 tag1, tag2와 일치하는 모든 Element 선택

  • js와 jQuery의 차이점

    js : 선택시 태그가 그대로 선택
    input type = "text" : value
    div, span의 글씨 : innerText, innerHTML


    jQeury : $("선택자") 선택한 태그가 태그 아닌 fn으로 표시됨 => jquery객체
    input type = "text" : val() 함수 사용
    div, span의 글씨 : text(), html()


📗전체 선택자 (*)

CSS의 가장 기본적인 선택자는 전체 선택자인 Wildcard Selector 이다.

HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자.

  • 모든 문서 객체의 color 스타일 속성에 red 입력
$(document).ready(function(){
	$("*").css("color","red");	//document.getElementsByTagName().style=""
	//css(속성이름, 속성값)
});


📕태그 선택자 ( 태그명 )

  • 태그 선택자는 지정한 태그만 선택하는 선택자이다.
  • 태그의 이름을 명시적으로 사용한다.
  • 하나 이상의 태그 선택자 사용시 , 이용
$(document).ready(function(){
	var x = $("p");	//jquery	
	console.log(x);
	console.log(x[0].innerText,x[1].innerText);	//p태그 innerText사용
	//console.log(x[0].text());	// 배열에서 p태그 자체가 선택되었기 때문에 jquery 선택자 사용 불가
	console.log($("div"));
	var x2 = $("div");
	console.log(x2[0].innerText, x2[1].innerText);
}

--> p태그를 뽑아온 x는 태그형태이기 때문에 text()선택자를 사용할 수 없다.


📙아이디 선택자 ( #id값 )

  • 특정한 id 속성을 가지고 있는 문서 객체 선택하는 선택자
  • getElementById()와 동일한 기능
	$(document).ready(function(){
		var a1 = $("#a");
		console.log(a1.text());
		var a2 = document.getElementById("a");
		console.log(a2.innerText);
		var a3 = $(a2);
		console.log(a3.text());
		
		var a4 = $("#a2");
		a4.css("color","red");
		console.log(a4.text());
		
		a1.text("Hi");	//정상 값 변경
	//	a2.innerText("Hi");	//innerText 사용 불가
		
	})


📘클래스 선택자 ( .클래스명 )

  • 특정한 class 속성 가진 문서 객체를 선택하는 선택자
  • getElementsbyClassName()과 동일한 기능.
	$(document).ready(function(){
		console.log("첫번째 myClass>>", $(".myClass").first().text());
		console.log("마지막 myClass>>", $(".myClass").last().text());

		var m = $(".myClass");
		console.log(m[0].innerText);
		var mLen = $(".myClass").length;
		console.log(mLen);
		
		for (var i = 0; i < mLen; i++) {
			console.log(m[i].innerText);
		}
		console.log("-----------------------");
		for (var i = 0; i < mLen; i++) {
			var a = $(m[i]);
			console.log(a.text());
		}
	});

--> 태그 선택자 처럼 배열로 값을 받기 때문에 index로 값을 얻을 수 있고 for문을 통해 전체 값을 얻을 수 있다.



📓jQuery 계층 선택자 ( hierarchy )

CSS에서 배운 내용이다.

선택자 종류표현식설명
Child Selector$("parent > child")부모요소 바로 아래 자식요소를 반환
Descendant Selector$("ancestor descendant")조상요소 아래 일치하는 모든 자손요소 반환
Next Adjacent Selector$("prev + next")prev요소 바로 다음에 오는 형제요소 반환
Next Siblings Selector$("prev ~ siblings")prev요소 이후 형제요소중 siblings와 동일한 형제요스들을 반환

자식 선택자

  • 자식을 선택하는 선택자
  • 부모 > 자식 의 형태로 사용

자손 선택자

  • 자손을 선택하는 선택자
  • 요소A 요소B의 형태로 사용한다.

인접한 형제 요소 선택자

  • 같은 레벨(Level)의 형제 오소들 중에서 바로 뒤에 인접한 형제요소 접근
  • 요소A + 요소B 의 형태로 사용한다.

모든 형제 요소 선택자

  • 같은 레벨(Level)의 형제 요소들 중에서 뒤의 모든 형제요소 접근
  • 요소A ~ 요소B 의 형태로 사용한다.


📔jQuery 속성 선택자

마찬가지로 css에서 배웠다.
기본 선택자 뒤에 붙여 사용 가능하다.

선택자 형태설명
요소[속성]특정 속성을 가지고 있는 문서 객체를 선택한다.
요소[속성=값]속성 안의 값이 특정 값과 같은 문서 객체를 선택한다.
요소[속성~=값]속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택한다.
요소[속성^=값]속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택한다.
요소[속성$=값]속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택한다.
요소[속성*=값]속성 안의 값이 특정 값을 포함하는 문서 객체를 선택한다.

🤔요소[속성]

  • 지정된 속성과 일치하는 모든 요소 접근
  • [속성] 형식으로 사용시 검색 대상은 모든 html 태그 대상
  • 요소[속성] 형식으로 사용시 요소 중에서 [속성]과 일치하는 요소 접근

  • a태그의 href속성에 해당하는 요소를 선택하여 옵션주기.
$(function(){
		$("a[href]").css("color","red").css("font-size","40px");
	});


😁요소[속성="값"], [속성 !="값"]

  • 지정된 속성="값"과 일치하는 모든 요소 접근
  • [속성] 형식으로 사용시 검색 대상은 모든 html 태그 대상
  • 요소[속성] 형식으로 사용시 요소 중에서 [속성]과 일치하는 요소 접근

  • href가 https://daum.net 에 해당하는 요소 선택하여 옵션추가
	$(function(){
		$("[href='https://daum.net']").css("color","red");
		$("[href!='https://daum.net']").css("color","red");

	});



😁요소[속성^="값"], [속성 $="값"]

  • 지정된 속성값으로 시작하는 요소 및 끝나는 요소 접근
	$(function(){
		
		$("a[href^='https']").css("color","red");
		//https로 시작하는 요소 접근
      	$("a[href$='.net']").css("color","red");
  		//.net로 끝나는 요소 접근
	});

😁요소[속성*="값"]

  • 지정된 속성값이 포함된 요소 및 공백으로 정확하게 구분된 요소 접근
	$(function(){
		$("a[href*='www']").css("color","red");
      	//www가 포함된 요소 접근
	});


🔎JQuery 필터 선택자

마찬가지로 다양한 방식으로 원하는 요소를 걸러낸다.
:기호를 사용하며 대부분 일반 선택자와 같이 사용하지만 단독으로 사용 가능하다.

  • 종류
    • Basic Filter
    • Child Filter
    • Form Filter
    • Content Filter

😁Basic Filter

표현식설명
:animated애니메이션이 동작중인 모든 요소 반환
:eq(index)index에 해당하는 요소 반환. 음수값을 지정하면 마지막 요소부터 count된다. (0부터 시작)
:even짝수 요소를 반환 (0부터 시작)
:odd홀수 요소를 반환 (0부터 시작)
:first첫 번째 요소를 반환. eq(0)과 동일하다
:last마지막 요소를 반환
:gt(index)index보다 큰 index에 해당하는 요소를 반환. 음수값을 지정하면 마지막 요소부터 count된다. (0부터 시작)
:li(index)index보다 작은 index에 해당하는 요소를 반환. 음수값을 지정하면 마지막 요소부터 count된다. (0부터 시작)
:not(selector)selector와 일치하지 않는 모든 요소를 반환
:focus현재 포커스 받은 요소를 반환

😁실습

:animated

<style type="text/css">
	div{
	background: red;
	border: 1px solid blue;
	width: 70px;
	height: 70px;
	margin: 0 3 px;
	float: left;
	}
	
	.toggleWidth{
	width:40px;
	}
	
</style>

<script type="text/javascript" src="../jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	
	$(function(){
	/* 	$("#run").click(function(){//1. 선택자.이벤트명(처리함수)
			$(":animated").toggleClass("toggleWidth");
		}); */
		
	 	$("#run").on("click", function(){//2. 선택자.on(이벤트, 처리함수)
			$(":animated").toggleClass("toggleWidth");
		}); 
		
		function animateIt(){
			$("#ani").slideToggle("slow", animateIt);
		}
		animateIt();
	});
	
</script>

--> id가 run인 button을 클릭할 때 마다 :animated를 사용하여 동작중인 애니메이션 요소에 접근하고, 그 요소에 toggleWidth 클래스가 실행되게 한다.


:first / :last

$(function(){
		//전체문서 중 first 1
		var x = $(":first");
		console.log(x);	//html
		
		//전체문서
		var x = $(":last");
		console.log(":last>>", x);
		console.log(":last>>", x.text());
		
		//ul한정 : 첫번째ul
		var x = $("ul:first");
		console.log(x);
		
		//li한정
		var x = $("li:last");
		console.log(x);
  
  
  		//모든 자식들 중 첫번째 자식
		var x = $(":first-child");
		console.log(":first-child",x);
		
		//지정된 ul의 부모기준
		var x = $("ul:first-child");
		console.log("ul:first-child", x);

		//ul의 첫번째 자식
		var x = $("ul > :first-child");
		console.log("ul > :first-child", x);
		
		var x = $("ul > :last-child");
		console.log("ul > :last-child", x);
	})

--> first-child: 부모를 기준으로 첫 자식
last-child: 부모를 기준으로 마지막 자식

		var x = $("ul > :last-child");
		console.log("ul > :last-child", x);
		
		console.log(x.text());
		
		var x1 = $(x);
		
		for (var i = 0; i < x1.length; i++) {
			console.log(x1[i].innerText);
			console.log($(x1[i]).text());
		}

--> 콘솔창에서 fn.init 형태인지, 태그 형태인지 파악하는게 중요하다.


:nth-child(index) / nth-child(2n)

지정된 요소의 부모 요소를 대상으로 일치하는 index에 해당하는 자식 반환 (index는 1부터)

	$(function(){
		
		//부모 기준의 자식 하나만 있는 것을 선택
		var x = $("h1:only-child");
		console.log(x);
	//	x.css("color", "red");
		
		//li 태그의 짝수
		var x = $("li:nth-child(2n)");	//nth-child는 인덱스 1부터 시작
	//	x.css("color","red");

		//li 태그의 짝수
		var x = $("li:nth-child(even)");	
		console.log("li:nth-child(even)>>>", x);
	//	x.css("color", "yellow");
		//li 태그의 홀수
		var x = $("li:nth-child(odd)");
		console.log("li:nth-child(odd)>>>", x);
	//	x.css("color", "yellow");
		
	
		var x = $("li:even");	//인덱스 0부터 시작
		console.log("li:even>>",x);
		x.css("color", "yellow");

		var x = $("li:odd");	//인덱스 0부터 시작
		console.log("li:odd>>",x);
		x.css("font-size", "40px");
		
	})

:gt(index) / :lt(index)

	$(function(){
		
		var x = $("li:eq(2)");
		console.log("li:eq(2)",x.text());	//2번째 인덱스 요소 반환. 0부터 시작
		x.css("color", "red"); 
		
		//greater than 모든 li선택 후
		//2번째 인덱스보다 큰 요소 반환 (3번째 부터 css 적용)
		  var x = $("li:gt(2)");
		console.log("li:gt(2)", x);			
		x.css("color", "red");  
		
		//5번째 인덱스보다 작은 요소 반환 (4번째 부터 css 적용)
		 var x = $("li:lt(5)");
		console.log("li:li(5)",x);
		x.css("color", "red"); 
		
	});

--> gt와 lt는 지정한 인덱스의 다음 인덱스부터 적용된다.
또한 인덱스는 0부터 시작한다.


:focus

<script type="text/javascript">

	$(function(){
		$("input").click(function(){
			console.log($("input"));
			$("input:focus").css("background-color", "yellow");
			$("input:not(:focus)").removeAttr("style");	//focus 이외의 모든 스타일 삭제
		});	//end click
	})	//end doc
	
</script>
</head>
<body>
<input type="text" value="one"></input>
    <input type="text" value="two"></input>
    <input type="text" value="three"></input>
</body>

--> input태그 요소를 클릭할 때로 이벤트를 두었고, 어떤 것을 클릭했는지 :focus를 통해 접근하여 스타일 적용.
해당 focus가 아닌 나머지는 removeAttr을 통해 스타일 삭제.



😁Form Filter

:button 필터 및 :enable / :disable

input 태그 중에서 type속성이 button 또는 <button> 태그 반환.
활성화된 요소 및 비활성화된 요소 반환

$(function(){
		console.log("실행>>>>>>>>");
		
		$("#disable").on("click",function(){
			$("input[type='text']:enabled").removeAttr("enabled");
			$("input[type='text']").attr("disabled", "disabled");
		});
		$("#enable").on("click",function(){
			$("input[type='text']:disabled").removeAttr("disabled");
			$("input[type='text']").attr("enable", "enable");
		});
	})



:checkbox 필터 및 :checked

type속성이 checkbox 요소 반환. (type = "checkbox"와 동일)
속성이 checked 또는 selected된 요소 반환.
(checkbox, radio, select 태그에 사용)

<script type="text/javascript">
	
	$(function(){
		//check의 부모인 span에 스타일 저장
		$(":checked").wrap("<span></span>").parent().css("border", "3px dotted red");
		//처음 시작 화면에 checked된 것을 선택
		$("input:text").val($("input:checked").val());
	})
</script>
<body>
사과<input type="checkbox" checked="checked" value="사과"><br>
배<input type="checkbox"  value="배"><br>
바나나<input type="checkbox"  value="바나나"><br>
<input type="radio" checked="checked" value="aaa">
<input type="text">
</body>

📒### Content Filter

표현식설명
:contains(text)text와 일치하는 문자열이 존재하는 요소를 반환한다. 대소문자 구별한다.
:empty자식요소가 존재하지 않고 텍스트값이 비어 있는 요소를 반환한다.
:has(selector)지정된 selector가 자식 요소로 존재하는 모든 요소를 반환한다.
:parent자식 요소가 존재하거나, 텍스트값을 가지고 있는 요소를 반환한다.



:contains(text)

지정한 text문자열이 존재하는 해당 요소를 반환
대상 요소 및 하위 요소까지 검색

<script type="text/javascript">
	
	$(function(){
		//특정문자열 찾기 (대소문자 구별, 자식 포함해서 찾는다.)
		$("div:contains('Hello')").css("color", "red");
	});

</script>
</head>
<body>
<div>Hello !!!!</div>
<div>Hi! hello</div>
<div>MyHello , good</div>
<div>
  <p>Hello</p>
</div>
</body>

--> 'Hello' 가 포함된 문자열을 찾는다.
자식태그인 <p> 까지 요소로 적용되는 것을 확인할 수 있다.



:parent / :empty

:parent: :empty와 반대되는 선택자

:empty: <input>,<img>,<hr>,<br> 태그 등이 :empty 필터 선택자에 의해 선택되는 요소이다.

<script type="text/javascript">
	
	$(function(){
		//자식이 있는 요소 반환	
		$("td:parent").css("color","red");
	//  $("td:not(:empty)").css("color","red");
		
		//자식이 없는 요소 반환
		$("td:empty").css("background-color","blue");
	});

</script>
</head>
<body>
<table border="1">
  <tr><td>TD #0</td><td></td></tr>
  <tr><td>TD #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
</table>
</body>


:has(selector)

지정된 selector를 포함한 모든 요소를 반환한다.

	$(function(){
		//특정 selector을 포함하는 요소 찾기 (태그를 포함하는지)
		$("div:has(p)").css("color", "red");
	});


🔎jQeury Traversing

1차적으로 선택자에 의해서 찾은 요소들을 다시 2차 필터링하거나 새로운 요소를 추가하거나 하는 작업을 할 때는 Traverse 관련 메서드를 사용하게 된다.

  • 분류
    • Filtering
    • Miscellaneous Traversing
    • Tree Traversal

😉필터링 (filtering)

셀렉터를 통해 얻은 객체에서 다시 필터링 가능하다.

메서드설명
.eqindex 와 일치하는 요소를 반환한다.
index는 0부터 시작하고 음수 값 사용 가능하다.
.filter(expr)지정된 expr과 일치하는 요소를 반환한다.
.filter(fn)지정된 함수(fn)과 일치하는 요소를 반환한다.
.not(expr)지정된 expr과 일치하지 않는 요소를 반환한다.
.not(fn)지정된 함수(fn)과 일치하지 않는 요소를 반환한다.
.is(expr)지정된 expr과 일치하는 요소가 하나라도 있으면 true를 반환하고, 아니면 false를 반환한다.
.is(fn)지정된 함수(fn)와 일치하는 요소가 하나라도 있으면 true를 반환하고, 아니면 false를 반환한다.
.has(selector)지정된 selector를 포함하는 요소를 반환한다.
.first()첫 번째 요소를 반환한다.
.last()마지막 요소를 반환한다.
.map(fn)1차 선택자에 의해 검색된 요소들을 함수(fn)을 통해서 원하는 작업을 수행한 후에 배열로 반환한다.
.slice(start[,end])start번째부터 end번쨰까지의 요소를 반환한다. end가 생략되면 마지막까지 요소를 반환한다. 0부터 시작



.eq(index)

앞서 배운 :eq(index) 선택자와 기능이 거의 동일하지만 차이점은 .eq(index) 메서드 뒤에 메서드 체인 형태로 다른 Traverse 관련 메서드를 추가 사용 가능하다.
대표적으로 .end() 메서드를 사용할 수 있으며, 이 메서드는 traverse 메서드를 사용하기 이전 상태로 복귀할 수 있는 메서드이다. 

	$(function(){
			
		$("li").eq(0).css("color","red")
		.end()
		.eq(2).css("color", "blue")
		.end()
		.eq(5).css("color", "yellow");
		
	});

--> 이런식으로 <li> 태그의 지정한 index의 요소를 반환하고, .end() 메서드를 통해 추가적으로 메서드를 사용할 수 있다.



filter(expr) / filter(fn)

expr는 expression으로서 선택자(selector) 및 jQuery 표현식을 의미.
1차로 검색된 요소들(필터링된 DOM)을 대상으로 검색이 이루어짐. 추가적으로 필터링 해야하는 경우에 사용한다.

$(function(){
		//1차 필터링 후 2차 필터링 (일치하는 selector) 반환
		$("li").filter(".my").css("color", "red")	//.class 접근
		.end()
		.filter("#a").css("color", "green")
		.end()
		.filter(":even").css("font-size","40px").end()	//index 0 부터 시작
	});

fn은 function이고 일반적인 표현식으로 나타내기 어려운 경우에 별도의 함수를 이용해 설정할 수 있다.
즉 필터 기능을 정해진 선택자가 아닌 필요한 기능을 새로 확장해서 사용하는 효과를 얻을 수 있다.

//1차 검색 결과를 기준으로 다시 2차 필터링(함수사용), return 결과만 사용함
	$(function(){
		$("li").filter(function (idx, ele){	//인덱스, 요소를 받음
			console.log(idx, ele.innerText);	//js 객체
		//	return ele.innerText=="A4"; //A4와 같은 요소 검색, 자바스크립트 명령을 사용
			return $(ele).text()=="A4"; 
		}).css("color", "red")
		.end()
		.filter(function (idx, ele){
			return idx%3==0	;
		}).css("font-size", "40px").end();
	});



.not(expr) / .not(fn)

.filter 메서드와 반대되는 개념이다.
일치되지 않는 요소를 반환한다.

	$(function(){
		
		$("li").not(".my").css("color", "red")
		.end()
		.not(":even").css("font-size", "40px");	//index 0부터
		
	});

--> my클래스가 아닌 요소에 color:red 속성 적용.
--> 인덱스가 짝수가 아닌 요소(홀수)에 font-size:40px 적용
--> .not 도 .filter처럼 필터값에 function을 넣는 것이 가능하다.


.is(expr) / .is(fn)

expr과 일치하는 요소가 하나라도 있으면 true값을 반환하고 아니면 false값을 반환한다.
일반적으로 if 조건문과 같이 사용된다.

	$(function(){
		
		//1차 필터링 후 2차 선택자와 일치하는 요소가 있으면 true, 없으면 false
		var x = $("li").is(".my");
		console.log(x);
		
	});

--> li 태그 요소 중 my 클래스를 갖는 요소가 하나라도 있다면 true 를 반환한다.

	$(function(){
		
		var x = $("li").is(function(idx, ele){
		//	console.log(ele.innerText);
		//	return $(ele).text() == "A8";

			console.log(this.innerText);
			return this.innerText == "A8";
		});
		console.log(x);
		
	});

--> li 태그 요소 중 innerText 값이 'AB'인 요소가 있다면 true를 반환한다.



.has

.selector (아래 예시에선 li에 해당) 를 포함하는 요소를 반환한다.

	$(function(){
		$("li").has("ul").css("background-color", "yellow");
	})

-->li태그에 ul태그가 존재하는 요소들 전체(li, ul 둘 다) 스타일 적용.



.first(), .last()

.selector의 배열에서 첫번째 요소와 마지막 요소를 반환한다. 예시는 생략하겠다.



.map(fn)

선택자에 의해 반환된 요소들을 함수를 사용하여 가공하고 결과를 배열로 반환한다.
반환된 텍스트를 소문자/대문자 등으로 변경하는데 사용된다.

	$(function(){
		
		var arr = $("li").map(function(idx,ele){
			console.log("this>>",this,"ele>>", ele, "ele.innerText", ele.innerText,
					"$(this).text()>>", $(this).text());	//fn함수 사용
		//	return ele.innerTet.toLowerCase();
			return $(this).text().toLowerCase();	// 소문자 변경
		});
		console.log("arr>>", arr);
		
	})



.slice(start[,end])

선택자에 의해 반환된 요소 중에서 부분 요소를 얻을 때 사용
start는 시작 위치(0부터), end는 마지막 위치이다.(end-1까지)
end를 생략하면 요소의 마지막 까지이다.

	$(function(){
		
		$("li").slice(4).css("color", "red")	//4부터  (end 생략. 4까지 아님)
		.end()
		.slice(0, 3).css("font-size", "40px");
	});


😉Miscellaneous 필터링

.add(expr)

기존 검색요소에 expr과 일치하는 검색요소를 추가한다.
주의할 점은 메서드명이 add이기 때문에 새로운 요소가 기존 요소에 생성/추가되는 것이 아니다.

	$(function(){
			
		$("li").add("ul").contents().css("color","red");
	//	$("li").find("ul").contents().css("color","red"); 동일하다.
		
	});

--> 선택자 li중 ul에 해당하는 요소에 속성 적용.



.contents()

text를 포함한 모든 자식 요소를 반환한다.
보통 .filter() 및 .find() 메서드와 주로 사용되며 인자가 없는 메서드이다.

	$(function(){
			
		//li를 검색, 또한 p도 검색 $("div, p")와 동일하다. 두개의 태그를 검색
		$("li").add("p").css("color","red");
		
	});



😉tree 필터링

메서드설명
.children([selector])선택된 요소에서 selector와 일치하는 자식 요소를 반환한다.
selector 생략시 모든 자식 노드를 반환한다.
(자손 포함 안됨)
.find([selector])선택된 요소에서 selector와 일치하는 하위(자식 및 자손) 요소를 반환한다.
.next([selector])선택된 요소에서 selector와 일치하는 다음 형제요소를 반환한다.
selector 생략시 바로 다음 형제요소를 반환한다.
.nextAll([selector])선택된 요소에서 selector와 일치하는 모든 다음 형제요소를 반환한다.
selector 생략시 바로 다음 형제요소 모두 반환한다.
.parent([selector])선택된 요소에서 selector와 일치하는 부모 요소를 반환한다.
부모 요소가 여러 개인 경우에는 배열로 반환한다.
.parents([selector])선택된 요소에서 selector와 일치하는 조상 요소를 반환한다.
selector 생략시 html태그를 포함한 모든 조상요소를 반환한다.
.prev([selector])선택된 요소에서 selector와 일치하는 바로 앞의 형제 요소를 반환한다.
selector 생략시 바로 앞 형제요소를 반환한다.
.prevAll([selector])선택된 요소에서 selector와 일치하는 앞의 모든 형제 요소를 반환한다.
selector 생략시 앞의 모든 형제요소를 반환한다.
.sibllings([selector])선택된 요소에서 selector와 일치하는 앞과 뒤의 모든 형제요소를 반환한다.
selector 생략시 앞과 뒤의 모든 형제요소를 반환한다.
결국 해당 선택자를 제외한 모든 형제요소를 반환한다는 것이다.(부모X)

메서드 명칭이 가진 의미랑 똑같이 동작하니 자연스럽게 필터링을 사용하면 되겠다.
사용법은 위와 동일하니 예제는 생략하도록 하겠다.😋



🔎jQuery Attributes

jQuery의 메서드를 사용하여 태그 속성을 제어하는 방법이다.

❗자주쓰이니 중요하다

  • ❗메서드
메서드설명
.attr(속성명)지정된 속성명에 해당되는 속성값을 반환한다.
일치하는 요소가 많으면, 처음 일치하는 요소가 반환된다.
.attr(속성명, 속성값)지정된 속성명에 속성값을 설정한다.
일치하는 요소가 많으면 모두 설정된다.
.removeAttr(속성명)지정된 속성명과 일치하는 모든 속성을 제거한다.
.val()선택된 요소의 값을 반환한다.
.val(값)선택된 요소에 값을 설정한다.
.text()선택된 요소의 자손을 포함한 text값을 반환한다.
포함된 html태그는 모두 포함되어 반환된다.
.text(값)선택된 요소에 text값을 설정한다
.html()선택된 요소의 자손을 포함한 text값을 반환한다.
포함된 html태그는 모두 포함되어 반환된다.
.html(값)선택된 요소에 text값을 설정한다. html포함 가능.
.addClass선택된 요소에 className에 해당되는 class속성을 설정(추가)한다.
한꺼번에 여러 개의 속성값을 설정할 수 있고,
기존에 class속성이 존재하면 마지막에 추가된다.



.attr(속성명) / .attr (속성명, 속성값)

반복적으로 요소를 가져오기 위해서는 .each()메서드나 .map()메서드를 일반적으로 같이 사용한다.

$(function(){
		
		$("button").click(function(){	//button은 image 없기 때문에 this 사용 불가
		
			var x = $("#img").attr("src");
			if("a.jpg" == x)
				$("#img").attr("src", "b.jpg");
			else
				$("#img").attr("src", "a.jpg");
			console.log($("#img").attr("src"));
			
		});
		
	});

--> .attr(속성명)을 이용해 속성값을 얻고, .attr(속성명,속성값) 으로 해당 요소의 속성명을 지정하여 값을 바꿀 수 있다.
위의 예는 button을 이용해 사진을 바꾸는 예제이다.



.val() / .val(값)

input, select, textarea같은 폼 관련 태그에서 값을 가져올 때 사용한다.
일반적으로 선택 또는 체크된 요소를 찾기 위해서 :selected 또는 :checked선택자와 같이 사용된다.

	$(function(){
		$("button").on("click", function(){
			$("#passwd2").val($("#passwd").val()); 
			console.log($("#userid").val(), $("#passwd").val());
		})
	});

--> button 클릭 이벤트에 passwd의 값을 passwd2의 값에 설정한다.



.text() / .text(값)

자손요소에 html태그가 포함되면 모두 제거된 후에 문자열만 반환된다.
input 또는 textarea의 값을 얻거나 설정하기 위해서는 .text()가 아닌 .val()메서드를 사용해야 한다.

$(function(){
		
		$("button").click(function(){
			var x = $("#x").text()
			console.log(x);
			$("#result").text(x);
		})		
		
	});

-->p태그 x의 innerText를 div태그 result에 설정하는 예제이다.


.html() / .html(값)

.text()메서드와 다르게 html형식의 문자열을 가져오거나 설정할 수 있다.
예제는 생략하겠다.



.prop(값)

선택된 요소의 존재 유무를 boolean값으로 처리한다.

<script type="text/javascript">

	$(function(){
		//property(속성)검증 true, false 리턴
		$("button").on("click", function(){
			console.log($("#my").attr("checked"));	//checked
			console.log($("#my").prop("checked"));	//true
			console.log($("#my2").prop("checked"));	//false
		})
	})

</script>
</head>
<body>
	A<input id="my" type="checkbox" name="my" checked="checked"><br>
    B<input type="checkbox" name="my2"  id="my2"><br>
    <button>OK</button>
</body>



.toggleClass(className)

선택된 요소에 className에 해당되는 class속성이 존재하면 제거하고, 존재하지 않으면 설정한다.
addClass(className)과 removeClass(className) 메서드를 번갈아 실행시키는 것과 동일하다.

<style type="text/css">
	.highlight{
		background: yellow;
	}
</style>
<script type="text/javascript" src="../jquery-3.5.1.min.js"></script>
<script type="text/javascript">

	$(function(){
		$("p").on("click", function(){
			//css주의
			console.log(this);
			$(this).toggleClass("highlight");	//css에 클래스 제작
		})
	});

</script>

--> 모든 p태그를 클릭할 때 마다 highlight클래스가 설정/삭제 된다.



.addClass(className)

동시에 여러 개의 속성값을 설정할 수도 있고 기존에 class속성이 있으면 덮어쓰기 되지 않고 기존 속성값의 뒤에 추가된다.


	$(function(){
		
		$("#b1").click(function(){
			$("#a1").addClass("selected highlight");
		})
		
		$("#b2").click(function(){
			$("p").removeClass("selected highlight");	
		})
		
		$("#b3").click(function(){
			$("#a2").toggleClass("selected highlight");	
		})
		
	});

--> id가 b1인 버튼을 클릭하면 highlight 클래스를 적용한다.
--> id가 b2인 버튼을 클릭하여 모든 p태그의 highlight 클래스를 삭제한다.



🔎jQuery Manipulaion

jQuery 메서드를 사용하여 DOM을 추가하거나 삭제 및 수정 또는 복사와 같은 처리를 손쉽게 할 수 있다.
HTML화면에 없던 특정 값을 보여주거나 또는 화면에 있던 값을 수정하거나 삭제할 수 있는(동적인 HTML화면)을 손쉽게 구현할 수 있다.

메서드설명
❗append(content)선택된 요소의 text노드 위치에 content를 설정한다.
대상요소에 text값이 존재하면 text값 뒤에 추가된다.
prepend(content)선택된 요소의 text노드 위치에 content를 설정한다.
대상요소에 text값이 존재하면 text값 앞에 추가된다.
wrap(html)선택된 요소를 지정된 html로 에워싼다.
empty()선택된 요소의 text값을 포함한 모든 자식(자손포함)요소의 값을 제거한다.
(태그는 그대로 남아있다.)
❗remove([selector])선택된 모든 요소가 제거된다. (태그까지 전부 제거한다.)
만약 selector를 지정하면 selector와 일치하는 요소를 제거한다.



.append(content)

content는 html, 문자열, Element가 될 수 있고, 한꺼번에 여러 content를 설정할 수도 있다.

		$("button").click(function(){
          //아래 두개 예제는 같다.
			$(".my").append("<span>장군</span>");		//기존 내용 뒤에 추가
			$("<span>장군</span>").appendTo($(".my"));	//기존 내용 뒤에 추가 $주의
          
			$(".my").append($("h1"));	//기존 태그의 이동
		})

--> button을 click할 때 my클래스에 장군이라는 html을 붙이는 예제이다.
--> 기존 h1태그는 my클래스 뒤에 이동한다.
<--> 만약 .prepend 면 반대로 장군이 앞에 붙는다.



.wrap(html)

append 및 prepend와 다르게 이동되지 않고 복사(copy)된다.
지정된 html에 text값이 포함될 경우 text값은 타겟 요소 앞에 위치하게 된다.

	$(function(){
		
		$("button").click(function(){
			$(".my").wrap("<div style='background:yellow' class='new'></div>");
		//	$(".my").wrapAll("<div style='background:yellow' class='new'></div>");
			
		})
		
	});

--> my클래스를 div 태그로 감싸서 스타일을 적용시킨다.



.remove() / .empty()


$(function(){
		//태그는 남아있고 값만 지워진다.
		$("button").click(function(){
			$(".my1").empty();		//해당 요소를 포함한 모든 자식의 값 제거
		})
		
 		 //태그까지 전부 제거한다.
  		$("button").click(function(){
			$(".inner").remove();	
		});
  
	});


🔎jQuery Utilities

jQuery에서 배열을 순회하거나 배열을 필터링하거나 또는 데이터를 배열 형식으로 변경하거나 배열 복제, 데이터의 공백제거, XML 및 JSON 파싱처리 방법과 같이 효율적으로 사용 가능한 유틸리티 메서드이다.

❗$.each(object,function)❗

배열 또는 Map 형태의 반복되는 데이터를 손쉽게 순회하면서 얻어올 수 있다.
만약 데이터를 모두 순회하지 않고 중간에 순회를 멈추고 반복을 빠져나오기 위해서는 콜백함수 내에서 false 값을 return하면 된다.

  • 예제
$(function(){
		
		var s = ["A", "B", "C", "D", "E"];
		for (var i = 0; i < s.length; i++) {
			console.log("data>>>", s[i]);
		}
		console.log("======");
		
		$.each(s, function (idx, data){ //idx, 값
			console.log(idx, data);
		})

		$(s).each(function (idx, data){	//idx, 값
			console.log(idx, data);
		})
		
		console.log("======");
		
		
		//Json
		var s2={"one":100, "two":200, "three":300};
		$.each(s2, function(key, data){
			console.log(key, data);
		})
		
		console.log("======");
		
		
		var s3 = ["A", "B", "C", "D", "E"];
		$.each(s3, function(idx, data){
			console.log("s3>>>", idx, data);
			return data != "C";	//return false인 경우 break 기능 //c인경우 false 리턴
		})
	})
  • 결과

--> 일반 for문을 통해 배열 값을 얻을 수도 있고 , $.each(object,function)을 통해 값을 얻을 수 있다.
--> Json형도 마찬가지로 값을 순회할 수 있다.
--> 배열을 원하는 값이 나와서 중간에 끝내고싶을 때 return 값을 이용해 반복을 빠져나올 수 있다.


jQeury Ajax

❗❗jQuery.ajax

profile
Cheol
이전 포스트

JSP / 개념, 객체, 세션, EL

다음 포스트

Spring

1개의 댓글

comment-user-thumbnail
이태균
2023년 7월 18일

아주 유용한 정보네요!

답글 달기