jquery에서 요소 속성을 조작하는 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

jquery에서 요소 속성을 조작하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2022-03-18 18:59:40

원래의

2535명이 탐색했습니다.

요소 속성을 조작하는 메소드는 다음과 같습니다. 1. addClass(), hasClass(), RemoveClass(),ggleClass()를 포함하여 클래스 속성을 조작하는 메소드 2. attr(), prop()을 포함하여 지정된 속성을 조작하는 메소드; ) , Attr()을 제거합니다.

jquery에서 요소 속성을 조작하는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.12.4 버전, Dell G3 컴퓨터.

jQuery 속성 연산 방식

Method	Description
addClass()	지정된 클래스 이름(클래스 속성 값)을 일치하는 요소에 추가합니다.
attr()	일치하는 요소의 속성과 값을 설정하거나 반환합니다.
prop()	일치하는 요소의 속성과 값을 설정하거나 반환합니다.
hasClass()	일치하는 요소에 지정된 클래스가 있는지 확인하세요.
removeAttr()	일치하는 모든 요소에서 지정된 속성을 제거합니다.
removeClass()	일치하는 모든 요소에서 전체 또는 지정된 클래스를 제거합니다.
toggleClass()	일치하는 요소에서 클래스를 추가하거나 제거합니다.

jQuery attr() 및 prop() 메소드는 속성을 반환하거나 설정합니다.

prop() 메소드는 attr() 메소드와 유사하며 둘 다 HTML 속성을 가져오거나 설정하는 데 사용됩니다. 요소이지만 둘 다 근본적인 차이점도 있습니다.

jQuery 공식 권장사항: selected, selected, 비활성화 등 true와 false 두 가지 값을 갖는 속성의 경우 prop() 메소드를 사용하여 동작하는 것을 권장하고, 그 외 속성은 prop() 메소드를 사용하는 것을 권장한다. attr() 메서드를 작동합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $(&#39;input[type="radio"]&#39;).change(function(){
                var bool = $(this).attr("checked");
                if(bool){
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        })
    </script>
</head>
<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p></p>
</body>
</html>

로그인 후 복사

jquery에서 요소 속성을 조작하는 방법은 무엇입니까?

이 예에서는 실제로 $(this).attr("checked")를 사용하여 라디오 버튼이 선택되었는지 확인하고, 선택되면 라디오 버튼의 값을 가져오고 싶습니다. 그러나 코드를 실행한 후 나는 다음과 같은 사실을 발견했습니다. 전혀 효과가 없습니다! 왜 이런가요?

사실 attr() 메서드로는 form 요소의 selected, selected, 비활성화 속성을 얻을 수 없고, prop() 메서드를 사용해야 합니다. 따라서 attr() 메서드를 prop() 메서드로 바꾸면 작동합니다.

실제로는 prop() 메서드가 양식 속성 연산에서 attr() 메서드의 단점을 보완한 것으로 보입니다. 한 문장을 기억하세요. attr() 메서드를 사용하여 속성을 얻거나 설정할 수 없는 경우 prop() 메서드를 변경하여 속성을 얻을 수 있습니다.

removeAttr() 메소드는 속성을 제거합니다.

jQuery에서는 RemoveAttr() 메소드를 사용하여 요소의 속성을 삭제할 수 있습니다.

구문:

$().removeAttr("属性名")

로그인 후 복사

jQuery 클래스 이름 연산

클래스 이름 연산은 요소에 클래스를 추가하거나 삭제하여 요소의 스타일을 전반적으로 제어하는 것을 말합니다.

jQuery에는 세 가지 유형의 CSS 클래스 이름 작업이 있습니다.

클래스 추가.
수업을 삭제하세요.
수업을 전환하세요.

클래스를 추가하는 addClass() 메소드

jQuery에서는 addClass() 메소드를 사용하여 요소에 클래스를 추가할 수 있습니다.

구문:

$().addClass("类名")

로그인 후 복사

removeClass() 메소드를 사용하여 클래스 삭제

jQuery에서는 RemoveClass() 메소드를 사용하여 요소의 클래스를 삭제할 수 있습니다.

구문:

$().removeClass("类名")

로그인 후 복사

toggleClass() 메서드는 클래스를 전환합니다

jQuery에서는ggleClass() 메서드를 사용하여 요소의 클래스 이름을 전환할 수 있습니다. Toggle은 실제로 "스위치"를 의미합니다. 우리는 이 단어를 앞으로는 Toggle(), SlideToggle() 등과 같이 많이 접하게 될 것입니다. 친구들은 주의해서 비교해 보아야 합니다.

구문: