Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

jQuery对象和dom对象互相调用对方的成员

获取对象的方法：

  • jquery对象：$(‘li’)  $(‘.apple’) 等选择器使用返回的信息就是jquery对象

  • dom对象： document.getElementById()  

                     document.getElementsByTagName();

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(){
            //$('div').css('background-color','lightgreen');
            //dom对象 调用 jquery对象的成员【失败】
            //document.getElementsByTagName('div')[0].css('background-color','blue');
            //成功
            $(document.getElementsByTagName('div')[0]).css('background-color','blue');
        }
        function f2(){
            //document.getElementsByTagName('div')[0].style.width="400px";
            //jquery对象 调用 dom对象的成员【失败】
            //$('div').style.height = "300px";
            //成功
            $('div')[0].style.height = "300px";
        }
        </script>
        <style type="text/css">
        div {width:300px;height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <div></div>
        <input type="button" value="触发1" onclick="f1()" />
        <input type="button" value="触发2" onclick="f2()" />
    </body>
</html>


Weiter lernen
||
<!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(){ //$('div').css('background-color','lightgreen'); //dom对象 调用 jquery对象的成员【失败】 //document.getElementsByTagName('div')[0].css('background-color','blue'); //成功 $(document.getElementsByTagName('div')[0]).css('background-color','blue'); } function f2(){ //document.getElementsByTagName('div')[0].style.width="400px"; //jquery对象 调用 dom对象的成员【失败】 //$('div').style.height = "300px"; //成功 $('div')[0].style.height = "300px"; } </script> <style type="text/css"> div {width:300px;height:200px; background-color:pink;} </style> </head> <body> <div></div> <input type="button" value="触发1" onclick="f1()" /> <input type="button" value="触发2" onclick="f2()" /> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492834 spielt ab