获取元素
jQuery封装了原生的DOM选择器。
css选择器
可以使用css选择器
-
$('#idName') //id选择器
-
$('.className') //class选择器
-
$('input[type=submit]') //属性选择器
jQuery特有表达式
也可以使用jQuery特有的
-
$('a:first') //选择网页中第一个a元素
-
$('tr:odd') //选择表格的奇数行
-
$('#myForm:input') // 选择表单中的input元素
-
$('div:visible') //选择可见的div元素
-
$('div:gt(2)') // 选择所有的div元素,除了前三个
-
$('div:animated') // 选择当前处于动画状态的div元素
改变结果集
jquery提供了各种强大的过滤器方法
-
$('div').has('p'); // 选择包含p元素的div元素
-
$('div').not('.myClass'); //选择class不等于myClass的div元素
-
$('div').filter('.myClass'); //选择class等于myClass的div元素
-
$('div').first(); //选择第1个div元素
-
$('div').eq(5); //选择第6个div元素
链式调用
选中元素之后可以通过链式调用对元素进行一系列的操作。
链式操作的通过jQuery中每个函数执行完成之后都会返回原来的jquery对象,以便于使用jquery对象原型上的方法对元素进行反复操作。
$('div')
.find('p')
.addClass('red')
.end()
.addClass('green')
还可以使用end()方法将jquery操作的元素回退一步。
创建元素
在jQuery调用方法时会先通过传入参数的个数,类型等方式去判断用户需要什么操作,模拟面向对象中的重载功能。
jquery支持用户直接传入html文本来创建元素,根据判断传入字符串的一个字符是否为'<'来判断用户是否需要创建元素。 jquery创建元素代码示例
if (typeof selectorOrArrayOrTemplateOrDom === 'string' && selectorOrArrayOrTemplateOrDom.trim()[0] === "<") {
const template = document.createElement('template');
template.innerHTML = selectorOrArrayOrTemplateOrDom.trim();
elements = [template.content.firstChild] //创建的的元素
}
移动元素
.insertAfter()和.after():在现存元素的外部,从后面插入元素
.insertBefore()和.before():在现存元素的外部,从前面插入元素
.appendTo()和.append():在现存元素的内部,从后面插入元素
.prependTo()和.prepend():在现存元素的内部,从前面插入元素
修改元素的属性
判断用户是否传入参数来确定用户是要获取属性还是修改属性,jQuery就用这种方法将getAttribute()和setAttribute()封装起来。提供了一个统一的.attr()方法来操作元素属性。
总结
jQuery中的精髓在于:
链式调用,每次都会返回操作元素的API,这些方法写在了jQuery的原型上
令人费解的,确又非常方便的创建方式。这种创建方式其实就是使用到了设计模式中的工厂模式,不需要使用new就可创建一个对象,就像调用一个普通的方法。
以及一系列非常方便的操作DOM的方法
这里还有一个自己写的小型jquery库~