JQuery-核心函数

jQuery核心函数

• jQuery(callback)

  • 当DOM加载完成后执行传入的回调函数

<script>
  $(function () {
    alert("123");
  });
</script>

---

• jQuery([sel,[context]])

  • 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,并包装成jQuery对象

<script>

  $(function () {

    // 利用jquery获取所有div,得到的是一个jQuery对象

    var $box = $("div");

    console.log($box);

    // 利用js原生语法获取所有div,得到的是一个js对象

    var box = document.getElementsByTagName("div");

    console.log(box);

  });

</script>

• 原生JS对象和jQuery对象相互转换

<script>

  $(function () {

    var $box = $("#box");

//            $box.text("新的数据");

//            jQuery对象不能使用原生js对象的方法

//            $box.innerText = "新的数据";

//            将jQuery对象转换为原生js对象

//            注意: 不是eq(0),eq函数返回的是jQuery类型对象,get函数返回的是原生类型对象

//            var box = $box.get(0);

  var box = $box[0];

  box.innerText = "新的数据";

  var box2 = document.getElementById("box");

//            原生js对象不能使用jQuery对象的方法

//            box2.text("新的数据2");

//            原生js对象只能使用原生的js方法

//            box2.innerText = "新的数据2";

//            将原生js对象转换为jQuery对象

  var $box2 = $(box);

  $box2.text("新的数据2");

  });

</script>

Tips:为了方便开发者之间沟通和阅读,一般情况下所有jQuery操作相关的变量前面加上$

---

• jQuery(html,[ownerDoc])

  • 根据 HTML 标记字符串，动态创建DOM 元素

<script>

  $(function () {

    var $eles = $("<p>我是span</p>我是u");

    // 无论是jQuery找到的还是创建的,我们最终拿到的永远都是jQuery对象

    console.log($eles);

    // 将创建好的DOM元素添加到body中

    $("body").append($eles);

  });

</script>

---

jQuery对象

• jQuery对象的本质是什么?

  • jQuery对象的本质是一个伪数组

var $div = $("div");

console.log($div);

var arr = [1, 3, 5];

console.log(arr);

• 什么是伪数组?

  • 有0到length-1的属性

  • 并且有length属性

var obj = {0:"lnj", 1:"33", 2:"male", length: 3}