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')