Mr.J-- jQuery学习笔记(二)--核心函数&&jQuery对象

核心函数

函数列表

函数说明：jQuery()    主要用于获取HTML DOM元素并将其封装为jQuery对象

jQuery():
jQuery()函数是jQuery库的最核心函数，jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便于使用jQuery对象提供的其他属性和方法对DOM元素进行操作。

jQuery()函数的功能非常强大，它可以将各种类型的参数智能地封装为jQuery对象。

语法

jQuery( selector, [context]) 

将选择器字符串selector所对应的HTML DOM元素封装为jQuery对象。可选参数context用于指定查找DOM元素的范围。

jQuery( [obj]) 

将指定对象obj封装为jQuery对象。这个对象可以是一个DOM元素(Element)，也可以是一个DOM元素数组，也可以是一个jQuery对象(对其进行克隆)，或者其他对象。你也可以省略该参数，从而返回一个空的jQuery对象。
jQuery 1.4 新增省略参数obj的用法：不传入任何参数，将返回空的jQuery对象

 

jQuery( html, [ownerDocument]) 

根据HTML标签字符串html动态地创建临时DOM元素，并将其封装为jQuery对象。可选参数ownerDocument用于指定临时DOM元素在哪个文档中创建(如果存在多个文档的话，例如框架页面)。
jQuery 1.0 新增该用法。

 

jQuery(html, properties ) 

根据HTML标签字符串html和包含其附加属性、事件以及方法的properties对象，动态地创建临时DOM元素，并将其封装为jQuery对象。
jQuery 1.4 新增该用法。

 

jQuery(callback ) 

在当前文档载入完成后，执行指定的函数callback。该用法是ready()函数如下用法的简写：jQuery(document).ready(callback)。
jQuery 1.0 新增该用法。
 

下面进行举例说明：

接收函数

​
// 1.接收一个函数
        $(function () {
            alert("hello lnj");
           

​

原生JS中：

function test(){
    alert("hello man");
}

使用jQuery核心函数调用方法实现

接受字符串

 // 2.接收一个字符串
            // 2.1接收一个字符串选择器
            // 返回一个jQuery对象, 对象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);

运行结果截图：

 

 

接收字符串代码片段

 // 2.2接收一个字符串代码片段
            // 返回一个jQuery对象, 对象中保存了创建的DOM元素
            var $p = $("<p>我是段落</p>");
            console.log($p);
            $box1.append($p);

运行结果截图：

接受DOM元素

// 3.接收一个DOM元素
            // 会被包装成一个jQuery对象返回给我们
            var span = document.getElementsByTagName("span")[0];
            console.log(span);
            var $span = $(span);
            console.log($span);

 

将原生的DOM元素包装成一个jQuery对象

运行结果截图：

jQuery对象

先在页面中写入三个div对象，使用jQuery进行访问：

var $div = $("div");
            console.log($div);

使用数组进行类似对比：

var arr = [1, 3, 5];
            console.log(arr);

运行结果截图展示：

           1.什么是jQuery对象
              jQuery对象是一个伪数组
           2.什么是伪数组?
             有0到length-1的属性, 并且有length属性

jQuery对象的本质是什么？

      1. jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，

      例:$("#foo").html(); //获取id为foo的元素内的html代码

      html()是jQuery特有的方法;上面的那段代码等同于:document.getElementById("foo").innerHTML;

      2.  注意：在jQuery对象中无法使用DOM对象的任何方法。

       例如$("#id").innerHTML 和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr ("checked")之类的 jQuery方法来代替。

       同样，DOM对象也不能使用jQuery方法。学习jQuery开始就应当树立正确的观念，分清jQuery对象和DOM对象之间的区别。

如何辨别真伪数组？

数据学习来源：真伪数组辨别

 什么是伪数组

1、伪数组是一个对象
2、这个对象必须要有length属性
3、如果这个对象的length不为0，那么必须要有按照下标存储的数据
 

// 不是伪数组
var obj = {};
var obj2 = { length: 3 };

// 是伪数组
var obj3 = { length: 0 };
var obj4 = { 0: '888', length: 1 };
var obj5 = { 99: 'abc', length: 100 }

如何判断数据是不是伪数组：

1、不是对象直接干掉
2、是对象，没有length属性也干掉
3、有length，值必须是number类型
4、length值是number类型，并且值不为0，这个对象还得按照下标存储数据

如何判断数据是不是真数组：

1、数据 instanceof Array
2、Object.prototype.toString.call( 数据 ) === '[object Array]'
 

伪数组转标准数组

Array.prototype.slice.call( 数据 )