自制jquery-第一篇
2017-07-12 本文已影响0人
从前慢pearl
1，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.xxx{
border: 1px solid black;
height: 50px;background: red
}
.active{
background: yellow;
}
</style>
</head>
<body>
<div class="xxx">div text1<span>this is span1</span></div>
<div class="xxx">div text2<span>this is sapn2</span></div>
<script src="./jquery.js"></script>
<script>
var $xxx=$(".xxx")
var div1=$xxx[0],
div2=$xxx[1]
$xxx.addClass("active").html("<p>自制jquery添加的p标签段落</p>").on("click",function(){
$xxx.removeClass("active")
})
</script>
</body>
</html>
jquery.js脚本文件
window.jquery=function(element){
var array=[]
var element=document.querySelectorAll(element)
for(var i=0;i<element.length;i++){
array.push(element[i])
}
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) {
for(var i=0;i<array.length;i++){
var textarray=[]
textarray.push(array[i].textContent)
}
return textarray
}else{
for(var i=0;i<array.length;i++){
array[i].textContent=value
}
return array
}
}
array.html=function(htmlstring){
if (htmlstring==undefined) {
for(var i=0;i<array.length;i++){
var textarray=[]
textarray.push(array[i].innerHTML)
}
return textarray
}else{
for(var i=0;i<array.length;i++){
array[i].innerHTML=htmlstring
}
return array
}
}
return array
}
window.$=window.jquery
2，实现链式调用的原理
非链式调用：
$xxx.addClass("active")
$xxx.html("")
$xxx.on("click",fn)
链式调用：
$xxx.addClass("active").html("").on("click",fn)
把非链式调用转换成链式调用
例子：
把$xxx.addClass("active") 转换成 $xxx
在上面的自制jquery脚本文件里面 获取的$xxx是一个数组 那么只需要在每个方法里面返回数组
图片.png
3，实现 jquery里面的find API
array.find=function(selector){
var array1=[]
for(var i=0;i<array.length;i++){ //循环每个父元素
var elements=[]
elements=array[i].querySelectorAll(selector) //得到每个父元素下的所有选择器为selector的元素数组
for(var j=0;j<elements.length;j++){ //遍历得到的元素数组
array1.push(elements[j]) //把元素放到array1里面
}
}
/*返回的是一个数组*/
return array1
}
注：实现了jquery的find方法 但是得到的元素标签没有 我们自己制作的其他API方法 怎么办？
修改上面制作的jquery API方法
两个现象：
1，选择器来的是一个字符串
2，find得到的元素是一个 数组
所以：
图片.png
4，find后完整的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.xxx{
border: 1px solid black;
height: 200px;background: red
}
.active{
background: yellow;
}
</style>
</head>
<body>
<div class="xxx">
div text1
<span>this is span1</span>
<p>xxx1</p>
<p>xxx1</p>
<p>xxx1</p>
</div>
<div class="xxx">
div text2
<span>this is sapn2</span>
<p>xxx1</p>
<p>xxx1</p>
</div>
<script src="./jquery.js"></script>
<script>
var $xxx=$(".xxx")
var div1=$xxx[0],
div2=$xxx[1]
$xxx.find("p").on("click",function(){
console.log("click")
})
</script>
</body>
</html>
js文件
window.jquery=function(elementorarray){
var array=[]
if(typeof(elementorarray)=="string"){
/*接收的选择器是一个字符串*/
var element=document.querySelectorAll(elementorarray)
for(var i=0;i<element.length;i++){
array.push(element[i])
}
}else if (elementorarray instanceof Array) {
for(var i=0;i<elementorarray.length;i++){
array.push(elementorarray[i])
}
}
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) {
for(var i=0;i<array.length;i++){
var textarray=[]
textarray.push(array[i].textContent)
}
return textarray
}else{
for(var i=0;i<array.length;i++){
array[i].textContent=value
}
return array
}
}
array.html=function(htmlstring){
if (htmlstring==undefined) {
for(var i=0;i<array.length;i++){
var textarray=[]
textarray.push(array[i].innerHTML)
}
return textarray
}else{
for(var i=0;i<array.length;i++){
array[i].innerHTML=htmlstring
}
return array
}
}
array.find=function(selector){
var array1=[]
for(var i=0;i<array.length;i++){
var elements=[]
elements=array[i].querySelectorAll(selector)
for(var j=0;j<elements.length;j++){
array1.push(elements[j])
}
}
/*返回的是一个数组*/
return jquery(array1)
}
return array
}
window.$=window.jquery
5,在find()方法上面获取 到子元素后 通过end()获取子元素的父元素
图片.png
图片.png
图片.png
图片.png
