1. 제이쿼리 문법 기초
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");
});