jQuery 的功能 - 《😈的博客》

获取页面元素
jQuery链式操作
jQuery创建元素
jQuery移动元素
jQuery修改元素属性

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