masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Objek jQuery dan objek dom memanggil ahli satu sama lain

Kaedah untuk mendapatkan objek:

  • objek jquery: $('li') $('.apple ' ) Maklumat yang dikembalikan oleh pemilih ialah objek jquery

  • objek dom: document.getElementById()

document.getElementsByTagName();

jquery object dan dom object memanggil ahli satu sama lain

<!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>


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492797 permainan