JQuery入门基础

简介: JQuery入门基础

一、jQuery的介绍

jQuery 是一个快速、简洁的 **`JavaScript 库`**,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

 

JavaScript库


**`仓库`**: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。


**`JavaScript库`**:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。


简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。


比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)


**常见的JavaScript 库**


- Prototype:是最早成型的JS库之一,对于JS的内置对象做了大量的扩展。

- Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API,生成图标的组件等等。

- YUI:是由Yahoo公司开发的一套完备的,扩展性良好的富交互网页程序工作集。

- Ext JS:原本是对YUI的一个扩展,主要用于创建前端用户界面。

- Moo Tools:是一套轻量、简洁、模拟化和面向对象的JS框架。      

- jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。

- 移动端的zepto


> 这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。


1 What?

> j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。

>

> **jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。**

>

> **学习jQuery本质: 就是学习调用这些函数(方法)。**

>

> jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

- 一个优秀的 JS 函数库

- 使用了`jQuery`的网站超过 90%

- 中大型 WEB 项目开发首选

- `Write Less,Do More!!!`


2 Why?


- 轻量级。核心文件才几十kb,不会影响页面加载速度

- 跨浏览器兼容。基本兼容了现在主流的浏览器


- HTML 元素选取(选择器)

- HTML 元素操作

- CSS 操作

- HTML 事件处理

- JS 动画效果

- **链式调用** a().b().c()...

- **读写合一**

- 浏览器兼容

- 易扩展插件

- ajax 封装


3 Where?


- 中大型网站开发

- 是一些前端框架的基础,比如EasyUI,Bootstrap


4 How?


**1. 引入`jQuery`库**


**2. 使用`jQuery`**


------


二、jQuery基本使用


2.1 jQuery版本


**jQuery版本有很多,分为 1.x、2.x、 3.x**


- 1.x 版本:能够兼容 IE6, 7, 8 浏览器(不再更新版本)

- 2.x 版本:不兼容 IE6, 7, 8 浏览器(不再更新版本)

- 3.x版本:不兼容 IE6, 7, 8,更加的精简(在国内不流行,因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8)


> 1.x 和 2.x 版本 jquery 都不再更新版本了,现在只更新3.x版本


2.2 jQuery下载


官网:https://jquery.com/


- production (压缩过的版本,体积小,上线用)——生产版(压缩版)

- develepment(未压缩版本,开发时使用,适合查找)——开发版(测试版)


2.3 使用 jQuery


- **在页面中引入 jQuery 库**


~~~html
<!-- 服务器本地库 -->
<script src="./jquery-3.6.0.js"></script>
<!--



