https://velog.io/@sa02045/Scroll-%EC%A0%95%EB%A6%AC
오늘 수업 중점여기서 끝났네 스크롤~!
▼ 지정된 요소를 골라서 볼 수 있게해주는 메소드
<script>
$(function(){
//find(선택자): 지정된 요소노드를 DOM Tree에서 찾아서 선택
$('#inner_1').find('txt1').css({"background-color":"#ff0"});
// filter(선택자) : 지정된 요소노드만 필터링
$("#inner_1 p").filter(".txt2").css({"background-color":"#0ff"});
//filter(익명함수) : 개발자가 직접 지정한 기준에 부합하는 요소노드만 필터링 수행
$('#inner_2 p').filter(function (index,object){
console.log(idx);
return idx % 2 == 0;
}).css({"background-color":"#0f0"});
})// .jq
</script>
</head>
<body>
</body>
▼ 문자를 읽어올 때 사용하는 함수
<script>
$(function(){
//----태그 동적추가할때 주로 사용되는 함수
//.html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다.
//셀렉터태그내에 존재하는 자식태그을 통째로 읽어올때 사용되는 함수
출처: https://hellogk.tistory.com/88 [IT Code Storage:티스토리]
let result_1 = $("#sec_1").html();
console.log(result_1);
$("#sec_1 p").html("<a href=\"#\"> text1</a> ");
// ---- html태그까지 모두 문자로 인식시켜주는 함수
//셀렉터태그내에 존재하는 자식태그들 중에 html태그는 모두 제외 한 채 문자열만 출력하고자 할때 사용되는 함수
출처: https://hellogk.tistory.com/88 [IT Code Storage:티스토리]
let result_2 = $('#sec_2').text();
console.log(result_2);
$("#sec_2 h2").text("text()");
});
</script>
</head>
<body>
<h1><strong>객체 조작 및 생성</strong></h1>
<section id="sec_1">
<h2><em>html()</em></h2>
<p>내용1</p>
</section>
<section id="sec_2">
<h2><em>텍스트()</em></h2>
<p>내용2</p>
</section>
</body>
▼ 요소 조착 추가 삭제등 메소드
<script>
$(function(){
$("#p1").addClass("aqua"); // class ='aqua' 추가
$("#p2").removeClass("red"); // class = 'red' 삭제
$("#p3").toggleClass("green"); // class = 'green' 추가/ 삭제를 번갈아 반복
$("#p4").toggleClass("green"); // class = 'green' 추가 / 삭제를 번갈아 반복
// toggleClass = 있으면 없에고 없으면 있게만들어라
// 구글에 로그인시 사용함 파랑색 로그인/ 틀리면 빨강색으로 바뀌게
//선택한 요소노드 (6번째 p태그)의 컨텐츠 지정(인자값으로)
// text() 메소드의 인자값으로는 , 5번째 p태그에 class ='yello'가 있는지 여부에
// 따라, boolean 값을 전달
$("#p6").text($("#p5").hasClass("yellow"));
}); // .jq
</script>
</head>
<body>
<p id="p1">내용1</p>
<p id="p2" class="red">내용2</p>
<p id="p3">내용3</p>
<p id="p4" class="green">내용4</p>
<p id="p5" class="yellow">내용5</p>
<p id="p6"></p>
</body>
▼ prob 등 속성을 반환하는 메소드
<script>
$(function(){
var result_1 = $('#user_name').val(); //양식태그의 value 속성값 얻어내기
console.log(result_1);
$('#user_id').val("javascript"); // 동적으로 양식태그의 value 속성값 집어넣기
//선택된 요소노드에서, 지정된 이름의 속성값을 얻어오기
// .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다.
// 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다.
var result_2 = $("#user_id").prop("defaultValue"); // attr와 같이 사용된다. 기본값을 가져와라
// value로 하면 동적으로 바뀐값을 가져온다
console.log(result_2);
})// .jq
</script>
</head>
<body>
<h1>객체 조작 및 생성</h1>
<form action="#" id = "form_1">
<p>
<label for="user_name"></label>
<input type="text" name="user_id" id="user_name" value="용대리">
</p>
<p>
<label for="user_id"></label>
<input type="text" name="user_id" id="user_id" value="hello">
</p>
</form>
</body>attr() 사용시
ㆍ HTML attribute 값이 모두 String 으로 넘어옴
prop() 사용시
ㆍ 자바스크립트의 프로퍼티 값이 넘어오기 때문에 boolean, date, function 등도 가져올 수 있음
▼ 높이와 넓이 얻기
<style>
*{padding: 0;}
#p1, #p2{
width: 100px;
height: 50px;
padding:20px;
border: 5px solid #000;
background-color: #ff0;
}
</style>
<script>
$(function( ){
console.clear();
console.group('Important');
var width = $("#p1").width(); // 선택된 요소노드 너비얻기
var heghit = $("#p1").height(); // 선택된 요소노드의 높이 얻기
console.log(heghit , width );
// padding + heghit 을 포함한 높이 얻기
var w2 = $("#p1").innerHeight();
console.log(w2);
// border + padding + height를 포함한 높이 얻기
var w3 = $("#p1").outerHeight();
console.log(w3);
//인자값(px 단위)대로, 선택된 요소노드의 바깥너비와 높이 설정
// 바깥 높이/너비 = border+ padding + width +hegiht
$("#p2")
.outerWidth(100)
.outerHeight(100);
// console.groupEnd();
});
</script>
</head>
<body>
<h1>수치 조작 메서드</h1>
<p id="p1">내용1</p>
<p id="p2">내용2</p>
</body>
▼ 위치를 반환해준다.
<style>
*{margin:0;padding:0;}
#box_wrap{
width:300px;
height:200px;
margin:50px auto 0;
position: relative;
background-color:#ccc;
}
.box{
width:50px;height:50px;
position:absolute;
left:100px;top:50px;
background-color:#f00;
}
</style>
<script>
$(function( ){
var txt1 = $(".txt_1 span"),
txt2 = $(".txt_2 span"),
box = $(".box");
//원래는 문서 브라우저의 viewport 좌측 상단을 원점으로 위치계산
console.log(box.offset());
//부모태그 position: relative속성을 가진 좌측/상단을 기점으로 위치계산
console.log(box.position());
var off_t = box.offset().top; //100
var pos_t = box.position().top; //50
//위치값을 반환한 것을 text로 넣어준다
txt1.text(off_t);
txt2.text(pos_t);
});
</script>
</head>
<body>
<div id="box_wrap">
<p class="box">박스</p>
</div>
<p class="txt_1">절대 top 위칫값:<span></span></p>
<p class="txt_2">상대 top 위칫값<span></span></p>
</body>
▼ 현 시점 scroll 위치를 반환해준다
<script>
$(function( ){
console.clear(); console.group('scroll');
// .offset().top 위에서부터 얼마만큼 떨어져있는가를 나타낸다
var topNum = $("h1").offset().top;
console.log(topNum);
//.scrollTop 브라우저 맨위를 기준으로 수직 이동거리 PX단위로 알고싶다!
// 웹브라우저를 선택하여, 제이쿼리 메소드 적용:
// 적용내용: 웹브라우저의 스크롤바의 위치를, 인자로 준 숫자값만큼 이동시켜라!
// scrollBy(a)는 누적 a만큼 선언되면 계속 내려간다
// window 객체는 객체의 계층 구조에서 최상위에 존재하며 가장 기본적이면서도 중요한 객체다.
// 창 열기, 창 닫기, 창 크기 조절 등 창을 제어하는 다양한 작업을 할 수 있다.
$(window).scrollTop(topNum); // << 이게 핵심
// 인자값 없이 호출하면, 현재 웹브라우저의 스크롤바의 위치를 반환
var sct = $(window).scrollTop(); // << 이게 핵심
console.log(sct);
console.groupEnd();
});//jq
</script>
</head>
<body>
<div id="wrap">
<h1>위치 메서드</h1>
</div>
</body>
과제는 팀블로그로 해서 올렸다 이상 ㅠ. 졸려..
일단 흐자