写在前面
上一篇博客已经写出了jQuery的所有设计模式，jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。它选中一个网页元素，返回的不是元素本身，而是返回可以操作它的api
命名规则
- elDiv或者div表示dom对象，普通对象
- $div，jQuery产生的api对象
使用原型来优化代码
window.$ = window.jQuery = function(selectorOrArray) {
let elements;
if (typeof selectorOrArray === "string") {
if (selectorOrArray[0] === "<") {
createElement(selectorOrArray);
} else {
elements = document.querySelectorAll(selectorOrArray);
}
} else if (selectorOrArray instanceof Array) {
elements = selectorOrArray;
}
function createElement(string) {
const container = document.createElement("template");
container.innerHTML = string.trim();
return container.content.firstChild;
}
const api = Object.create(jQuery.prototype);
api.oldApi = selectorOrArray.oldApi;
api.elements = elements;
return api;
};
jQuery.prototype = {
constructor: jQuery,
addClass(className) {
for (let i = 0; i < this.elements.length; i++) {
this.elements[i].classList.add(className);
}
return this;
},
find(selector) {
let array = [];
for (let i = 0; i < this.elements.length; i++) {
array = array.concat(
Array.from(this.elements[i].querySelectorAll(selector))
);
}
array.oldApi = this;
return jQuery(array);
},
end() {
return this.oldApi;
},
each(fn) {
for (let i = 0; i < this.elements.length; i++) {
fn.call(null, this.elements[i], i);
}
return this;
},
parent() {
const array = [];
this.each(node => {
if (array.indexOf(node.parentNode) === -1) {
array.push(node.parentNode);
}
});
array.oldApi = this;
return jQuery(array);
},
children() {
const array = [];
this.each(node => {
array.push(...node.children);
});
array.oldApi = this;
return jQuery(array);
},
printf() {
console.log(this.elements);
}
};
会使prototype里的elements找不到，把elements放到api上，在prototype里的elements前面加上this即可
具体语法
- 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。选择表达式可以是CSS选择器，也可以是jQuery特有的表达式。各种强大的过滤器，对结果集进行筛选，缩小选择结果
$('#xxx').find('.red') //查找 #xxx 里的 .red 元素
$('#xxx').parent() //获取爸爸
$('#xxx').children() //获取儿子
$('#xxx').siblings() //获取兄弟
$('#xxx').index() //获取排行老几（从0开始）
$('#xxx').next() //获取弟弟
$('#xxx').prev() //获取哥哥
$('#xxx').each(fn) //遍历并对每个元素执行fn
$('a:first') //选择网页中第一个a元素
 
$('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元素
- 元素的操作：取值和赋值，会取出所有元素
.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
- 元素的操作：移动
这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同
.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
- 元素的操作：复制、删除和创建
- 复制元素使用.clone()。
- 删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
- 清空元素内容（但是不删除该元素）使用.empty()。
$('<p>Hello</p>');//待插入
$('<li class="new">new list item</li>');//待插入
$('ul').append('<li>list item</li>');
