整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

jQuery知识一览

、概览

jQuery官网:https://jquery.com/
jQuery是一个高效、轻量并且功能丰富的js库。
核心在于查询query。
jQuery是一个优秀的js函数库,是React/Vue/Angular框架之外中大型项目的首选。
jQuery的主旨是write less, do more。

1.1 jQuery的功能

  • html元素的选取
  • 操作html元素
  • css操作
  • html事件处理
  • 实现js动画效果
  • 能够链式调用
  • 容易扩展插件
  • 封装了ajax

1.2 引入jQuery库

引入jQuery的方式有2种,一种是项目中直接引入jQuery的min.js文件,一种是使用服务器端jQuery文件(使用cdn)脚本标签方式引入。

1.2.1 本地项目引入

在官网的:https://jquery.com/download/ 链接下可以下载到完整的代码,放到项目文件的js文件夹下。

<script src="static/js/jquery-3.7.1.min.js"></script>

1.2.2 cdn方式引入

在网站:https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

1.2.3 版本兼容

  • 1.x 版本兼容老版本的IE,文件比较大
  • 2.x 版本文件比较小,支持IE8+
  • 3.x 版本引入部分新API,提供多个分包的版本,支持IE9+

1.2.4 开发的正确姿势

开发过程中一般使用非min.js文件方便调试,生产环境部署上线时才使用min.js这种压缩文件。

二、jQuery源码浅析

2.1 匿名函数调用

从源码中可以看出,jQuery的整体逻辑可以用以下简单的结构进行描述:

( function( global, factory ) {
    // 判断有无window环境的一堆逻辑代码
})( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
    // 构造jQuery的一些逻辑代码
    return jQuery
});

2.2 jQuery是一个函数

从源码中可以看出,jQuery被定义为一个函数,函数中返回了一个实例对象(看new关键字)。

继续跟踪源码 new jQuery.fn.init( selector, context),这个函数中调用了makeArray,当然在其他if判断语句中也有返回伪数组对象(比如,定义了length字段,还有[0]的操作),这里拿makeArray作为演示。

查看makeArray函数:

所以这个返回实例对象,是一个伪数组。

$('#menu-trigger') instanceof Array // false
$('#menu-trigger') instanceof Object // true

2.3 jQuery挂载在window上

从源码中可以看出,将jQuery函数和window.$ 以及window.jQuery绑定赋值,所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符,快捷简省。

2.4 jQuery验证

所以在引入jQuery的项目中:

console.log(typeof $); // function
console.log($ === jQuery); // true
console.log($() instanceof Object); // true

三、jQuery常见用法

3.1 函数形式调用

通常形式为:$(param)

  • param为函数:dom加载完成后,执行该回调函数
  • param为选择器字符串:查找与该选择器匹配的所有标签,并封装成jQuery对象
  • param为dom对象:将该dom对象封装成jQuery对象
  • param为标签字符串:创建标签对象并封装成jQuery对象
$(function() {
    console.log("dom finished and execute this");
})

$('#btn').click(function () {
    // 这里的this是id为#btn的dom元素
    console.log(this.innerHTML)
    
    console.log($(this).html())
})

$('<input type="number"></input>').appendTo('div')

3.2 点语法调用函数

let list = [1, 2, 3]
$.each(list, function(i, ele) {
    console.log(i, ele)
})

$.trim(' hello world ')

3.3 用法浅析

  • jQuery函数返回的是一个伪数组(Object对象),可以使用length和下标。
// class中名为btn的dom元素有多少
$('.btn').length

$('.btn')[0]

$('.btn').get(0)

$('.btn').index()

// 设置名为btn的class对应的dom标签的文本内容
$('.btn').text('自定义文本内容')

通过$(param)传入的是selector、element、标签情况下,返回的是包含1个或者多个dom元素对象的伪数组。

3.4 获取一组dom元素的常见用法

// 基础标签和class
// 选择了所有的div和span标签
$('div, span')

// 选择所有具有某个class的标签
$('div.container')

// 层次选择器
$('ul span') // ul标签下的所有span元素
$('ul>span') // ul标签下的所有子span元素
$('.container+li') // class为container的元素后的下一个li元素
$('ul .item~*') // class为item的元素后面所有兄弟元素

// 过滤选择器
$('div:first') // 选择第一个div
$('div:last') // 最后一个div
$('div:not(.container)') // class不为container的所有div
$('div:lt(3):gt(0)') // 所有div元素中的大于0小于3的div元素,表示1和2索引处的dom元素
$('div:containers("hello world")') // 内容为hellow world的div元素
$('div:hidden') // style中display: none的div元素
$('div[data]') // 有data属性的div元素, example: <div data=""></div>
$('div[data="123"]') // 有data属性且值为123的div元素, example: <div data="123"></div>

// 示例,使table表格的奇数行背景样式设置
$('table>tbody>tr:odd')

