jQuery系列(一):认识jQuery、DOM对象与jQuery对象的双转换

目录

    • 1.应当知道的
    • 2.核心函数 $() 的四个作用
    • 3.DOM对象与jQuery对象的转换问题
      • 3.1.为什么要转换?
      • 3.2.转换方法
      • 齐齐哈尔
    • 4.DOM与jQuery等价表达的方法
    • 5.对象转换的独立实践
    • 齐齐哈尔
  • 齐齐哈尔

jQuery系列(一):认识jQuery、DOM对象与jQuery对象的双转换_第1张图片

1.应当知道的

  • jQuery是一个javascript库。极大了简化了javascript的编程。
  • 核心函数 $(); $ 代表 jQuery $()代表jQuery()
  • jQuery的目标就是: write less do more
  • 齐齐哈尔

2.核心函数 $() 的四个作用

  1. 传入参数为函数时,在文档加载完毕之后执行这个函数

    $(function(){
    })
    
  2. 传入参数为选择器字符串时,根据这个字符串查找元素节点对象

    var $bj= $("#bj");
    
  3. 传入参数HTML字符串时,根据这个字符串创建元素节点对象

    var $li = $("
  4. 齐齐哈尔
  5. ");
  6. 传入参数为DOM对象时,将DOM对象包装为jQuery对象返回

    var bj = document.getElementById("bj");
    var $bj = $(bj);
    

结果展示:

3.DOM对象与jQuery对象的转换问题

3.1.为什么要转换?

因为DOM对象与jQuery对象无法互相使用彼此的属性和方法,而在实际应用中,

我们恰恰需要交叉使用方法和属性,

  • DOM对象调用DOM方法(不需要转换)
  • jQuery对象调用jQuery方法(不需要转换)
  • DOM对象调用jQuery方法(把DOM对象转换为jQuery对象
  • jQuery对象调用DOM方法(把jQuery对象转换为DOM对象
  • 齐齐哈尔

故,掌握对象互相转换方法,

很有必要!

3.2.转换方法

  • DOM --> jQuery

    直接将dom对象,放到核心函数$()里即可。

    var A; //A是dom对象
    
    var $A = $(A);
    
  • jQuery --> DOM

    原理:由于jQuery的底层由伪数组实现,我们可以将其看作为数组或者集合。

    • $A[0].DOM方法;

    • $A.get(0).DOM方法

    • 齐齐哈尔
    var $div = $("#testDiv");
    alert($div.get(0).innerText);//将jquery看作集合
    alert($div[0].innerText);//将jquery看作数组
    
  • 齐齐哈尔

4.DOM与jQuery等价表达的方法

JQuery DOM

text() = innertText

html() = innerHTML

val() = value

5.对象转换的独立实践

跟着我的代码敲几遍,之后,独立实践,就会深有体会并有一定程度的掌握

把代码分享给各位:





login





   

模块1:登录

用户名:

密 码:

模块2:热门城市

  • 北京
  • 上海
  • 广州
  • 齐齐哈尔
加油吧,少年!赚学费买车买房!










jQuery系列(一):认识jQuery、DOM对象与jQuery对象的双转换_第2张图片

你可能感兴趣的:(JavaScript)