함수는 메소드라고도 불린다.
함수는 독립적으로 존재
메소드는 Class에 종속적인 함수
둘다 코드를 실행하는 기능의 단위라는 점은 동일
다시 말하면, 객체 지향적 맥락에서의 함수를 메소드라 한다.
remove() 메소드
remove 메소드: 지정 영역을 제거하는 함수
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function a(){
$("span").remove();
}
</script>
</head>
<body>
<span> 안녕? </span>
<span onClick="a();"> 클릭 </span>
</body>
</html> 클릭을 클릭하면 onClick="a();"로 a함수를 호출하면서 span태그로 쓰여진 안녕?을 삭제하는 $("span").remove();코드가 동작한 것.
<html>
<head>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function a(){
$(".b").remove();
}
</script>
</head>
<body>
<span class="b"> 안녕? </span>
<span onClick="a();"> 클릭 </span>
</body>
</html> $(".b").remove(); span을 .b로 바꿔주고 <span class="b"> 안녕? </span>에서 클래스명을 정해준 코드. (.은 클래스를 가리킨다)
바뀐 코드에 따라 span태그가 아닌 b클래스영역에 remove메소드의 기능이 적용될 것
.prepend()메소드
.prepend()메소드: 선택된 요소의 첫번째에 새로운 요소나 컨텐츠를 추가하는 메소드
<html>
<head>
<style>
span{
background-color : green;
}
.b{
background-color : red;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function a(){
$(".b").prepend("Hello");
}
</script>
</head>
<body>
<span class="b"> 안녕? </span>
<span onClick="a();"> 클릭 </span>
</body>
</html> $(".b").prepend("Hello"); 동작함수로 prepend 메소드를 작성함.
코드를 실행시킬때 a함수를 호출하면 b클래스의 앞부분에 Hello라는 단어를 추가할 것.
before 메소드
befor 메소드: 선택한 요소의 바로 앞쪽에 새로운 요소나 컨텐츠를 추가함.
<html>
<head>
<style>
span{
background-color : green;
}
.b{
background-color : red;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function a(){
$(".b").before("Hello");
}
</script>
</head>
<body>
<span class="b"> 안녕? </span>
<span onClick="a();"> 클릭 </span>
</body>
</html> $(".b").before("Hello"); before메소드를 통해 b클래스 영역의 바로 앞에 요소를 추가
prepend,before메소드와 대비되는 메소드로는 append, after 메소드가있음
append메소드, afrte 메소드
$( 선택 ).append( 추가할부분 );
$( 선택 ).after( 추가할부분 );
append 메소드: $(".b").append("Hello"); 선택된 요소의 마지막에 새로운 요소나 컨텐츠를 추가
after 메소드: $(".b").after("Hello"); 선택한 요소의 바로 뒤쪽에 새로운 요소나 컨텐츠를 추가
<html>
<head>
<style>
span{
background-color : green;
}
.b{
background-color : red;
}
p{
background-color : yellow;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function a(){
$(".b").prepend("<p> Hello </p>");
}
</script>
</head>
<body>
<span class="b"> 안녕? </span>
<span onClick="a();"> 클릭 </span>
</body>
</html>$(".b").prepend("<p> Hello </p>");
<p> Hello</p>가 문장 자체로 들어간 게 아니고 html코드로 추가됨.
프로그램 내에서 코드 자체가 추가되는거
.html 메소드
.html 메소드: 해당 요소의 HTML 컨텐츠를 반환하거나 설정 하는 메소드
<html>
<head>
<style>
span{
background-color : green;
}
.b{
background-color : red;
}
p{
background-color : yellow;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function a(){
$(".b").html("<p> Hello </p>");
}
</script>
</head>
<body>
<span class="b"> 안녕? </span>
<span onClick="a();"> 클릭 </span>
</body>
</html>
<p><span>같은 HTML코드를 텍스트 그대로 출력하고 싶을 때
text메소드
text메소드: 선택한 요소의 내용을 새로운 단순text로 변경해줌.
<html>
<head>
<style>
span{
background-color : green;
}
.b{
background-color : red;
}
p{
background-color : yellow;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
function a(){
$(".b").text("<p> Hello </p>");
}
</script>
</head>
<body>
<span class="b"> 안녕? </span>
<span onClick="a();"> 클릭 </span>
</body>
</html>