// form表单中
$(':text') // 所有单行输入框
$(':text:disabled') // 所有disabled的input输入框
$(':checkbox') // 所有checkbox
$(':checkbox:checked') // 所有选中的checkbox
$('select').val() // select标签选中的option的value值

3.5 修改css

直接修改css属性(如果其dom标签存在这个css属性)

$('#container').css('background', 'red');

$('#container').css({ 'background' : 'red', 'color': 'blue' }) // 一组属性

清空某标签下的所有dom:

$('.carousel-inner').empty();

给某标签下添加dom标签:

$('.carousel-inner').append(domStr);

移除、添加class:

$('.carousel-indicators li').removeClass('active');
$('.carousel-indicators li:first').addClass('active');

3.6 获取属性

获取dom标签上的属性:

 $('.about-img-1>img').attr('src');

设置标签的属性:

 $('.about-img-1>img').attr('src', (data && data['image']) ? data['image'] : '');

3.7 一些dom事件

点击:

$('.category-product-page-ul>li').click(function(e) {
    e.preventDefault();
    console.log('this is:', this); // 打印对应的dom标签
});

hover:

$('#container').hover(  
    function() {  
        // 当鼠标进入元素时执行的函数
    },
    function() {  
        // 当鼠标离开元素时执行的函数
    }  
  );

监听事件:

$('.bigImage').on("mousemove", function( e ) {
    // do something
});

3.8 发起ajax请求

const json = '/static/js/data/xxx.json';
 $.ajax({
    url: json,  
    dataType: 'json',  
    success: function(data) {
      // do something
    },
    error: function(jqXHR, textStatus, errorThrown) {  
      console.error('Fail to read json:', textStatus, errorThrown, json);
    }  
  });

post请求:

介:

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

关于jQuery开发教程的详细内容:(点击下方“了解更多”,记得收藏哦~)

(本课程可以帮助学员掌握jQuery开发技术,适合人群前端开发者学习)

jQuery 选择器:

允许您对元素组或单个元素进行操作。

3.1 元素选择器

使用 CSS 选择器来选取 HTML 元素。

3.2 属性选择器 [ ]

带有给定属性的元素。

$('[title]').hide();

改变 HTML 元素的 CSS 属性。

3.3 CSS 选择器

$('p').css('background-color', 'red');

语言特点:

  • 快速获取文档元素

jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。

  • 提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果,可以开发出非常漂亮的网页,许多网站都使用jQuery的内置的效果,比如淡入淡出、元素移除等动态特效。

  • 创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称,可以开发出非常灵敏无刷新的网页,特别是开发服务器端网页时,比如PHP网站,需要往返地与服务器通信,如果不使用AJAX,每次数据更新不得不重新刷新网页,而使用AJAX特效后,可以对页面进行局部刷新,提供动态的效果。

  • 提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强,比如元素迭代和数组处理等操作。

  • 增强的事件处理

jQuery提供了各种页面事件,它可以避免程序员在HTML中添加太事件处理代码,最重要的是,它的事件处理器消除了各种浏览器兼容性问题。

  • 更改网页内容

jQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,jQuery简化了原本使用JavaScript代码需要处理的方式。

语言评价:

jQuery 是继prototype 之后又一个优秀的轻量级JavaScript 框架。其宗旨是———“Write Less, Do More”,写更少的代码,做更多的事情。 它是一个快速和简洁的JavaScript 库,可以简化HTML 文档元素的遍历,事件处理,动画和Ajax 交互以实现快速Web 开发,它被设计用来改变编写JavaScript 脚本的方式。

jQuery 的文档非常丰富,因为其轻量级的特性,文档并不复杂,随着新版本的发布,可以很快被翻译成多种语言,这也为jQuery 的流行提供了条件。jQuery 被包在语法上,jQuery 支持CSS1-3 的选择器, 兼容IE 6.0+, FF 2+,Safari 3.0+, Opera 9.0+, Chrome 等浏览器。同时,jQuery 有约几千种丰富多彩的插件,大量有趣的扩展和出色的社区支持,这弥补了jQuery功能较少的不足并为jQuery 提供了众多非常有用的功能扩展。加之其简单易学,jQuery 很快成为当今最为流行的JavaScript 库,成为开发网站等复杂度较低的Web 应用程序的首选JavaScript 库,并得到了大公司如微软,Google 的支持。

jQuery 最有特色的语法特点就是与CSS 语法相似的选择器,并且它支持CSS1 到CSS3 的几乎所有选择器,并兼容所有主流浏览器,这为快速访问DOM 提供了方便。

阿里云开发者社区全面升级,一站式体验,用得更爽:https://developer.aliyun.com?spm=a2c41.12958151.0.0(复制网址链接到浏览器,记得收藏)

读本文约需要10分钟,您可以先关注我们,避免下次无法找到。

本篇文章成哥继续带大家来学习前端教程之jQuery,它将DOM的操作进行了封装,可以大大降低我们前端开发时操作DOM的复杂度。下面我们就一起来学习内容吧!

