반응형
JQuery
셀렉터 표현식
id,class,n번째,자식요소, 하위요소,첫번째 자식,마지막 자식,속성
HTML
<body>
<span id="simpletext1">1.simple[현재요소의 배경색:#ff0]</span>
<div class="simpletest1">2.jQuery[현재요소의 폰트색:#f00]</div>
<span>3.basic[현재요소의 폰트크기:30pt]</span>
<div>4.example[현재요소의 폰트스타일: 이텔릭]</div>
<p>5.div요소의 개수출력하기<span id="count"></span></p>
<p>6.아래 목록들중 div태그에 포함되어 있는 em요소만 배경색을 blue로 설정하시오</p>
<p>7.아래 목록들중 span의 자식요소인 em만 폰트색을 red로 설정하시오.</p>
<div>
<em>hello</em>
<b><em>jQuery</em></b>
</div>
<span>
<em>Good Bye!</em>
<b><em>javascript</em></b>
</span>
<p>8.아래 p태그들중에 첫번째요소에 배경색을 yellow로 설정하세요</p>
<p>9.아래 p태그들중에 마지막요소에 배경색을 red로 설정하세요</p>
<p>10.아래 p태그들중에 title속성이 있는 요소에 테두리색을 red로 설정하세요
<div>
<p>a</p>
<p>b</p>
<p title="속성으로 탐색하기">c</p>
<p>d</p>
<p>e</p>
</div>
</body>
JQuery
<script type="text/javascript" src="jquery-3.6.3.js"></script>
<script type="text/javascript">
$(function(){
$("#simpletext1").css("background-color","#ff0");
// .attr("style","background-color:#ff0")
$(".simpletest1").css("color","#f00");
$("span").eq(1).css("font-size","30pt");
$("div:eq(1)").css("font-style","italic");
//$("#count").append($("div").length);
//$("#count").text($("div").length); //js : textContent
$("#count").html("<strong>"+$("div").length+"</strong>");//js : innerHTML
$("div em").css("background-color","blue");
$("span > em").css("color","red");
$("div >p:first-child").css("background-color","yellow");
$("div >p:last-child").css("background-color","red");
$("div >p[title]").css("border","1px solid red");
})
</script>
기타참고
- CDN
CDN(Content Delivery Network)은 콘텐츠 전송 네트워크
네트워크(인터넷)를 통해서 콘텐츠(jQuery 라이브러리 파일)를 배포하는 방식
즉 사용하는 사람 입장에서 쉽게 이용할 수 있도록 만들어진 방식
2.
| js | jq |
|---|---|
| textContent | text |
| innerHTML | html |
반응형
'Front-end > JQuery' 카테고리의 다른 글
| (JQuery)AJAX 비동기구현 (0) | 2023.03.08 |
|---|---|
| (JQuery)DOM처리 메서드 (0) | 2023.03.08 |
| (JQuery)DOM탐색 메서드 연습문제 (0) | 2023.03.07 |
| (JQuery)이벤트 전파, 기본기능 금지 메서드 (0) | 2023.03.06 |
| (JQuery)DOM탐색 메서드 (0) | 2023.03.06 |