jQuery对象与dom对象关系

发布时间：3年前作者：老郭热度： 3285 ℃评论数：

# jQuery对象与dom对象关系

>  jQuery对象与dom对象关系：

```
jQuery对象：$("li") $(".apple") $("#one")
dom对象：document.getElementById()
document.getElementsByName()
```

#### 互相对方的成员
```
<script type="text/javascript">
  function f1() {
 // jQuery对象去调用dom对象的成员【失败】
  // $(...).style is undefined
    $('h2').style.background-color = "lightblue";
   }

function f2() {
 // dom对象去调用jQuery对象的成员【失败】
  // document.getElementsByTagName(...)[0].css is not a function 
 document.getElementsByTagName('div')[0].css('color','blue');
  }
</script>
```

#### jquery对象和dom对象的转换

```
    2.1jquery对象转换为dom对象
    $()[下标]
    
    Jquery对象变为dom对象之后可以调用dom对象的成员：
    function f1(){
        //document.getElementByTagName('h2')[0].style.backgroundColor
     //jQuery对象去调用dom对象的成员【失败】
       //$(...).style is undefined
     //$('h2').style.backgroundColor = "lightblue";
      //"jQuery对象"变为"dom对象"才可以调用对方成员【成功】
      $('h2')[0].style.backgroundColor = "lightgreen";
    }

2.2 dom对象转换为jquery对象
    $(dom对象)：

function f2() {
       // $('div').css('color','red');
       // dom对象去调用jQuery对象的成员【失败】
      var dv = document.getElementsByTagName('div')[0];
     //document.getElementsByTagName(...)[0].css isnot a function
        //dv.css('color','blue');
       //"dom对象"变为"jQuery对象"才可以调用对方成员【成功】
      //$(dom对象) dom对象选择器
     $(div).css('color','orange');
    }
```

jQuery,dom

上一篇：jQuery快捷操作

下一篇：jQuery的事件加载机制

栏目导航

Ajax是什么？ 1398 ℃
网站禁止浏览器缓存 1479 ℃
Ajax之get方式请求 2973 ℃
Ajax之post方式请求 2364 ℃
Json使用 1361 ℃
无刷新表单信息提交 1558 ℃
使用Ajax中$.post方法前台获取json数据，将数据转换为... 2019 ℃
细说jQuery的选择器 1539 ℃
jQuery的属性操作 2299 ℃
jQuery快捷操作 1449 ℃
jQuery对象与dom对象关系 3285 ℃
jQuery的事件加载机制 1779 ℃
jQuery属性选择器使用 2402 ℃
jQuery基本动画效果 2712 ℃
利用Ajax技术实现天气预报接口 1609 ℃

jQuery对象与dom对象关系

栏目导航

相关文章

微信小程序

手机扫码访问