▼ 객체의 원소를 순회한다. / each메소드 시그니쳐를 확인해서 메소드를 잘 판단하시오
<script>
$(function(){
// 1.객체의 원소를 가지는 배열 선언
var arr = [
{"area":"서울"}, // 리터럴 방식의 객체
{"area":"부산"},
{"area":"전주"}
];
//2. 배열의 순회(traverse) using $.each 메소드
//(method) JQuery.each(func: (index: number, elem: Element) => any): JQuery
$(arr).each(function(index, value){
console.log(index + ":", value,);
});
console.log("==== The End 1 ====");
//3. 요소들을 모두 순회하면서 출력합니다.
//(method) JQueryStatic.each(collection: any, callback: (indexInArray: any, valueOfElement: any) => any): any (+1 overload)
$.each($("#menu2 li"), function(index, value){
console.log(index + ":", value, value instanceof Node );
});
console.log("==== The End 2 ====");
//4. $(this)는 JQurey 객체로 다시 바꿔주는 것
// 즉 요소를 순회하면서 내보내고 콘솔에 $(this)=JQuery객체=배열의 원소
$.each($("#menu2 li"), function(index){
console.log(index + ":", $(this));
$(this).css("border", '1px solid blue')
});
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>▼ 받은 배열의 값 중 원하는 값으로 받기 위해 사용
<script>
$(function(){
// $.map() 메소드 : 원래의 값 -> 새로운 유형의 값으로 매핑(사상)
let arr = [
{area:"서울", name:"무대리"},
{area:"부산", name:"홍과장"},
{area:"대전", name:"박사장"}
]; // 객체를 원소로 가지는 배열
// 객체 -> 문자열로 매핑(사상) (값은 그대로고 타입만 가공)
//(method) JQueryStatic.map(arrayOrObject: any, callback: (value?: any, indexOrKey?: any) => any): any (+1 overload)
let arr2 = $.map(arr, function(element, index){
if(element.area == "서울"){
return element.area;
}// if
})// $.map
//--------------------------------------------
var newArr=[1,2,3,4,5,6];
// 원하는 데이터 값을 얻기위한 map으로 사상
$.map(newArr, element => {
if(element%2===0){return element};
})
//grep과 map의 차이점 return 값이 true일 때 해당요소 반환
$.grep(newArr, element => {
if(element%2===0){return true};
})
});
</script>
</head>
<body>
<h1>탐색 선택자</h1>
<ul id="menu1">
<li>내용1-1</li>
<li>내용1-2</li>
<li>내용1-3</li>
</ul>
<ul id="menu2">
<li>내용2-1</li>
<li>내용2-2</li>
<li>내용2-3</li>
</ul>
</body>▼ 선택자들중에 index메소드를 통해 받은 요소의 인덱스를 매겨서 반환
<script>
$(function(){
// li가 선택되고 그 li들에 index함수를 사용하여 선택자의 인덱스를 반환
var idxNum = $("li").index($("#list3"));
console.log(idxNum);
});
// 해당 요소가 없으면 -1 반환
</script>
</head>
<body>
<h1>배열 관련 메서드</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
<li id="list3">내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
▼ 중요! form에서 값 받을 때!
input 요소에 값을 입력하거나 선택했을 때, 이를 감지하여 어떤 작업을 할 수 있다. input의 type이 number일 때, checkbox일 때, radio일 때로 나누어서 어떻게 감지하는지 알아본다.
<script>
// :checked 등으로 form값에 접근하고
//val()이 양식(form)의 값을 가져오거나 값을 설정하는 메소드
//1. 여러개 체크 되었을때 어떻게 얻을것인가? 옵션은 multiple/ input checkbox
//2. text, password 처럼 값을 받아서 넘겨줄때 어떻게 받을것인가?
$(function(){
$("#wrap p:hidden").css({
"display":"block",
"background":"#ff0"
});
// 2. :selected - 선택박스에서 선택된 상태(selected)
var z1 = $("#zone1 :selected").val( );
console.log(z1);
//
var z2 = $("#zone2 :checked").val( );
console.log(z2);
var z3 = $("#zone3 :checked").val( );
console.log(z3);
//실패ㅋ...
// var z4= $("#submit").on('click',function(e){
// e.preventDefault();
// let id = $('input[name=id]').val();
// let password = $('input[name=password]').val();
// }).val();
// console.log(z4);
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p style="display:none">내용2</p>
<p>내용3</p>
</div>
<form action="#">
<p id="zone1">
<!-- multiple일때는 어떻게 얻어낼까? -->
<!-- 멀티로 하면 배열로 반환된다. -->
<!--(1) .map() 함수를 이용해 얻을 수도 있다. -->
<!-- 이 후 옵션 요소 속성얻기 -->
<!--(2) each를 통해 순회 방법은 스샷으로 -->
<select name="course" id="course" multiple>
<option value="opt1">옵션1</option>
<option value="opt2" selected>옵션2</option>
<option value="opt3">옵션3</option>
</select>
</p>
<p id="zone2">
<input type="checkbox" name="hobby1" value="독서"> 독서
<input type="checkbox" name="hobby2" value="자전거"> 자전거
<input type="checkbox" name="hobby3" value="등산" checked> 등산
</p>
<p id="zone3">
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female" checked> 여성
</p>
<p id="zone4">
<!-- 값을 받아서 하는 text나 password는 어떻게 하는 것이 좋을까? -->
<input type="text" name="id" value="id">
<input type="password" name="pass" value="pass">
<button type="button" id="submit">ㅎㅇ</button>
</p>
</form>
</body>
다중체크로 인해 여러값을 나타낼 때 jQuery객체형태로 요소배열 부르는법
▼ 잡다한 선택자 그냥 고려해보셈
<script>
$(function(){
$("#inner_1 p:contains(내용1)") //특정 문자열을 포함한 요소를 선택하는 선택자
.css({"background-color":"#ff0"});
$("#inner_1 p:has(strong)") //특정 문자열을 포함한 요소를 선택하는 선택자 뭔 차이지?..
.css({"background-color":"#0ff"});
$("#outer_wrap").contents( ) // 직계자식들 뭉텅이를 의미합니다.
.css({"border":"1px dashed #00f"});
$("#inner_2 p").not(":first") // 해당 선택자 제외하고 택하여라!
.css({"background-color":"#0f0"});
$("#inner_2 p").eq(2).end() //해당 인덱스 요소를 찾는다. //현재 선택된 요소의 이전 요소
.css({"color":"#f00"});
});
</script>
</head>
<body>
<div id="outer_wrap">
<h1>콘텐츠 탐색 선택자</h1>
<section id="inner_1">
<h1>contains( ), contents( ), has( )</h1>
<p><span>내용1</span></p>
<p><strong>내용2</strong></p>
<p><span>내용3</span></p>
</section>
<section id="inner_2">
<h1>not( ), end( )</h1>
<p>내용4</p>
<p>내용5</p>
<p>내용6</p>
</section>
</div>
</body>
- Form Validation (양식 데이터 유효성 검증) *
(1) submit event handler registration
(2) In the specified event handler,
- disable submit event
- form validation
- if(validation == OK)
form.submit();
이것저것 많이 찾아봤다
e.preventDefault();를 통하여 화면을 고정시켜 값을 보내는 방법이 있다는 것을 알았고
on()을 통해 기준을 주고 기준에 맞추어 값이 변경되는 방법을 알았다.
on() 일때 value가 S.fn.init 이런식으로 나오는데 값이 나오게 하는 방법을 못찾았다
찾은건 button 또는 submit을 통하여 값을 받아오는 형식이었다.. 조금 더 찾아봐야겠다.
일단 흐자
https://karismamun.tistory.com/66 이런식