jQuery的设计模式

简介: jQuery的设计模式

jQuery 如何获取元素

$(document) //选择整个文档对象
  
 $('#myId') //选择ID为myId的网页元素
 $('div.myClass') // 选择class为myClass的div元素
 $('input[name=first]') // 选择name属性等于first的input元素

jQuery 的链式操作是怎样的

所有操作可以连接在一起,以链条的形式写出来,例如:

$('#test').find('.testSon').addClass('.red').addClass('.border')

原理在于每一次返回的都是jQuery对象,所以你可以再次对他进行jQuery的api里面的操作

jQuery 如何添加元素

添加新的 HTML 内容

append() - 在被选元素的结尾插入内容
$("p").append("在被选元素的结尾插入内容");
prepend() - 在被选元素的开头插入内容
$("p").prepend("在被选元素的开头插入内容");

jQuery 如何移动元素

第一种方法是after(),在被选元素之后插入内容

$("img").after("在被选元素之后插入内容");

第二种方法是before(),在被选元素之前插入内容

$("img").before("在被选元素之前插入内容");

jQuery 的取值和赋值

jQuery使用同一个函数,来完成取值和赋值 getter/setter,由参数而定,这就是适配器模式

$('.test').html(); //html()没有参数,表示取出test的值
$('.test').html('我很强'); //有参数'我很强',表示对test赋值

jQuery的复制

直接使用.clone()

jQuery的删除

直接.remove()

清空元素内容

使用.empty()

总结

jQuery用到了哪些设计模式

不用new的构造函数,这个模式没有专门的名字

$支持多种参数,这个模式叫做重载

用闭包隐藏细节,这个模式没有专门的名字

传了就可读可写, getter / setter

.fn是.fn是.fn.prototype的别名,这叫别名

jQuery针对不同浏览器使用不同代码,这叫适配器

设计模式是啥

我代码写的也太牛了,以后大家应该也会用,

方便沟通,这个就叫适配器模式吧,那个就叫重载!

我应该学习设计模式吗?

设计模式不是用来学的

你看了这些代码

但你并不知道这代码用来解决什么问题

看了白看

设计模式是用来总结的

你只管去写代码,把你的代码尽量写好,不断重写

总结你的代码,把写得好的地方抽象出来

看看符合哪个设计模式

你就可以告诉别人你用到了这几个设计模式

显得你特别高端



目录
相关文章
|
3月前
|
设计模式 存储 JavaScript
|
6月前
|
设计模式 缓存 JavaScript
js常用设计模式
js常用设计模式
58 1
|
设计模式
js-设计模式
设计模式(Design Pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。
|
设计模式 前端开发 JavaScript
JavaScript设计模式——观察者模式
观察者模式(也称发布订阅模式)是JavaScript中非常常见的设计模式,可以实现页面中的消息机制的监听,也是Vue、React主流框架实现的数据响应手段,解决了主体对象之间的解耦,今天来实现一下。
101 1
JavaScript设计模式——观察者模式
|
设计模式 存储 JavaScript
常见 JavaScript 设计模式 — 原来这么简单(三)
常见 JavaScript 设计模式 — 原来这么简单
60 0
|
设计模式 前端开发 JavaScript
常见 JavaScript 设计模式 — 原来这么简单(二)
常见 JavaScript 设计模式 — 原来这么简单
100 0
|
设计模式 JavaScript 前端开发
常见 JavaScript 设计模式 — 原来这么简单(一)
常见 JavaScript 设计模式 — 原来这么简单
114 0
|
JavaScript
jQuery设计思想
jQuery设计思想
63 0
|
设计模式 JavaScript 前端开发
JavaScript设计模式-观察者模式(8)
JavaScript设计模式-观察者模式(8)
|
设计模式 存储 JavaScript
23种JavaScript设计模式
23种JavaScript设计模式
89 0