01 jQuery简介

jQuery 是开源软件,使用 MIT 许可证授权。jQuery 的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档对象模型(DOM)元素、创建动画效果、处理事件、以及开发 Ajax 程序。jQuery核心理念是write less,do more(写得更少,做得更多),他内部帮我们把几乎所有功能都做了封装。

02 jQuery使用

在使用jQuery时,需要提前下载并应用jQuery之后,才能在代码中使用,也可以通过CDN引用来使用。下面我们到jQuery官方网站下载jQuery文件,然后在HTML页面应用具体如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   
9.   <!-- 通过使用jquery文件来使用jquery -->  
10.   <script src="jQuery/jquery-3.5.1.js"></script>  
11.   
12.   <!-- 通过微软cdn来使用jquery -->  
13.   <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>  
14. </body>  
15. </html>  

03 jQuery选择器

我们先创建一个HTML页面,然后在其内引用jquery,通过该HTML我们来演示各种jquery选择器查询的内容,其HTML页面内容如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span>内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20. </body>  
21. </html>  

(1)HTML elements选择器

HTML elements选择器可以将HTML页面的div、p、span、table等标签通过在其上加引号进行筛选,具体如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span>内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()该语法标识在html加载完成再执行function()匿名函数中的内容  
22.      $(function () {  
23.   
24.         // 元素选择器,查询html页面中所有p标签  
25.         var a = $("p");  
26.         // 我们将查询到的内容打印出来  
27.         console.log(a)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  

(2)class选择器

class选择器就是通过class名称找到对应的标签对象,具体示例如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span>内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()该语法标识在html加载完成再执行function()匿名函数中的内容  
22.      $(function () {  
23.   
24.         // class选择器语法格式是'.+class名称'如下所示  
25.         var a = $(".foo");  
26.         // 我们将查询class名称为foo的所有标签对象  
27.         console.log(a)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  

(3)id选择器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span>内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()该语法标识在html加载完成再执行function()匿名函数中的内容  
22.      $(function () {  
23.   
24.         // id选择器语法格式是'#+class名称'如下所示  
25.         var bar = $("#bar");  
26.         // 将查询到id名称为bar的所有标签进行打印  
27.         console.log(bar)  
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  

(4)组合选择器

jquery允许在指定选择标签元素同时,指定其class名称或者id来进行筛选,这种筛选方式称其为组合选择器,具体示例如下:

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span id="boo">内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()该语法标识在html加载完成再执行function()匿名函数中的内容  
22.      $(function () {  
23.   
24.         // 组合选择器语法格式"元素标签+class名称/id名称"  
25.         var span_class = $("span.foo");  
26.         var span_id = $("span#boo")  
27.         // 将查询的标签对象打印出来  
28.         console.log(span_class)  
29.         console.log(span_id)  
30.      })  
31.   </script>  
32.   
33. </body>  
34. </html>  

(5)多选择器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span id="boo">内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()该语法标识在html加载完成再执行function()匿名函数中的内容  
22.      $(function () {  
23.   
24.         // 多选择器,可以将多种选择器进行组合,之间用逗号隔开  
25.         var a = $("p#bar, .foo");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  

(6)层级选择器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span id="boo">内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()该语法标识在html加载完成再执行function()匿名函数中的内容  
22.      $(function () {  
23.   
24.         // 层级选择器,选择p标签中含有span标签的对象元素  
25.         var a = $("p span");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  

(7)属性选择器

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <meta charset="UTF-8">  
5.   <title>jQuery基础教程</title>  
6. </head>  
7. <body>  
8.   <p>jQuery选择器</p>  
9.   <p class="foo">带class样式的p标签</p>  
10.   <p><span id="boo">内嵌span的p标签</span></p>  
11.   <p id="bar">带id的p标签 <span class="foo">内嵌class的span标签</span></p>  
12.   <div>  
13.     <p my-id="my_para">在div内部带id的p标签</p>  
14.     <p my-id="my_para2"><span>在div内部带id的p标签在内嵌span标签</span></p>  
15.   </div>  
16.   
17.   <!-- 通过使用jquery文件来使用jquery -->  
18.   <script src="jQuery/jquery-3.5.1.js"></script>  
19.   
20.   <script>  
21.      // $()该语法标识在html加载完成再执行function()匿名函数中的内容  
22.      $(function () {  
23.   
24.         // 属性选择器,语法格式"标签元素[属性名称=属性值]",查询含有my-id属性值为my_para的p标签  
25.         var a = $("p[my-id=my_para]");  
26.         console.log(a);  
27.   
28.      })  
29.   </script>  
30.   
31. </body>  
32. </html>  

04 总结

至此我们《jQuery基础教程上篇》就讲完了,下篇内容主要讲解jQuery的过滤器及常用操作方法等相关知识,敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦!

-END-

文章推荐:

  • 程序员也需了解的主流云计算网络架构