jQuery物件和dom物件互相呼叫對方的成員

取得物件的方法：

#jquery物件：$('li') $('.apple' ) 等選擇器使用回傳的資訊是jquery物件
dom物件： document.getElementById()

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

繼續學習

新建檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX