jQuery 自学笔记（一）——— jQuery概述

叁歲伎倆 2023-10-11 16:53 27阅读 0赞

#### 文章目录 ####

*   *  一、原生 JavaScript 与 JQuery 对比
     *  二、jQuery 的概念及基本使用步骤
     *  三、jQuery的入口函数
     *  四、$ 的含义
     *  五、Dom 对象和 jQuery 对象

--------------------

### 一、原生 JavaScript 与 JQuery 对比 ###

原生js的缺点

> 1、不能添加多个入口函数(window.onload)，如果添加了多个，后面的会把前面的给覆盖  
> 2、js的api名字太长  
> 3、代码冗余  
> 4、js有些属性方法，有浏览器兼容问题  
> 5、js容错率较低

JQuery的优点

> 1、可以写多个入口函数  
> 2、api容易记忆  
> 3、代码简洁（隐式迭代）  
> 4、可以解决兼容性问题  
> 5、容错率较高

--------------------

### 二、jQuery 的概念及基本使用步骤 ###

1、 **概念：一个封装了很多方法的JavaScript库**，学习这些方法如何使用。  
2、 **步骤：**  
① 引入JQuery文件  
② 写一个入口函数。防止页面上的标签还没有被渲染出来就执行  
③ 找到操作的元素（JQ选择器），去操作他（给他添加属性，样式，文本…）

$(document).ready(function(){
        
    	$('div').width(100).height(200).css('backgroundColor','red').text('哈哈');//链式编程
    });

--------------------

### 三、jQuery的入口函数 ###

1、 **jQuery入口函数的两种写法**

$(document).ready(function(){
        
    	...             
    });
    $(function(){
        
    	...          
    });

2、 **jQuery入口函数和window.onload入口函数的区别**

1.  **window.onload入口函数不能写多个，但是jQuery的入口函数是可以写多个。**
2.  **执行实际不同: jQuery入口函数要快于 window.onload**  
    jQuery入口函数要等待页面上dom树执行完后执行。  
    window.onload 要等待页面上所有资源（dom树/外部css/js连接,图片）都加载完毕后执行。

--------------------

### 四、$ 的含义 ###

**1、$ 是什么**  
如果报了这个错误: $ is not defined,就说明没有引入jQuery文件  
**2、jQuery文件结构**  
其实是一个自执行函数  
`$(function(){ window.jQuery = window.$ = jQuery; })`

*  引入一个 js 文件, 是会执行这个 js 文件中的代码。
 *  jQuery 文件是一个自执行函数，引入 jQuery 文件就是执行这个 jQuery 文件中的代码，其实就是执行这个自执行函数。
 *  这个自执行文件就是给 window 对象添加一个 jQuery 属性和 $ 属性。  
    `console.log(window);`  
    ![在这里插入图片描述][91836b7c080b4da98017717a050c0ab2.png]
 *  $ 其实是和 jQuery 是等价的，是一个函数。  
    `console.log(window.jQuery == window.$);`  
    `console.log(Object.prototype.toString.call($));`  
    ![在这里插入图片描述][9ebe3df2c8a84e5586e132be0ec65355.png]

**3、$是一个函数**  
参数传递不同，效果也不一样

*  如果参数传递的是一个匿名函数 - - - 入口函数  
    $( function()\{ … \} );
 *  如果参数传递是一个字符串–选择器/创建一个标签  
    $(‘\#one’); $(‘<div>我是一个div标签</div>’);
 *  如果参数是一个dom对象，那它会把 dom 对象转换成 jQuery 对象  
    $( dom对象 );

--------------------

### 五、Dom 对象和 jQuery 对象 ###

**1、Dom对象**

*  原生js选择器获取到的对象  
    `document.getElementById("");`  
    `document.getElementByTagName("");`
 *  特点：只能调用 dom 方法或者属性，不能调用 jQuery 的属性或者方法  
    `var div1 = document.getElementById("one");`  
    `div1.style.backgroundColor="red";//dom属性`  
    `div1.css('backgroundColor','red');//jQuery属性设置失败`

**2、jQuery对象**

*  利用 jQuery 选择器获取到的对象  
    `var div1 = $('#one');//通过jQuery选择器获取jQuery对象`
 *  特点：只能调用jQuery的方法或者属性，不能调用原生js dom对象的属性或者方法  
    `div1.css('backgroundColor','green');//jQ对象设置属性`  
    `div1.style.backgroundColor = 'red';//报错，jQ对象不能调用dom方法`

**3、jQuery对象长什么样**  
  jQuery对象是一个伪数组。jQuery对象其实就是 dom对象 的一个包装集。

`console.log(div1);`  
  ![在这里插入图片描述][926dab305d62431e90f0902e5bdc7909.png]  
**4、dom 对象转换成 jQuery 对象**  
  **语法：$(dom对象)**  
  `var div1 = document.getElementById("one");`  
  `var $div1 = $(div1);`  
  `console.log($div1);`  
  ![在这里插入图片描述][926dab305d62431e90f0902e5bdc7909.png]  
**5、jQuery 对象转换成 dom 对象**

1.  利用下标  
    `var $divs = $('div');`  
    `var div1 = $divs[0];//获取jQuery对象（伪数组）中的第一个dom对象`  
    `console.log(div1);`
2.  使用 jQuery 的方法 get();  
    `var $divs = $('div');`  
    `var div1 = $divs.get(0);`  
    `console.log(div1);`

[91836b7c080b4da98017717a050c0ab2.png]: https://img-blog.csdnimg.cn/91836b7c080b4da98017717a050c0ab2.png
[9ebe3df2c8a84e5586e132be0ec65355.png]: https://img-blog.csdnimg.cn/9ebe3df2c8a84e5586e132be0ec65355.png
[926dab305d62431e90f0902e5bdc7909.png]: https://img-blog.csdnimg.cn/926dab305d62431e90f0902e5bdc7909.png