jQuery - 自执行函数,jQuery包装集, Dom与jQuery对象的相互转换 274

• 概述

本章节主要学习以下知识

1) 回顾自执行函数,通过理解自执行函数浅析jQuery文件

2)了解什么是jQuery的包装集对象,图解jQuery包装对象集

3) 掌握Dom对象与jQuery对象怎样相互转换

4)了解JQuery的ready方法

• 自执行函数

1) 自执行函数:一种特殊的函数表达式,也称之为立即调用函数表达式

其函数一般是匿名函数,因为即使有名称外界也访问不到此函数

自执行函数的常用格式

	(function [方法名称](形参) {       //[ ]方括号代表这个可以省略不要
           //具体执行的代码
  })(实参);

牢记自执行函数书写3步骤:1)书写一个函数(推荐匿名) 2)书写两个括号,加个分号() 3)将函数放入第一个括号中

实参:指传入函数的具体值 形参:形式参数相当于一个变量名(要符合命名规范)

2) 通过自执行函数查看jQuery源码文件,将其浅析简化如下

简化的自执行函数

jQuery源码打开猛一看万行头晕,直接腰斩最简化一目了然,如上图所示

3) 通过下图理解 jQuery文件中的jQuery方法($符号)的由来

为window对象添加一个自定义属性

为window添加属性 1) 一个直接在顶级对象window下添加 2)一个是通过将window作为参数添加进行添加,推荐第二种

注意:自定义添加的属性名称 1)符号js的命名规范 2)不要与jQuery文件中已有方法名称起冲突 3)不要起js的关键字与保留字的名称

//调用自定义的k函数
window.$();
$();

window.$()与$()就是同一个方法,因为在js中顶级对象window可以省略,比如js中的document对象与alert()方法都隶属于window对象

• jQuery包装集对象

1) 原始的Dom对象通过JS代码获取的对象都是Dom对象,但是通过jquery获取的对象是一个jquery包装集对象,简称jquery对象即在jQuery中获取的所有对象无论是一个还是一组都封装成一个jQuery包装集

jQuery包装集

$('p')得到的是一个对象数组,将整个数组封装成一个jQuery包装集,为隐式迭代做准备

$('p')[0]得到的是包含一个对象,这个对象也被装成一个jQuery包装集

    
    
    
    


    p1
    p2

2)图解jQuery包装对象集查看其本质

jQuery本质

如果通过jQuery选择器获取的符合条件的对象就会添加到jQuery对象里面的数组(是一个伪数组)中即jQuery包装对象集,将JQ对象集当做一个JQ对象返回

JQ这样做的一个好处是jQuery对象在使用jQuery的方法时,会该对象集进行隐式迭代,不用再通过循环为每个对象添加该方法,只有jquery对象才能使用jquery提供的方法

通过隐式迭代将符合条件的都添加了该样式

暂时作初步了解肯定能通过之后学习加案例逐步理解掌握

• Dom对象与jQuery对象的相互转换

1) DOM对象转为jQuery对象

将获取的Dom对象通过jQuery的$()方法包裹后转换为jQuery对象

使用JQ方法的结果图

2) jQuery对象转为DOM对象

转换有两种方式

2.1通过下标获取到Dom对象

2.2通过get(下标)方法得到Dom对象

使用js设置的结果图

• 了解jQuery中的ready方法

jQuery中的ready()这个方法在上面的代码中一直在用

注意: ready()方法与onload()方法的区别,两个方法的区别上一章节中的入口函数已说过不再赘述