<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
제이쿼리란?
- 자바스크립트 수석 개발자 존레식이 창시
- 자바스크립트 라이브러리 언어이며, 자바스크립트의 호환성해결하였습니다.
- 자바스크립트보다 애니메이션을 쉽게 구현할 수 있도록 개발되었습니다.
-->
<script>
/*
선택자란?
선택자는 html요소를 선택하여 가져옵니다.
$(function(){
$("요소 선택").css("속성","값");
});
*/
$(function(){
$(".wrap_1").css("textalign","center");
$(".wrap_1 p").css("color","yello"); // 직접선택자
$(".active").next.css("color","red"); // 근접선택자
$(".wrap_1").eq(2).css("background-color","blue");
/* 위치선택자 p태그 배열이 생김
배열[0]=텍스트1
배열[1]=내용
배열[2]=네이버
배열[3]=입력창
결론, 위의 코드는 배열[2]를 가르킴.*/
$("input[type=text]").css({"background-color":"orange"});
/* 속성선택자는 input , class, href 등을 의미하며
객체를 생성하여 작성하여한다. 객체를 생성할떼 {}를 사용하고
스타일 적용할때는 스타일 속성 구분:속성 적용을 하면 된다.
*/
$(".wrap_1 p").eq(1).removeClass("active");
// p태그 요소중에 배열[1] active하나만 속성지우기
$(".wrap_1").append("<p>텍스트2</p>")
});
</script>
</head>
<body>
<script type="text/javascript"></script>
<script src="C:\javascriptFolder\jquery.js"></script>
<div calss="wrap_1">
<p>텍스트1</p>
<p class = "active">내용</p>
<p><a href="#">네이버</a></p>
<p>
<input type="text" value="hello">
</p>
</div>
</body>
</html>
'HTML' 카테고리의 다른 글
| LI태그 점 없애기 (0) | 2019.11.18 |
|---|