728x90
300x250
SMALL
해당 노드에 색상 변경 스타일 추가
css
<style>
body{
font-size:9pt;
font-family:"굴림";
}
div, p, ul, li{
border:1px #eeeeee solid;
margin:10px;
}
ul {
padding:10px;
}
li.select {
background-color:#ccc;
}
</style>
script
<script>
(function($){
// redColor 플러그인 정의
$.fn.redColor=function(){ //jQuery.prototype.redColor와 동일
console.log(this.length);
this.each(function(index){
$(this).css("color", "#f00");
})
return this;
}
})(jQuery)
$(document).ready(function(){
// redColor() 플러그인 호출
$("li").redColor();//$("li")에 의해서 인스턴스 생성 접근연산자(.)를 활용해서 redColor 메서드(플러그인)호출
})
</script>
html
<body>
<div id="newPage" class="new-page">
신규 페이지
<div id="newHeader">
헤더
</div>
<div id="newContent" class="new-content">
신규 내용
<ul class="menu">
일반 노드 찾기
<li data-value="1">id로 찾기</li>
<li class="select">tag로 찾기</li>
<li data-value="2">class로 찾기</li>
<li class="test1">속성으로 찾기</li>
</ul>
<div class="content-data">
자식 노드 찾기
<p class="test1">1. 모든 자식 노드 찾기</p>
<p>2. 특정 자식 요소만 찾기</p>
<p class="test2">3. 마지막 자식 요소 찾기</p>
</div>
</div>
<div id="newFooter">
푸터
</div>
</div>
</body>
728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
| 한줄 공지사항 상하 롤링 - 비공개 (0) | 2023.10.22 |
|---|---|
| 클래스 기반 플러그인 문법 구조 (1) | 2023.10.17 |
| 스크롤 하면 생성되는 top버튼 만들기 - jQuery 플러그인 (0) | 2023.10.08 |
| jQuery 플러그인 구조 (0) | 2023.10.05 |
| jQuery 유틸리티와 플러그인의 차이 (0) | 2023.10.03 |
댓글