<a >jQuery中文文檔</a>
jQuery版本
- 1.x (兼容到IE6)
- 2.x (不兼容IE8以上,包括IE8)
- 3.x (兼容IE10)
IE寫法
button.attachEvent('click',fn)
API 設(shè)計(jì)
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() 的結(jié)果是 $('li') 類似的東西
$item.siblings().removeClass('active').end()
.addClass('active')
1.let items = $('li')
window.$ = function(selector){
return document.querySelectorAll(selector)
}
參數(shù)是CSS選擇器 , 得到參數(shù)返回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像是一個(gè)數(shù)組 , 但實(shí)際上并不是 , 這不是一個(gè)數(shù)組
items.addClass('hi').removeClass('error')
實(shí)現(xiàn)items.addClass('hi').removeClass('error') , 把a(bǔ)ddClass換成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) { //設(shè)置賦值函數(shù) , 參數(shù)是className
for(var i = 0;i<array.length;i++){ //遍歷
array[i].classList.add(className) //把每個(gè)都添加
}
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) { //傳參數(shù) , 類型value
if (value !== undefined) { //如果你的值不是undefined
for (var i = 0; i < array.length; i++) { //遍歷
array[i].textContent = value //每一個(gè) , 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
}
這時(shí)候 , 如果是jQuery 它只取第一個(gè)值 , 比如多個(gè) 你好 的話 , 只取第一個(gè)你好
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){ //設(shè)置get方法 , 傳入?yún)?shù)索引
return array[index] //返回array索引
}
return array
}
$item.siblings().removeClass('active')
// $ 接受一個(gè)字符串｜｜元素｜｜元素列表
// 返回一個(gè)新的數(shù)組
// 這個(gè)數(shù)組有 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 到 數(shù)組中
}
} else if (selectorOrNode instanceof Element) { //如果 selectorOrNode的類型是 Element
array.push(selectorOrNode) //就selectorOrNode push 到 數(shù)組中
} else if(selectorOrNode instanceof Array){ //如果selectorOrNode類型Array
for(var i = 0;i<selectorOrNode.length;i++) { //遍歷
array.push(selectorOrNode[i]) //就把每一個(gè)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個(gè)的父節(jié)點(diǎn)的孩子們
let result = [] //聲明一個(gè)數(shù)組空數(shù)組result
for(var i=0;i<children.length;i++){ //遍歷孩子們
if(children[i] !== array[0]){ // 如果這個(gè)children的孩子們和這個(gè)數(shù)組的第一個(gè)不一樣
result.push(children[i]) //就把他push到數(shù)組
}
}
return $(reusltArray) //返回?cái)?shù)組包裝$ , 這樣就能返還的內(nèi)容帶有API ,實(shí)現(xiàn)后續(xù)方法
}
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 // 所以 把a(bǔ)rray存到一個(gè)之前屬性
return items //并返回
}
return array
}
jQuery 錯(cuò)誤寫法
$('div').id = 1 //jQuery沒有封裝id這個(gè)東西
$('div').innerHTML = '' // 這也是錯(cuò)誤的
全局變量&關(guān)鍵字
window.undefined //這個(gè)undefined可以被覆蓋
var undefined = 1 //比如這樣
//如果是關(guān)鍵字 就不行了
var this = 1 <---這是錯(cuò)誤的
