1. 제이쿼리 문법 기초
1) 제이쿼리 문법 기초
예제)
<!DOCTYPE html>
<html>
<head>
<title>제이쿼리 문법 기초</title>
<meta charset="utf-8">
<!-- 스크립트 라이브러리를 읽어들이기(제이쿼리 라이브러리 함수) -->
<script type="text/javascript" src="./jquery-3.2.1.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("li").css("color","red");
$("li").css("font-size","2em");
$("li").css("font-family","맑은 고딕");
});
-->
</script>
<style type="text/css">
<!--
/* li {color:red;} */
-->
</style>
</head>
<body>
<ul>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
<li> 텍스트 텍스트 텍스트 텍스트 텍스트 </li>
</ul>
</body>
</html>
2) 제이쿼리 셀렉터
$(function(){
$("li:lt(2)").css("color","red");
//지정한 번호보다 앞의 태그(번호는 0부터 시작)
$("li:eq(2)").css("color","blue"); //지정한 번호의 태그
$("li:gt(2)").css("color","green"); //지정한 번호보다 뒤의 태그
});
$(function(){
$("li:contains('샘플')").css("color","red");
//특정 문자열을 포함하고 있는 태그
$("li:has(strong)").css("color","red");
//특정 태그를 포함하고 있는 태그
});
$(function(){
$("li:odd").css("color","red");
$("li:even").css("color","blue");
});
$(function(){
$("[title*='ir']").css("color","red");
});
$(function(){
$("[title^='f'][title*='th']").css("color","red");
});
'jQuery' 카테고리의 다른 글
| 제이쿼리 스크롤메뉴 (0) | 2017.08.29 |
|---|---|
| 2. 제이쿼리 문법 기초: attr(), 클래스명 바꾸기 (0) | 2017.08.24 |
| Ajax: serialize(), serializeArray() (0) | 2016.03.22 |
| Ajax에서 스크립트 로드하기 $.getScript() (0) | 2016.03.22 |
| Ajax로 JSON 이용하기 (3) | 2016.03.21 |
