jquery源码阅读笔记3:从产品角度看jquery API设计

蛰伏已久 蛰伏已久 2018-05-15

jquery之所以应用如此广泛,与其良好的用户体验是分不开的,一个事情要么用户麻烦,要么开发者麻烦,而jquery作者选择将麻烦交给自己,今天我们来汇总一下jquery API到底好在哪里。

1.无new关键词实例化

使用jquery很简单,直接美元符号+选择器即可,无需new关键词

$("p").hide()


2.丰富的选择器

我们先来看看原声js的DOM选择,通过id或者class选择dom,是两个不同的API,而jquery全都通过$("selector")

document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()

jquery选择dom非常的简单、丰富、灵活

$("#id")
$(".classname")
$("p")
$("#id,.classname")


3.大量的方法重载

比如获取设置text、value、css、属性等,都通过同一个API,根据参数不同来实现get和set功能

$("#test").text()   //获取text
$("#test").text("eeeee") //设置text
$('#id').attr('title'); // 获取 title 属性的值
$('#id').attr('title','jQuery');// 设置 title 属性的值
$('#id').css('width');// 获取css值
$('#id').css('width','200px');// 设置css值


4.链式调用与回溯

jquery的链式调用,让我们使用起来更加有行云流水的感觉,一路操作下去,很爽!这一点的实现其实很简单,只需要在要实现链式调用的方法的返回结果里,返回 this ,就能够实现链式调用了。

当然,除了链式调用,jQuery 甚至还允许回溯

// 通过 end() 方法终止在当前链的最新过滤操作,返回上一个对象集合
$('div').eq(0).show().end().eq(1).hide();




分享到

点赞(0)