JQuery 的功能

443 阅读1分钟

jQuery是世界上最长寿的JavaScript函数库,从2006年发布至今依然有人使用jQuery,全世界浏览量排名在前面的网站,有百分之90%都在使用jQuery(不相信这个数据可以查看这个网站),所以有必要去了解jQuery。

获取页面元素

想要获取页面元素,按照JS原生代码需要这么获取:

let element = document.getElementById('元素')
//or
let element = document.querySelector('选择器元素')

看着很长,代码多的话写起来挺麻烦的,而jQuery就十分简洁:

let element = $('选择器元素')
//例子:
$(document)//选择整个文档
$('#myId')//选择ID名为myId的网页元素
$('div.myClass')//选择class名为myClass的div元素
$('input[namw=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的特点之一,就是选择页面的某一元素,把要对这个元素进行的操作,全都连接在一起,以链条的形式写出来,如:

$('div').find('h3').eq(2).html('hello');

//可以分解成下面的样子

$('div')//找到div元素
	.find('h3')//在div元素里选择其中的h3元素
	.eq(2)选择第三个h3元素
	.html('Hello')//将它的内容改为Hello

jQuery创建元素

创建元素如果是原生JS代码,如下:

let element = document.createElement('元素')//创建元素
document.body.append(element)//将创建的元素添加进body

同样看起来很长,而jQuery的代码如下:

let element = $('<元素>内容</元素>')//创建元素
$('body').append(element)//将创建的元素添加进body

对比下来jQuery十分的简洁。

jQuery移动元素

可以操作文档,使文档里的某一元素移动到指定的位置,例如:

//第一种
$('div').inserAfter($('p'))
$('div').inserBefore($('p'))
//第二种
$('p').after($('div'))
$('p').Before($('div'))

虽然这两种看起来差不多,但差别在于,根据链式操作,就可以知道第一种返回的对象是div元素,第二种返回的对象是p元素。

还有 appendTo()prependTo()append()prepend() 这四种和上面的差不多。

jQuery修改元素属性

jquery修改元素属性一般是 attr()removeAttr()

html如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>DOM-obj</title>
</head>
<body>
<a href="http://bilibili.com" id="aid" title="a标签的title属性值">点我</a>
</body>
</html>

如果是原生JS代码,修改元素属性如下:

let aNode = document.getElementById('aid');
aNode.setAttribute('href','http://xiedaimala.com'); // 设置元素的href属性

而jQuery如下:

$('#aid').attr('href','http://xiedaimala.com')
$('#aid').attr('href')//如果没有第二个值,就会返回该属性的值

甚至还可以一次性设置多个属性:

$('#aid').attr({'href':'http://xiedaimala.com','title':'hello world'})

当然, removeAttr() 如字面一样,可以删除属性,如:

$('#aid').removeAttr('href')