什么是jQuery

jQuery是一个小型的JavaScript库，但是其功能十分丰富，借助于其API，我们可以对HTML文档进行各种操作，例如，遍历，事件处理以及Ajax。

目前，仍有超过 80% 网页在使用jQuery。

下面我会简单的介绍一下jQuery的一些功能。

jQuery是如何获取元素的

jQuery 的一大特点就是，他是一个不需要使用new的构造函数。

我们可以通过 jQuery('#element') 来构造出一个对象，该对象可以操作id = 'element' 的元素。

我们也可以将 jQuery() 简写为 $()

选择网页元素

$(document)
//选择整个文档

$('#element')
//选择所有id为element的元素

$('div.className')
//选择所有class为className的div元素

$('input[name=first]')
//选择name=first的input元素

$('p:first')
//选择网页中第一个p元素

$('tr:even')
$('tr:odd')
//获取tr的偶数/奇数行

$('#form:input')
//获取form中的input元素

$('body:visible')
//获取body中所有可见的元素

$('div:gt(2)')
//获取所有的div，除了前3个

$('div:animated')
//获取所有div中当前处于动画状态的div元素

jQuery强大的过滤器

$('div').has('p')
//选择所有包含p元素的div元素

$('div').not('.className')
//选择所有class不包含className的div元素

$('div').filter('.className')
//选择所有class包含className的div元素

$('div').first()
//选择第一个div元素

$('div').eq(10)
//选择第11个div元素

$('div').next('p')
//选择div元素后面的第一个p元素

$('div').parent()
//选择div的父元素

$('div').children()
//选择div的所有子元素

$('div').siblings
//选择div的所有同级元素

jQuery的链式操作

jQuery一般情况下每次都会return API对象，所以可以实现链式操作。

某些特殊情况下不会直接return API对象，例如 find() ；他会重新封装一个对象，并返回，否则$('div').find('.className')后进行链式操作的话，操作的对象还是div。

此外，jQuery还提供了end()方法，可以退回至最近一次的筛选操作。

jQuery是如何创建元素的

jQuery创建元素的原理十分简单，只需要将要创建的元素直接传入jQuery构造函数即可。

$('<div>这是一个div元素</div>')

//其基本原理如下
function createElement(string){
    const container = document.createElement('template')
    container.innerHTML = string.trim()
    return container.content.firstChild
}

jQuery是如何移动元素的

jQUery的移动操作可以分为两种，一种是直接移动该元素，另一种是移动其他元素，使其达到我们想要的位置

$('div').insertAfter($('p'))
//将div元素移到p元素后面，返回div元素

$('p').after($('div'))
//将p元素移到div元素前面，返回p元素

以上规则同样适用于下列API

$('div').insertBefore($('p'))
$('p').before($('div'))

$('div').appendTo($('.container'))
$('.container').append($('div'))

$('div').prependTo($('.container'))
$('.container').prepend('$('div')')

jQuery是如何修改元素的属性的

jQuery通过API来实现元素属性的读写，并且，他会通过arguments.length（重载）来判断使用者是想读属性还是写属性

$('div').attr('class','red')
//为div增加一个class属性，red

$('div').attr({
    'class':'red',
    'title':'titleName'
})
//为div设置多个属性

$('div').attr('class')
//读取div的class

$('div').removeAttr('class')
//为div元素移除class属性

简述jQuery