집 >웹 프론트엔드 >HTML 튜토리얼 >Xiaoqiang의 HTML5 모바일 개발 과정(36) – jQuery의 DOM 작업

Xiaoqiang의 HTML5 모바일 개발 과정(36) – jQuery의 DOM 작업

黄舟원래의: 2017-02-04 14:49:47942검색

1. 쿼리

선택기를 사용하여 노드를 찾습니다

html() / text() / attr()를 사용하여 노드 텍스트와 속성 값을 출력합니다.

참고: 드롭다운 목록은 val()

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    //$(&#39;#d1&#39;).html(&#39;java&#39;);  
                    //将节点的属性读出来  
                    //$(&#39;#d1&#39;).attr(&#39;style&#39;);  
                    //$(&#39;#d1&#39;).attr(&#39;style&#39;,&#39;font-size:30pt&#39;);  
                    $(&#39;#d1&#39;).attr(&#39;class&#39;,&#39;s1&#39;);  
                });  
            });  
        </script>  
        <style>  
            .s1{  
                color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello</div>  
        <ul>  
            <li>item1</li>  
            <li id="i1">item2</li>  
            <li>item3</li>  
        </ul>  
        <input type="button" id="b1" value="点我"/>  
    </body>  
</html>

를 사용합니다. 2.

$(html)

생성 3.

append();

prepend();

after();

before();

<html>  
    <head>  
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>  
        <script>  
            $(function(){  
                $(&#39;#b1&#39;).click(function(){  
                    var $node = $(&#39;<li>item4</li>&#39;);  
                    $(&#39;ul&#39;).append($node);  
                    //$(&#39;ul&#39;).append(&#39;<li>item4</li>&#39;); 和上面是等价的  
                });  
            });  
        </script>  
        <style>  
            .s1{  
                color:red;  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello</div>  
        <ul>  
            <li>item1</li>  
            <li id="i1">item2</li>  
            <li>item3</li>  
        </ul>  
        <input type="button" id="b1" value="点我"/>  
    </body>  
</html>

4. 노드 삭제

remove();

remove(selector);

empty(); 내용 지우기

$(&#39;#b1&#39;).click(function(){  
    //$(&#39;ul li:eq(1)&#39;).remove();  
    $(&#39;ul li&#39;).remove(&#39;li[id=i1]&#39;);  
            $(&#39;ul li:eq(1)&#39;).empty();  
});

5. 노드 복사

clone( );

clone(true); 복사된 노드도 다음 동작을 갖도록 합니다

6. 속성 작업

읽기: attr(' ');

설정: attr(' ', ' ');

또는 여러 속성 설정 attr({" ", " "});

삭제: RemoveAttr(' ');

$(&#39;#b1&#39;).click(function(){  
    $(&#39;#d1&#39;).attr({"class":"s1","style":"font-size:40pt"});  
});

7. 스타일 작업

가져오기 및 설정: attr("class", " ");

추가: addClass(' ', ' ');

스타일 전환: ToggleClass(' ', ' ');

특정 스타일이 있는지 여부 hasClass(' ');

css(' ', ' ');

css({ ' ': ' ', ' ': ' '});

$(&#39;#b1&#39;).click(function(){  
    $(&#39;div:first&#39;).addClass(&#39;s1 s2&#39;);  
    $(&#39;div:first&#39;).removeClass(&#39;s2&#39;);  
    $(&#39;div:first&#39;).toggleClass(&#39;s1&#39;);  
});

8. html, 텍스트 및 값 설정 및 가져오기

html() / html( '')

text() / text(' ')

val(); 요소의 값 설정 및 읽기

9. >children()

next();

prive();

siblings(): 모든 형제

10.

위는 Xiaoqiang의 HTML5 모바일 개발 길입니다(36) - jQuery에서 DOM 작업에 대한 내용은 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!

성명：

이전 기사：Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명다음 기사：Xiaoqiang의 HTML5 모바일 개발 과정(35) - jQuery의 필터에 대한 자세한 설명

Xiaoqiang의 HTML5 모바일 개발 과정(36) – jQuery의 DOM 작업

관련 기사