jQuery是目前使用最为广泛的JavaScript函数库,根据【builtwith】统计前100万个站点中的JavaScript使用情况分布jQuery占比40%以上,远超其他的库。
目录:
1 设计模式 1.1 jQuery用到了那些设计模式 2 链式风格 2.1 链式操作 2.2 灵魂拷问!jQuery是构造函数吗? 3 基础操作 3.1 查元素 3.2 增加元素 3.3 删除元素 3.4 改写元素
1 设计模式
1.1 jQuery用到了那些设计模式
不用new也可以构造函数,这个设计模式没有专门的名字
$支持多种参数,这种设计模式通常叫做重载
用闭包隐藏细节,这种设计模式也没有专门的名词
$div.text()既可以是读也可以是写,getter这种设计模式叫做setter
$.fn是$.prototype的别名,这就叫做别名
jQuery针对不同的浏览器使用不同的代码,这叫做适配器
2 链式风格
也叫jQuery风格
- window.jQuery()是我们提供的全局函数
特殊函数jQuery
jQuery(选择器)用于获取对应的元素,但是它不会返回这些元素。相反它返回的是一个对象,称之为jQuery构造出来的对象(API),这个对象可以操作先相对应的元素。
2.1 链式操作
链式操作是在对象的方法中通过最后返回自身对象(return this),返回的对象就可以继续调用它里面的方法。那么,简单实现一下:
var Obj={
num: 1,
fn_a: function(){
this.num++;
return this;
},
fn_b:function(pram){
this.num=this.num*pram;
return this;
},
}
Obj.fn_a().fn_b(5);
console.log(Obj.num);//输出10
上面代码Obj.fn_a().fn_b(5);可以分解为:
//Obj.fn_a().fn_b(5);
var a=Obj.fn_a();
a=a.fn_b(5);
console.log(a.num);//输出10
由于所有对象都会继承其原型对象的属性和方法,所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用,这样就可以对那些方法进行链式调用了。 那么jq是如何实现链式写法的呢?介绍下jq是如何实现链式写法的,例如:
jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context, rootjQuery);
},
jQuery.fn = jQuery.prototype = {}
jQuery.fn.init.prototype = jQuery.fn;
可以看出jquery中return了一个实例,init函数里进行了处理初始化操作,比如选择器,拼接字符串等等,最后再将jq的prototype 赋值给init方法的prototype。
注意!链式操作引用于《javascript 链式写法,如何实现js方法的链式调用》
2.2 灵魂拷问!jQuery是构造函数吗?
- 是
因为jQuery函数确实构造出来了一个对象。
- 不是
因为不需要写new jQery()就能构造一个对象,之前所理解的构造函数都需要结合new才行。
- 结论
jQuery是一个不要加new的构造函数,jQuery不是常规意义上的构造函数,这是因为jQuery用了一些技巧。
3 基础操作
3.1 查元素
jQuery('#xxx') //返回值并不是元素,而是一个API对象
jQuery('#xxx').find('.red') //查找#xxx里的。red元素
jQuery('#xxx').parent() //获取爸爸
jQuery('#xxx').children() //获取儿子
jQuery('#xxx').sibligs() //获取兄弟
jQuery('#xxx').index() //获取排行第几个(从下标0开始)
jQuery('#xxx').next() //获取弟弟
jQuery('#xxx').prev() //获取哥哥
jQuery('.erd').each(fn) //遍历并对每个元素执行fn
3.2 增加元素
window.jQurey = window.$
const $div = $('<div>1</div>')
$div.appendTo(document.body)
这里我们先把“jQuery”变成了“$”这样写起来方便一点,增加元素就是代码块的第二行和第三行。
3.3 删除元素
$div.remove()
$div.empty()
3.4 改写元素
iv.text(?) //读写文本内容,括号里面可以传参数。括号里面传了参数就是写文本,没有传参数就是读文本。
$div.html(?) //读写HTML内容
$div.attr('title',?) //读写属性
$div.css({color:"red"}) //读写style,jQuery把读style的的API命名为css,css是用来操作内联的style
$div.addClass('blue')
$div.on('click',fn)
$div.off('click',fn)
注意!在操作$div的大部分时候是对应了多个div元素。,一定要默认div是一个数组然后遍历它。