<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src = "js/jquery-3.5.1.min.js"> </script>
<script>
$(document).ready(function(){
alert('ready...')
// $('a[target]').hide() // 아래 다음 링크가 display 속성값이 none 된다.
$('a[href="http://www.naver.com"]').hide()
})
</script>
</head>
<body>
<h2>a Tag 전</h2>
<a href ="http://www.naver.com">네이버</a>
<a href ="http://www.daum.net" target = "_blank">다음</a>
<h2>a Tag 후</h2>
</body>
</html>
input 태그에서 type 속성을 지정하는 방법
input:button ==> ':' 콜론이 의미하는 것이 type 속성이다. 따라서 input 태그의 type 속성중에 속성값이 button 인 애들을 선택하는 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ready')
//$('input:text').hide()
$('input:button').hide()
})
</script>
</head>
<body>
<hr>
<input type="text">
<input type="button" value="버튼1">
<button>버튼2</button>
<hr>
</body>
</html>type 속성은 input 태그와 button 태그 둘 다 가지고 있다. 아래처럼 쓰면, input 태그의 버튼과 button 태그의 버튼 모두다 숨겨진다. 왜냐면, 버튼태그에도 사실은 type이라는 속성이 있기 때문이다.
$(':button').hide()버튼 태그만 없애보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ready')
//$('input:text').hide()
//$('input:button').hide()
//$(':button').hide() ==> 버튼1, 버튼2가 없어진다
$('button').hide() // button 태그만 없어진다.
})
</script>
</head>
<body>
<hr>
<input type="text">
<input type="button" value="버튼1">
<button>버튼2</button>
<!-- <button type="button">버튼2</button> -->
<hr>
</body>
</html>'웹 프로그래밍 > jQuery' 카테고리의 다른 글
| [jQuery] CSS 적용 (table 홀수 행, 짝수 행 따로 적용하기) (0) | 2020.06.23 |
|---|---|
| [jQuery] jQuery API 활용 예제 : 버튼 숨기기 (0) | 2020.06.23 |
| [jQuery] jQuery 객체와 JS 객체의 구분 (0) | 2020.06.23 |
| [jQuery] 선택자, 후손태그 & 자식태그, :first & :first-child (0) | 2020.06.22 |
| [jQuery] jQuery 설치 방법 및 기본 예 : $(document).ready(function(){}) (0) | 2020.06.22 |
