반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.select{background:red;}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Process</li>
<li>About</li>
<li class="select">Contact</li>
</ul>
<script>
$(function(){
// 첫 번째 li에 클래스 속성 추가
$('li').first().addClass('select');
// 두번째 li의 클래스 제거
$('li').last().removeClass('select');
})
</script>
</body>
</html>📝addClass('클래스명')
클래스를 추가합니다.
📝removeClass('클래스명')
클래스를 제거합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<ul>
<li>Home</li>
<li>Process</li>
<li>About</li>
<li class="select">Contact</li>
</ul>
<script>
$(function(){
var attr = $('li').last().attr('class');
console.log(attr); // select
$('li').first().attr('style','border: 3px solid');
});
</script>
</body>
</html>📝attr(속성)
요소 내 속성을 읽어옵니다.
📝attr(속성, 값)
요소 내 속성과 값을 추가합니다.
📝removeAttr(속성)
요소 내 속성을 제거합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<ul>
<li>Home</li>
<li>Process</li>
<li>About</li>
<li class="select">Contact</li>
</ul>
<script>
$(function(){
$('li').first()
.css('border','3px dashed')
.css('background','pink');
$('li').last().css({
'border' : '3px dashed',
'background' : 'azure'
});
var bgcolor = $('li').last().css('backgroundColor');
console.log(bgcolor); // "rgb(240,255,255)"
});
</script>
</body>
</html>📝css(속성)
css 속성을 읽어옵니다.
📝css(속성, 값)
css 속성을 변경합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<ul>
<li>Home</li>
<li>Process</li>
<li>About</li>
<li class="select">Contact</li>
</ul>
<script>
$(function(){
$('li').first().html('<h1>HTML 추가</h1>');
$('li').last().text('<h1>HTML 추가</h1>');
var html = $('li').first().html();
var text = $('li').first().text();
console.log(html); // "<h1>HTML 추가</h1>"
console.log(text); // "HTML 추가"
});
</script>
</body>
</html>📝html()
요소 내의 HTML을 읽어옵니다. (태그는 태그 취급을 해준다)
📝html(값)
요소 내 HTML을 추가합니다. (태그는 태그취급을 해준다)
📝text()
요소 내 텍스트를 읽어옵니다. (그냥 오로지 텍스트)
📝text(값)
요소 내 텍스트를 추가합니다. (그냥 오로지 텍스트)
반응형