jQuery

简介

jQuery 是一个非常流行的 js库，方便我们进行 web 前端开发。

主要的用途有：操作DOM对象、事件处理、和服务端通信、常用功能库、动画效果。

特别是早期前端开发，当时 js语言和浏览器 Web API 功能比较少，使用jQuery提供的库，可以大大提高开发人员的效率，几乎是web前端开发必不可少的库。

后来 js语言本身和浏览器 Web API 不断完善，现在通常可以不需要 jQuery

但是仍有大量的第三方库和现有项目的代码依赖 jQuery，所以还是有必要学习的。

jQuery 安装

开发环境下，要使用 jQuery 库，可以在本地服务创建一个库目录，然后把 jQuery 库从官网下载地址下载本地库目录中

还可以直接使用 靠谱的 js库公共cdn

推荐如下这些

jsdelivr

3.6.0 版本的jQuery库url为：

https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

由于目前 3.6.0 就是最新版，可以简化写为

https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js

cdnjs

jQuery库url为：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js

字节跳动公共库cdn

jQuery库url为：

https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js

大家可以把 jQuery 库的url地址添加到你的网页head中，比如

<head>

  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

</head>

注意：公共cdn有时会突然宕机，所以正式产品部署时，还是下载部署到自己的网站上，或者自己购买的CDN云服务上（比如阿里云CDN+OSS）

选择元素/事件处理

html中引入jQuery 库链接后，就可以使用该库了

先看一下jQuery 如何选择元素并进行事件处理

如下：

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>

  <button id='b1'>测试按钮1</button>
  <button id='b2'>测试按钮2</button>

  <script>
  jQuery('button').on('click', function () { alert('按钮被点击') })
  </script>

<body>

其中 jQuery 本身就是一个构造函数，里面的参数是css 选择器

jQuery('button') 返回的就是一个 jQuery 对象。

这个对象类似js的数组，里面包含了所有参数 css 选择器选中的DOM对象。

jQuery 对象的 on 方法，用来定义事件处理，如下

jQuery('button').on('click',  function () { alert('按钮被点击') })

第一个参数就是事件名称，第二个参数是回调函数

还有一种简便写法，如下

jQuery('button').click( function () { alert('按钮被点击') })

从上面的示例可以看出，

如果返回的对象选择到了多个元素对象，不需要循环定义每个元素对象的事件处理，而是可以一起定义

jQuery 还有一个简化的别名就是一个字符 $

所以上面的代码也可以简写为

$('button').on('click', function () { alert('按钮被点击') })

当然也可以注册处理其他类型事件，比如

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>

  <textarea>按ctrl+回车 试试</textarea>

  <script>
  $('textarea').on('keydown', function (e) { 
    if (e.ctrlKey && e.key==='Enter')    
      alert('按下了ctrl+回车') 
  })
  </script>

<body>

元素操作

添加元素

<head>
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
</head>

<body>

  <div id='content1'>
    <p id='target1'>原来的元素1</p>
  </div>

  <div id='content2'>
    <p id='target2'>原来的元素2</p>
  </div>
</body>

然后打开控制台，分别执行如下代码，看看html内容的变化

下面是添加子元素的示例

// 这样创建一个html元素对象 
var ele1 = $( "<p>新元素1</p>" );

// 添加到 div#content1 ，作为最后一个子元素
ele1.appendTo( "#content1" );

// 当然也可以这样写
$( "<p>新元素1</p>" ).appendTo( "#content1" );

// 添加到 #content1 ，作为第一个子元素
$( "<p>新元素2</p>" ).prependTo( "#content1" );

// 插入到 #target2 前面，作为哥哥节点
$( "<p>新元素3</p>" ).insertBefore( "#target2" );

// 插入到 #target2 后面，作为弟弟节点
$( "<p>新元素4</p>" ).insertAfter( "#target2" );

还可以这样

$( "#content1" ).append( "<p>新元素1</p>" );
$( "#content1" ).prepend( "<p>新元素2</p>" );
$( "#target2" ).before( "<p>新元素3</p>" );
$( "#target2" ).after( "<p>新元素4</p>" );

删除元素

删除元素方法很简单，先选中，然后调用 remove 方法，

比如：

$( "#content1" ).remove()

替换元素内容

先选中，然后

调用 html 方法，更新元素内部的html，

比如：

$( "#content2" ).html(`<p id='target3'>新元素2222</p>`)

类似浏览器内置的元素对象的 innerHTML 方法

调用 text 方法，更新元素内部的文本内容，

比如：

$( "#target2" ).text(`新元素22222`)

类似浏览器内置的元素对象的 innerText 方法

元素值操作

调用 val() 方法，可以获取或者设置一些元素的值，比如 input、select、textarea

类似 HtmlElement 的 value 属性的作用

比如

// 获取 id 为 username 的元素的值
let username = $('#username').val()

// 设置 id 为 username 的元素的值
$('#username').val('byhy')

元素属性操作

获取元素属性

attr() 可以用来获取元素的属性，类似浏览器内置的元素对象的getAttribute() 方法

返回值都是字符串的形式

如下：

<a id="hey" 
  style='color:green;font-size: 2rem;'  
  href="/" 
  class='nav nav-item'
  attr1='自定义属性'>
  一个链接
</a>

<script>
let a = $('a')

console.log(a.attr('id'))
console.log(a.attr('style'))
console.log(a.attr('href'))
console.log(a.attr('class'))
console.log(a.attr('attr1'))
</script>

运行结果如下

hey
color:green;font-size: 2rem;
/
nav nav-item
自定义属性

设置元素属性

attr() 如果提供第2个参数，就是用来设置元素的属性，

类似浏览器内置的元素对象的setAttribute() 方法

比如

<a id="hey" style='color:green'  href="/" attr1='自定义属性'>一个链接</a>

<script>
let a = $('a')

a.attr('id', 'new-hey')
a.attr('style' , 'color:blue')
a.attr('href', 'https://www.byhy.net')
a.attr('attr1', '自定义属性2')
</script>

删除元素属性

removeAttr()方法用来删除元素的属性

类似浏览器内置的元素对象的removeAttribute() 方法

比如

a.removeAttr('id')
a.removeAttr('style')
a.removeAttr('href')
a.removeAttr('attr1')

style设置

css()方法用来设置元素的style里面的某个样式属性

比如，

a.css('color', 'red')

如果是点击某个元素，就设置这个被点击元素的style属性，可以这样写

<a id="hey" 
  style='color:green;font-size: 2rem;'  
  href="#">
  一个链接
</a>

<script>
  $('a').click(function () {
    $(this).css('color', 'red');
  });
</script>

$(this) 代表了触发这个点击事件的对象，并且封装为一个JQuery对象，这样可以方便的使用JQuery对象更便捷方法。

否则，如果我们只用 this，就得这样写

$('.a').click(function () {
  this.style.color = "red"
});

和服务端通讯

见后面章节