▼ 넓이랑 높이 얻는 방법
<style>
.container h1{
border: 1px solid blue;
width: 100;
height: 100px;
}
</style>
<!-- cdn 연결 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js" integrity="sha512-QDsjSX1mStBIAnNXx31dyvw4wVdHjonOwrkaIhpiIlzqGUCdsI62MwQtHpJF+Npy2SmSlGSROoNWQCOFpqbsOg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$(() => {
console.clear();
console.group("box");
let h1 = $('.container h1');
let width = h1.width(); // border 미포함
let innerWidth = h1.innerWidth();// border 미포함
let outerWidth = h1.outerWidth(); // border포함
console.log( width,innerWidth,outerWidth );
//------------------------------
console.groupEnd();
}); // .jq
</script>
</head>
<body>
<div class="container">
<h1>Box</h1>
<p class="container">
<h2>Box2</h2>
</p>
</div>
</body>▼ 요소 추가 바로 앞에 뒤에
<script type="text/javascript">
$(function( ){
// 바로 뒤에다가 요소를 추가해주시오
// A.after(B) – A 뒤에 B를 추가
// A.insertAfter(B) – B 뒤에 A를 추가
$("#wrap p:eq(2)").after("<p>After</p>");// 문자열 형식으로 들어간다
$("<p>insertAfter</p>").insertAfter("#wrap p:eq(1)");
// 바로 이 전에다가 요소를 추가해주시오
$("#wrap p:eq(1)").before("<p>Before</p>");
$("<p>insertBefore</p>").insertBefore("#wrap p:eq(0)");
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>
</div>
</body>▼ 요소 추가 마지막 부분에!
<script type="text/javascript">
$(function( ){
//.append() : $(A).append(B) // A 사이의 마지막에 B 가 추가 된다.
//.appendTo() : $(A).appendTo(B) // A 가 B 사이의 마지막에 추가 된다.
$("<li>appendTo</li>").appendTo("#listZone");
//.prepend() : $(A).prepend(B) // A 사이의 처음에 B 가 추가 된다.
$("#listZone").prepend("<li>prepend</li>");
});
</script>
</head>
<body>
<ul id="listZone">
<li>리스트</li>
</ul>
</body>▼ 요소 복제와 삭제
<script>
$(function( ){
//요소선택자의 자식요소를 선택하고 그 똑같은 요소를 복제한다.
var copyObj = $(".box1").children().clone();
//선택한 요소를 포함전체를 다 지워버린다.
$(".box2").remove( );
// 선택된 요소에 하위요소가 어떻게 되든 다 없에 버린다.
$(".box3").empty( );
// 클론을 box3안에 만든다
$(".box3").append(copyObj);
});
</script>
</head>
<body>
<div class="box1">
<p>내용1</p>
<p>내용2</p>
</div>
<div class="box2">
<p>내용3</p>
<p>내용4</p>
</div>
<div class="box3">
<p>내용5</p>
<p>내용6</p>
</div>
</body>▼ 요소 교체 메소드
<script>
$(function( ){
// 선택자를 메소드의 요소로 교체하라
$("h2").replaceWith("<h3>replace method</h3>");
//메소드의 요소를 선택자에 교체하라
$("<p>Change</p>").replaceAll("div");
});
</script>
</head>
<body>
<section class="box1">
<h2>제목1</h2>
<div>내용1</div>
<div>내용2</div>
</section>
<section class="box2">
<h2>제목2</h2>
<div>내용3</div>
<div>내용4</div>
</section>
</body>
▼ 요소 태그의 부모를 제거하거나 요소태그의 부모태그 만들기
<script>
$(function( ){
//선택한 요소의 부모요소 태그를 제거합니다. //본인은 남음
$("strong").unwrap( );
// 선택한 요소를 메소드로 지정한 태그로 각각! 감싼다
$(".ct1").wrap("<div />");
//선택한 요소를 모아서 하나의 태그로 뭉쳐서 둘러싼다.
$(".ct2").wrapAll("<div />");
//요소의 내용을 메소드로 지정한 태그 안에 넣는다.
$("li").wrapInner("<h3 />");
});
</script>
</head>
<body>
<h1 id="tit_1">
<strong>객체 조작 및 생성</strong>
</h1>
<p class="ct1">내용1</p>
<p class="ct1">내용2</p>
<p class="ct2">내용3</p>
<p class="ct2">내용4</p>
<ul>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
이벤트 등록 메서드
이벤트 객체에 대해 알아야한다
▼ 이벤트 등록메서드의 단일과 다중 방법
<script>
$(function( ) {
//단일 이벤트 등록 메소드
$(".btn1").click(function(){
$(".btn1").parent().next()
.css({"color":"#f00"});
}); // click
//다중 이벤트 등록 메소드 3가지의 방법이있는데 이거는 각각 처리하는 방법
$(".btn2").on({
"mouseover focus": function() {
$(".btn2").parent().next()
.css({"color":"#0f0"});
},
"mouseout blur": function() { // focus를 잃을때를 blur라고 한다.
$(".btn2").parent().next()
.css({"color":"#000"});
},
}); //focus blur
});// jq
</script>
</head>
<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>▼ 클릭을 발생시키는 이벤트 함수
<script>
$(function( ) {
$(".btn1").click(function(e){
console.log('Onclicked.');
console.log('\t+e',e);
//제이쿼리 이벤트 객체를 보여준다. 타입에 이벤트형태가 적혀나옴
console.log('\t+this',this);
jQueryEventObj = e;
// $(".btn1").parent().next( )
// .css({"color":"#f00"});
$(this).parent().next( ) // 요소 본인을 선택하는 this사용
.css({"color":"#f00"});
$(e.currentTarget).parent().next( ) // 현재 이벤트의 타겟인 e.currentTarget 사용
.css({"color":"#f00"});
}); // onclick
$(".btn2").on({
"mouseover focus": function(e) {
console.log('on focus')
console.log('\t+e',e);
$(".btn2").parent().next( )
.css({"color":"#0f0"});
}
});
$(".btn1").click();// 클릭을 발생시킴
$(".btn2").trigger("mouseover");
// click();과 trigger('click');
// 모두 같은 동작을 한다.
// 단지 차이점이라고 한다면 click();메서드에는 trigger 전에 한단계의
// 코드가 더 있기 때문에 약간의 오버헤드가 발생하는 것을 알 수 있었다.
// 큰 차이는 없지만 테스트 결과 약간의 퍼포먼스 차이가 있었다.
// 따라서 조건이 같은 상황이면 trigger()을 사용하는 것이 좋다고 말할 수 있겠다.
});
</script>
</head>
<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>▼이벤트가 선택되지 못하게 막는 메소드
<script>
$(function( ) {
$(".btn1").click(function(){
console.log('Onclicked.');
$(".btn1").parent().next( )
.css({"color":"#f00"});
});
$(".btn2").on({
"mouseover focus": function() {
$(".btn2").parent().next( )
.css({"color":"#0f0"});
}
});
//이벤트를 기다리는자를 없에버린다.
$(".btn1").off("click");
// $(".btn2").off("mouseover focus");
});
</script>
</head>
<body>
<p>
<button class="btn1">버튼1</button>
</p>
<p>내용1</p>
<p>
<button class="btn2">버튼2</button>
</p>
<p>내용2</p>
</body>이상!
일단 흐자