본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

jQuery

attrClass? prop? 이 두가지 메서드에 대하여 알아보자!

by C0Di 2022. 9. 3.
728x90

속성 관련 메서드

이번 시간에는 클래스 속성과 관련된 메서드에 대해 알아보겠스빈다!


attrClass() 메서드

요소에 class 속성을 추가시켜주는 메서드 입니다~~!

실행 분류 형식
취득 &("a").attr("href");
생성, 변경 &("a").attr("href", "http://icoxpublih.com").attr("target", "_blank");
&("a").attr({href: "http://icoxpublih.com", target: "_blank"});
콜백 함수 &("a").attr("href", function(index, h) {
// index는 각 a 요소의 index 0, 1, 2
// h는 각a요소의 href 속성
return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다. });
...
<a href="http://www.daum.net" target="_blank" title="새창">다음</a> <a href="http://www.naver.com" target="_blank" title="새창">네이버</a> <a href="http://www.nate.com" target="_blank" title="새창">네이트</a></td>

prop() 메서드

attr()가 html attribute(속성)에 관련된 메서드라면 prop()는 자바스크립트 propetty(프로퍼티)에 관련된 메서드에요!
prop() 메서드는 요소의 속성을 true, false로 제어가 가능합니다 ^^b!!

자바스크립트 : 예제 완성용

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
        $(document).ready(function () {
            $("#m_menu a.m").click(function () {
            $(this).next().addBack().toggleClass("on").end().find(".m, ul").removeClass("on").end().parent().siblings().find(".m, ul").removeClass("on");
            return false;
            });
        });
        </script>
    </head>
</html>

예제완성

728x90
반응형

댓글

#HASH_TAGS

-

1

숙제가 다양해서 너무 좋아요 선택해주세요 슬라이드 결과 : 월요일 scroll-snap-type 코드 오징어 1Kg 당 3000원 scroll-snap-align 오늘은 내가바로 오징어! 이건 또 뭐람 오늘도 웹표준은.. ImageSlideEffect 다크모드 HTML Method 오징어 한마리 수확 완료! 울적하니 꽃을 달아봤습니다 필터선택자 내일은 즐거운 월요일 제이쿼리 화사한가요? JQuery 공부 코딩 오징어 두마리 포획 완료 멈추지 않는 ' j ' 시리-즈 오늘 조업 마감했습니다. 메서드