1 JS 基本知识
1.1 数组属于对象吗?
1.2. 函数属于对象吗?
1.3. 给数组加一个属性行吗?
var array = []
array.xxx = 2
2 DOM API 基本知识
2.1. 如果通过 ID 获取一个元素
document.getElementById(id)
document.querySelector(id)
document.querySelectorAll(id)
2.2. 如何改变一个元素的属性(name、id、class、style)
div.name ='xxx'
div.id = 'yyy'
div.classList.add
div.style.border = '1px solid red'
API(结果)
// 我们的代码
window.jQuery = ...
window.$ = window.jQuery
// 别人的代码
window.jQuery === window.$
var $xxx = $('#xxx') // 得到对应的元素的封装
var div = $xxx[0]
$xxx.on('click', function(){})
$xxx.addClass('c1')
$xxx.removeClass('c2')
$xxx.toggleClass('c3')
$xxx.text() // innerText
$xxx.text('hi') // 就会将 xxx 元素的内容设置为 hi
$xxx.html() // innerHTML
$xxx.html('<b>bold</b>') // 插入 html 到元素中
$xxx.addClass('c4').text('hi').on('click', function(){})
$xxx.on('click', function(){})
$xxx.find('p').end() === $xxx
// 我的代码
window.jQuery = function(selectorOrElements){
var array = []
if(typeof selectorOrElements === 'string'){
var elements = document.querySelectorAll(selectorOrElements)
for(var i=0; i<elements.length; i++){
array.push(elements[i])
}
}else if(selectorOrElements instanceof Array){
for(var i=0; i<selectorOrElements.length; i++){
array.push(selectorOrElements[i])
}
array.previousSelection = selectorOrElements.previousSelection
}
array.on = function(eventType, fn){
for(var i=0; i<array.length; i++){
array[i].addEventListener('click', fn)
}
return array
}
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)
}
return array
}
array.toggleClass = function(className){
for(var i=0; i<array.length; i++){
array[i].classList.toggle(className)
}
return array
}
array.text = function(value){
if(value === undefined){
var result = []
for(var i=0; i<array.length; i++){
result.push(array[i].textContent)
}
return result
}else{
for(var i=0; i<array.length; i++){
array[i].textContent = value
}
return array
}
}
array.html = function(htmlString){
if(htmlString === undefined){
var result = []
for(var i=0; i<array.length; i++){
result.push(array[i].innerHTML)
}
return result
}else{
for(var i=0; i<array.length; i++){
array[i].innerHTML = htmlString
}
return array
}
}
array.find = function(selector){
var array2 = []
for(var i=0; i<array.length; i++){
var elements = array[i].querySelectorAll(selector)
for(var j=0; j<elements.length; j++){
array2.push(elements[j])
}
}
array2.previousSelection = array
var _array = jQuery(array2)
return _array
}
array.end = function(){
return array.previousSelection
}
return array
}
window.$ = window.jQuery