jQuery对象和dom对象的转化

jquery对象和 dom对象的转化

jquery对象转化为dom对象： $()[下标]

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function f1(){
            //jquery对象 转化为 dom对象 进而调用dom的成员
            $('#apple')[0].style.backgroundColor = "blue";
            $('li')[1].style.backgroundColor = "brown";
        }
        </script>
        <style type="text/css">
        div {width:300px;height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <div id="apple"></div>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>
        <input type="button" value="触发1" onclick="f1()" />
    </body>
</html>

dom对象转化为jquery对象：$(dom对象)

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function f1(){
            //dom对象 变为 jquery对象: $(dom对象)
            //注意：每次只能是"一个"dom对象变为jquery对象
            var dv = document.getElementById('apple');
            $(dv).css('background-color','green');

            var lis = document.getElementsByTagName('li');
            $(lis[2]).css('color','red');
        }
        </script>
        <style type="text/css">
        div {width:300px;height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <div id="apple"></div>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>深圳</li>
        </ul>
        <input type="button" value="触发1" onclick="f1()" />
    </body>
</html>

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> function f1(){ //jquery对象转化为 dom对象进而调用dom的成员 $('#apple')[0].style.backgroundColor = "blue"; $('li')[1].style.backgroundColor = "brown"; } </script> <style type="text/css"> div {width:300px;height:200px; background-color:pink;} </style> </head> <body> <div id="apple"></div> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> </ul> <input type="button" value="触发1" onclick="f1()" /> </body> </html>

einreichen Code zurücksetzen

Automatische Operation

jQuery对象和dom对象的转化

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]