CDN远程库

   项目上线时,一般使用比较靠谱的CDN资源库,减轻服务器负担

   [https://www.bootcdn.cn/](https://www.bootcdn.cn/):搜索`jQuery`,复制``标签到项目中即可使用


- **在页面中引入 jQuery 库**

~~~html
<!-- 服务器本地库 -->
<script src="./jquery-3.6.0.js"></script>
<!--

CDN远程库

   项目上线时,一般使用比较靠谱的CDN资源库,减轻服务器负担

   [https://www.bootcdn.cn/](https://www.bootcdn.cn/):搜索`jQuery`,复制``标签到项目中即可使用


- **在 script 标签中使用 jquery 语法即可,如:**

~~~html
<div>Content</div>
<script src="./jquery-3.6.0.js"></script>
<script>
    $('div').hide();
</script>
~~~


2.4 jQuery 闭包结构


打开jQuery库查看后  有一个基本架构如下

```js
( function( global, factory ) {
} )();
```


-  用一个函数域包起来,就是所谓的沙箱

- 在这里边 var 定义的变量,属于这个函数域内的局部变量,避免污染全局

- 把当前沙箱需要的外部变量通过函数参数引入进来

- 只要保证参数对内提供的接口的一致性,你还可以随意替换传进来的这个参数。


> jQuery 具体的实现,都被包含在了一个立即执行函数构造的闭包里面,为了不污染全局作用域,只在后面暴露 $ 和 jQuery 这 2 个变量给外界。


2.5  jQuery 的 2 把利器


```javascript
// jQuery核心代码
(function(window){
    var jQuery = function(){
        return new jQuery.fn.init();
    }
    window.$ = window.jQuery = jQuery
})(window)
```


**jQuery 核心函数**


简称:`jQuery`函数(`$`/`jQuery`),`jQuery`库向外直接暴露的就是`$`/`jQuery`


引入`jQuery`库后,直接使用即可


- 当函数用:`$(xxx)`


- 当对象用:`$.xxx()`


```js

// jQuery函数:直接可用
console.log($, typeof $);  // ƒ ( selector, context ) {}    function
console.log(jQuery === $); // true
```


**jQuery 核心对象**


简称:`jQuery`对象


得到`jQuery`对象:执行`jQuery`函数返回的就是`jQuery`对象


使用`jQuery`对象:`$obj.xxx()`

```js
// jQuery对象:执行jQuery函数得到它
console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true
```
![image-20210823214249792](https://i.loli.net/2021/08/23/qiELvA1Pnhx68B4.png)


2.5.1 jQuery 函数的使用


作为一般函数调用:`$(param)`


1. 参数为函数:当 DOM 加载完成后,执行此回调函数

2. 参数为选择器字符:查找所有匹配的标签并将它们封装成`jQuery`对象

3. 参数为 DOM 对象:将 dom 对象封装成`jQuery`对象

4. 参数为 html 标签字符串(用得少):创建标签对象并封装成`jQuery`对象


作为对象使用:`$.xxx()`


- `$.each()`:隐式遍历数组

- `$.trim()`:去除两端的空格


```js

// 需求1.点击按钮:显示按钮的文本,显示一个新的输入框

// 1、参数为函数:当 DOM 加载完成后,执行此回调函数

$(function () { // 绑定文档加藏完成的监听

   // 2、参数为选择器字符:查找所有匹配的标签并将它们封装成`jQuery`对象

   $("#btn").click(function () {

       // alert(this.innerHTML); // this是什么?发生事件的dom元素(<button>)

       // 3、参数为 DOM 对象:将 dom 对象封装成`jQuery`对象

       alert($(this).html());

       // 4、参数为 html 标签字符串(用得少):创建标签对象并封装成`jQuery`对象

       $('<input type="text" name="msg3"><br/>').appendTo("div");

   });

   

   // 需求2.遍历输出数组中所有元素值

 

 var arr = [3, 7, 4];
    $.each(arr, function (index, item) {
        console.log(index, item); // 0 3    1 7    2 4
    });
})

 

2.5.2 jQuery 对象的使用


**理解**


即执行`jQuery`核心函数返回的对象


`jQuery`对象内部包含的是 dom 元素对象的伪数组(可能只有一个元素)


`jQuery`对象拥有很多有用的属性和方法,让程序员能方便的操作 dom


**属性和方法**


- 基本行为:操作标签的基本方法


- 属性:操作内部标签的属性或值


- CSS:操作标签的样式


- 文档:对标签进行增删改操作


- 筛选:根据指定的规则过滤内部的标签


- 事件:处理事件监听相关


- 效果:实现一些动画效果


这里我们先学习`jQuery`对象的基本行为,其他的不放在当前章节中


2.6 入口函数


一般代码写在页面底部,等元素加载完,才能执行 jQuery 代码,或者可以使用下方入口函数解决


~~~html
<script src="./jquery-3.6.0.js"></script>
<script>
    $(document).ready(function () {
        //
    });
</script>
~~~


> 等待页面 DOM 加载完毕后执行,相当于原生 js 中 DOMContentLoaded


~~~html
<script src="./jquery-3.6.0.js"></script>
<script>
    $(function(){
        //
    })
</script>

 


~~~html
<script src="./jquery-3.6.0.js"></script>
<script>
    $().ready(function() {
        //
    });
</script>


jQuery 入口函数与 window.onload 的对比


- JavaScript 的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。

- jQuery 的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。


## 三、选择器


jQuery 选择器是 jQuery 为我们提供的一组方法,让我们更加方便的获取到页面中的元素


3.1 基本选择器

| 名称       | 用法                      | 描述                                          |

| ---------- | ------------------------- | :-------------------------------------------- |

| ID选择器   | $('#id');                 | 获取指定ID的元素                              |

| 类选择器   | $('.class');              | 获取同一类class的元素                         |

| 标签选择器 | $('div');                 | 获取同一类标签的所有元素                      |

| 并集选择器 | $('div,p,li');            | 使用逗号分隔,只要符合条件之一就可。          |

| 交集选择器 | $('div.redClass');        | 获取class为redClass的div元素                  |

| 属性选择器 | $('input[name=username]') | 获取 input 标签中 name 属性为 username 的元素 |


注意:jQuery选择器返回的是jQuery对象。


~~~html

<script type="text/javascript">

   //常用选择器

   //根据id获取元素 获取到的结果:类数组对象

   console.log( $('#div0') );

   console.log( $('#div0')[0] );

   //根据class获取元素

   console.log( $('.div_1') );

   //根据标签名称来获取元素

   console.log( $('div') );

   //根据属性获取元素

   console.log( $('input[name=username]') );

   //根据表单元素属性获取元素

   console.log( $(':checked') );

</script>

~~~


3.2 层级选择器


| 名称       | 用法          | 描述                                                         |

| ---------- | ------------- | :----------------------------------------------------------- |

| 子代选择器 | $('ul > li'); | 使用 > 号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |

| 后代选择器 | $('ul li');   | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等   |


3.3 过滤选择器


这类选择器都带冒号:


| 名称         | 用法                               | 描述                                                        |

| ------------ | ---------------------------------- | :---------------------------------------------------------- |

| :eq(index) | $('li:eq(2)').css('color', 'red'); | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |

| :odd         | $('li:odd').css('color', 'red');   | 获取到的li元素中,选择索引号为奇数的元素                    |

| :even        | $('li:even').css('color', 'red');  | 获取到的li元素中,选择索引号为偶数的元素                    |


3.4 jQuery 筛选方法


- 筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。


| 名称               | 用法                        | 描述                             |

| ------------------ | --------------------------- | :------------------------------- |

| children(selector) | $('ul').children('li')      | 相当于$('ul>li'),子类选择器     |

|find(selector)     | $('ul').find('li');         | 相当于$('ul li'),后代选择器          |

| siblings(selector) | $('#first').siblings('li'); | 查找兄弟节点,不包括自己本身。   |

| parent()           | $('#first').parent();       | 查找父亲                         |

| parents()          | $('li').parents();          | 查找祖先元素                     |

| e eq(index)          | $('li').eq(2);              | 相当于$('li:eq(2)'),index从0开始 |

| next()             | $('li').next()              | 找下一个兄弟                     |

| prev()             | $('li').prev()              | 找上一次兄弟                     |

| closest            | $('li').closest('ul')       | 找最近一个祖先元素               |


3.5 this 和 当前索引


在对象的事件中,(this)表示当前操作的jQuery对象,(this) 表示当前操作的 jQuery 对象,(this).index() 表示当前元素的索引号


~~~js
$("li").click(function () {
    console.log($(this).index());
}


目录
相关文章
|
5月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
28 0
|
6月前
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
5月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
5月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
33 0
|
7月前
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战
|
4月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
24 0
|
5月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
20 0
|
5月前
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
28 0
|
6月前
|
存储 JavaScript 前端开发
jQuery:入门
jQuery:入门
71 0
|
JSON JavaScript 前端开发
JQuery JavaScript常用API整理(前端入门必学)
JQuery JavaScript常用API整理(前端入门必学)

相关产品

  • 云迁移中心