jQuery设计思想

135 阅读2分钟

获取元素

jQuery封装了原生的DOM选择器。

css选择器

可以使用css选择器

  1. $('#idName') //id选择器

  2. $('.className') //class选择器

  3. $('input[type=submit]') //属性选择器

jQuery特有表达式

也可以使用jQuery特有的

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

  2. $('tr:odd') //选择表格的奇数行

  3. $('#myForm:input') // 选择表单中的input元素

  4. $('div:visible') //选择可见的div元素

  5. $('div:gt(2)') // 选择所有的div元素,除了前三个

  6. $('div:animated') // 选择当前处于动画状态的div元素

改变结果集

jquery提供了各种强大的过滤器方法

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

  2. $('div').not('.myClass'); //选择class不等于myClass的div元素

  3. $('div').filter('.myClass'); //选择class等于myClass的div元素

  4. $('div').first(); //选择第1个div元素

  5. $('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库~