jQuery基本介绍

jQuery是目前为止世界上使用的最为广泛的JavaScript函数库,根据统计在全球前一万个及前十万个网站中有80%的网站都在使用jQuery,远比Vue和React两者都要多,虽然现在很多公司招前端都不会在招聘要求上写上jQuery,往往都是要求会Vue或者React,但是实际上则是因为jQuery简单易学,很多公司默认你会,就算不会的话只要会Vue和React也能很快就能现学现用,不会给项目造成太大的问题。

jQuery功能

获取元素

jQuery的基本设计思想就是选择某个(些)网页元素,然后在对其进行某种操作这是jQuery相较于其他JavaScript库的最根本的区别。

使用jQuery通常会将一个选择表达式放入jQuery()中(简写为$)然后得到被选中的元素。

选择表达式可以是css选择器也可以是jQuery自己的表达式

CSS选择器
$(document) //选择整个文档对象

$('#2demo') //选择ID为2demo的网页元素

$('div.2demo') //选择class为2demo的div元素

$('input[name=first]') //选择name属性为first的input元素

jQuery选择器

$('a:first') //选择网页中第一个a元素

$('tr:odd') //选择表格的奇数行

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)') // 选择所有的div元素,除了前三个

$('div:animated') // 选择当前处于动画状态的div元素

jQuery的选择器十分强大并且支持多种过滤器,可以使开发者更容易精准定位操作元素

链式操作

jQuery设计的时候回返回this(返回一个对象,可以看一下简单实现的jQuery,源码),所以当使用jQuery对某一元素进行某项动作之后还能接着进行其他操作,一个个操作连续添加就和链条一样就是链式操作了。

$('div').find('h3').eq(2).html('2demo.top')
分解
$('div') //找到div元素
.find(h3) //选择其中的h3元素
.eq(1) //选择第2个h3元素
.html('2demo.top') //将他的内容修改为2demo.top

这一设计使得jQuery操作连续性大大提高,同时jQuery还提供了.end()的api,可以使结果集后退一步,同样以上方的代码为例

$('div') //找到div元素
.find(h3) //选择其中的h3元素
.eq(1) //选择第2个h3元素
.html('2demo.top') //将他的内容修改为2demo.top 爱示范
.end() //返回到选择其中的h3元素
.eq(0) //选择其中的第一个h3元素
.html('爱示范') //修改该h3元素为 爱示范

创建元素

创建元素非常简单,使用.append()函数即可在匹配元素的最后面创建目标元素,如果要在匹配目标之前创建可以采用.prepend()

$('.inner').append('<p>在inner之后创建P元素</p>')
$('.inner').prepend('<p>在inner之前创建p元素</p>')

也可以通过

$('<p>插入P元素成功</p>').insertAfter('div.inner') //当网页中不存在对应p元素就会在目标位置创建对应元素

移动元素

jQuery提供了两种方法来移动元素在网页中的位置,一种是直接移动该元素,另一种就是通过移动其他元素使得目标元素到达指定位置,类似于围魏救赵。这里引用官方文档的示例做演示。

假定需要将p元素移动至class为inner的div元素之前

<div class="container">

      <h2>jQuery 元素移动演示</h2>
     
      <div class="inner">2demo.top 我原本在上面 </div>
      <p>2demo.top 爱示范 我原本在下面</p>
     
</div>

第一种方法是使用.insertAfter()

$('div.inner').insertAfter($('p')) //选择class为inner的div移动至p标签后

原本状态

原本状态

修改后

修改后

第二种方法为使用.after(),把p元素放在div元素前面。

$('p').after($('div.inner'))

两种方法的效果是相同的,但是内在的原理区别还是有的,那就是返回的元素不一样,第一种返回的是div元素,第二种返回的则是p元素,如果后续还需要对p元素进行其他操作可以使用后一种,如果要操作div可以使用前一种。这些可以看操作习惯和后续的操作采取哪种方式。

修改元素属性

修改元素属性可以采用.attr()

获取元素属性并修改/创建(存在时修改不存在时创建)

$('.inner').attr('class','2demo')

删除某个属性可以使用.removeAttr()

添加class .addClass()

删除class .removeClass()

引用文献:

jQuery中文文档

jQuery设计思想-阮一峰