DOM 库
2017-04-19 本文已影响14人
饥人谷_hak
<a href='http://www.jquery123.com/'>jQuery中文文档</a>
jQuery版本
- 1.x (兼容到IE6)
- 2.x (不兼容IE8以上,包括IE8)
- 3.x (兼容IE10)
IE写法
button.attachEvent('click',fn)
API 设计
let items = $('li')
items.on('click', function(){
console.log('click')
})
items.addClass('hi').removeClass('error')
items.text('你好')
items.get(0)
1. item 没有 siblings 方法
2. 需求要有 xxx.siblings 方法
3. $item = $(item) $item.siblings() 返回 item 的兄弟
1. $item.siblings() 没有 addClass 方法
2. 需求要有 $item.siblings().addClass
3. $item.siblings() 的结果是 $('li') 类似的东西
$item.siblings().removeClass('active').end()
.addClass('active')
1.let items = $('li')
window.$ = function(selector){
return document.querySelectorAll(selector)
}
参数是CSS选择器 , 得到参数返回CSS选择器的全部
items.on('click', function(){})
window.$ = function (selector) {
let array = []
let items = document.querySelectorAll(selector)
for (var i = 0; i < items.length; i++) {
array.push(items[i])
}
array.on = function (eventType, fn) {
for (var i = 0; i < array.length; i++) {
array[i].addEventListener(eventType, fn)
}
}
return array
}
TIM截图20170417145349.png
上图获取了所有的li像是一个数组 , 但实际上并不是 , 这不是一个数组
items.addClass('hi').removeClass('error')
实现items.addClass('hi').removeClass('error') , 把addClass换成items
window.$ = function (selector) {
let array = []
let items = document.querySelectorAll(selector)
for (var i = 0; i < items.length; i++) {
array.push(items[i])
}
array.on = function (eventType, fn) {
for (var i = 0; i < array.length; i++) {
array[i].addEventListener(eventType, fn)
}
}
array.addClass = function(className) { //设置赋值函数 , 参数是className
for(var i = 0;i<array.length;i++){ //遍历
array[i].classList.add(className) //把每个都添加
}
return array 返回 , 让items.addClass === items , 方可做到items.addClass('hi').removeClass('error')
}
return array
}
items.text('你好')
window.$ = function (selector) {
let array = []
let items = document.querySelectorAll(selector)
for (var i = 0; i < items.length; i++) {
array.push(items[i])
}
array.on = function (eventType, fn) {
for (var i = 0; i < array.length; i++) {
array[i].addEventListener(eventType, fn)
}
}
array.addClass = function (className) {
for (var i = 0; i < array.length; i++) {
array[i].classList.add(className)
}
return array
}
array.removeClass = function (className) {
for (var i = 0; i < array.length; i++) {
array[i].classList.remove(className)
}
}
array.text = function (value) { //传参数 , 类型value
if (value !== undefined) { //如果你的值不是undefined
for (var i = 0; i < array.length; i++) { //遍历
array[i].textContent = value //每一个 , textContent = value
}
return array //返回 array
} else { //否则
let result = [] //声明 result = []
for (var i = 0; i < array.length; i++) { //遍历
result.push(array[i].textContent) //push到result
}
return result //返回return
}
}
return array
}
这时候 , 如果是jQuery 它只取第一个值 , 比如多个 你好 的话 , 只取第一个你好
items.get(0)
window.$ = function (selector) {
let array = []
let items = document.querySelectorAll(selector)
for (var i = 0; i < items.length; i++) {
array.push(items[i])
}
array.get = function(index){ //设置get方法 , 传入参数索引
return array[index] //返回array索引
}
return array
}
$item.siblings().removeClass('active')
// $ 接受一个字符串｜｜元素｜｜元素列表
// 返回一个新的数组
// 这个数组有 on addClass 等等的API
window.$ = function (selectorOrNode) {
let array = []
if (typeof selectorOrNode === 'string') { //如果selectorOrNode === 'string'
let items = document.querySelectorAll(selectorOrNode) //获取全部selectorOrNode
for (var i = 0; i < items.length; i++) { //遍历
array.push(items[i]) push 到 数组中
}
} else if (selectorOrNode instanceof Element) { //如果 selectorOrNode的类型是 Element
array.push(selectorOrNode) //就selectorOrNode push 到 数组中
} else if(selectorOrNode instanceof Array){ //如果selectorOrNode类型Array
for(var i = 0;i<selectorOrNode.length;i++) { //遍历
array.push(selectorOrNode[i]) //就把每一个push到array
}
}
array.on = function (eventType, fn) {
for (var i = 0; i < array.length; i++) {
array[i].addEventListener(eventType, fn)
}
}
array.addClass = function (className) {
for (var i = 0; i < array.length; i++) {
array[i].classList.add(className)
}
return array
}
array.removeClass = function (className) {
for (var i = 0; i < array.length; i++) {
array[i].classList.remove(className)
}
}
array.text = function (value) {
if (value !== undefined) {
for (var i = 0; i < array.length; i++) {
array[i].textContent = value
}
return array
} else {
let result = []
for (var i = 0; i < array.length; i++) {
result.push(array[i].textContent)
}
return result
}
}
array.get = function (index) {
return array[index]
}
array.siblings = function () {
let children = array[0].parentNode.children //声明孩子们 获取第1个的父节点的孩子们
let result = [] //声明一个数组空数组result
for(var i=0;i<children.length;i++){ //遍历孩子们
if(children[i] !== array[0]){ // 如果这个children的孩子们和这个数组的第一个不一样
result.push(children[i]) //就把他push到数组
}
}
return $(reusltArray) //返回数组包装$ , 这样就能返还的内容带有API ,实现后续方法
}
return array
}
$item.siblings().removeClass('active').end()
window.$ = function (selectorOrNode) {
let array = []
if (typeof selectorOrNode === 'string') {
let items = document.querySelectorAll(selectorOrNode)
for (var i = 0; i < items.length; i++) {
array.push(items[i])
}
} else if (selectorOrNode instanceof Element) {
array.push(selectorOrNode)
} else if (selectorOrNode instanceof Array) {
for(var i=0;i<selectorOrNode.length;i++){
if(!(selectorOrNode[i] instanceof Element)){ //如果不是Element
continue //就continue
}
array.push(selectorOrNode[i])
}
}
array.on = function (eventType, fn) {
for (var i = 0; i < array.length; i++) {
array[i].addEventListener(eventType, fn)
}
}
array.addClass = function (className) {
for (var i = 0; i < array.length; i++) {
array[i].classList.add(className)
}
return array
}
array.removeClass = function (className) {
for (var i = 0; i < array.length; i++) {
array[i].classList.remove(className)
}
}
array.text = function (value) {
if (value !== undefined) {
for (var i = 0; i < array.length; i++) {
array[i].textContent = value
}
return array
} else {
let result = []
for (var i = 0; i < array.length; i++) {
result.push(array[i].textContent)
}
return result
}
}
array.get = function (index) {
return array[index]
}
array.end = function(){ //end属性
return array.beforeSelection //返回之前的
}
array.siblings = function () {
let children = array[0].parentNode.children
let resultArray = []
for (var i = 0; i < children.length; i++) {
if (children[i] !== array[0]) {
resultArray.push(children[i])
}
}
let items = $(resultArray) //这里需要又返回它的兄弟又返回它
items.beforeSelection = array // 所以 把array存到一个之前属性
return items //并返回
}
return array
}
jQuery 错误写法
$('div').id = 1 //jQuery没有封装id这个东西
$('div').innerHTML = '' // 这也是错误的
全局变量&关键字
window.undefined //这个undefined可以被覆盖
var undefined = 1 //比如这样
//如果是关键字 就不行了
var this = 1 <---这是错误的
