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"
});

和服务端通讯

见后面章节