封装jQuery
完成以下操作
$xxx.addClass(‘c1’)
$xxx.removeClass(‘c1’)
$xxx.toggleClass(‘c3’)
$xxx.text()
$xxx.text(‘hello’)
$xxx.html()
$xxx.html(‘< b >world< /b >’)
代码如下:
//html
<div class="xxx"></div>
//js 方法调用
var $xxx = $('.xxx')
$xxx.on('click', function(){
console.log($xxx[0])
})
// $xxx.addClass('c1')
// $xxx.removeClass('c1')
// $xxx.toggleClass('c3')
// $xxx.text()
// $xxx.text('hello')
// $xxx.html()
// $xxx.html('<b>world</b>')
// js 定义方法
window.jQuery = function(selector){
var array = []
var elements = document.querySelectorAll(selector)
for(var i=0; i < elements.length; i++){
array.push(elements[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)
}
}
array.removeClass = function(className){
for(var i=0; i<array.length; i++){
array[i].classList.remove(className)
}
}
array.toggleClass = function(className){
for(var i=0; i<array.length; i++){
array[i].classList.toggle(className)
}
}
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
}
}
}
array.html = function(string){
if(string === 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 = string
}
}
}
return array
}
window.$ = window.jQuery
若使用链式调用,每一个方法都要返回array
$xxx.addClass('c1').text('hello')
array.addClass = function(className){
for(var i=0; i<array.length; i++){
array[i].classList.add(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
}
}
若使用find()方法,采用递归方式
//html
<div class="xxx">
<div class="hello"></div>
</div>
//find()
$xxx.find('.hello').addClass('world')
// find方法定义
array.find = function(selector){
var newArray = []
for(var i=0; i<array.length; i++){
var elements = array[i].querySelectorAll(selector)
for(var j=0; j<elements.length; j++){
newArray.push(elements[j])
}
}
return jQuery(newArray)
}
若使用end()方法,使$xxx.find('p').end() === $xxx
成立,需要记录之前的元素
var array = []
if (typeof selectorOrElement === 'string'){
var elements = document.querySelectorAll(selectorOrElement)
for(var i=0; i < elements.length; i++){
array.push(elements[i])
}
} else if(selectorOrElement instanceof Array) {
for(var i=0; i<selectorOrElement.length; i++){
array.push(selectorOrElement[i])
}
array.previousSelection = selectorOrElement.previousSelection
}
// find方法中 newArray.previousSelection = array
array.find = function(selector){
var newArray = []
for(var i=0; i<array.length; i++){
var elements = array[i].querySelectorAll(selector)
for(var j=0; j<elements.length; j++){
newArray.push(elements[j])
}
}
newArray.previousSelection = array
return jQuery(newArray)
}
// end方法 返回之前的元素
array.end = function(){
return array.previousSelection
}
源码:
jquery-demo.js
window.jQuery = function(selectorOrElement){
var array = []
if (typeof selectorOrElement === 'string'){
var elements = document.querySelectorAll(selectorOrElement)
for(var i=0; i < elements.length; i++){
array.push(elements[i])
}
} else if(selectorOrElement instanceof Array) {
for(var i=0; i<selectorOrElement.length; i++){
array.push(selectorOrElement[i])
}
array.previousSelection = selectorOrElement.previousSelection
}
array.on = function(eventType, fn){
for(var i=0; i< array.length; i++){
array[i].addEventListener(eventType, 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(string){
if(string === 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 = string
}
return array
}
}
array.find = function(selector){
var newArray = []
for(var i=0; i<array.length; i++){
var elements = array[i].querySelectorAll(selector)
for(var j=0; j<elements.length; j++){
newArray.push(elements[j])
}
}
newArray.previousSelection = array
return jQuery(newArray)
}
array.end = function(){
return array.previousSelection
}
return array
}
window.$ = window.jQuery
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./jQuery-demo.js"></script>
<style>
.xxx{
background: gray;
margin-bottom: 10px;
height: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="xxx">
<div class="hello"></div>
</div>
<div class="xxx"></div>
<script>
var $xxx = $('.xxx')
$xxx.on('click', function(){
console.log($xxx[0])
})
// $xxx.addClass('c1')
// $xxx.removeClass('c1')
// $xxx.toggleClass('c3')
// $xxx.text()
// $xxx.text('hello')
// $xxx.html()
// $xxx.html('<b>world</b>')
// $xxx.addClass('c1').text('hello')
// $xxx.find('.hello').addClass('world')
// console.log($xxx.find('p').end() === $xxx)
</script>
</body>
</html>