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元素
$('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设计思想-阮一峰