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" >点我</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')
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！