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標(biāo)簽段落</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寨昙，實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的原理
非鏈?zhǔn)秸{(diào)用：
$xxx.addClass("active")
$xxx.html("")
$xxx.on("click",fn)
鏈?zhǔn)秸{(diào)用：
$xxx.addClass("active").html("").on("click",fn)
把非鏈?zhǔn)秸{(diào)用轉(zhuǎn)換成鏈?zhǔn)秸{(diào)用
例子：
把$xxx.addClass("active") 轉(zhuǎn)換成 $xxx
在上面的自制jquery腳本文件里面 獲取的$xxx是一個(gè)數(shù)組 那么只需要在每個(gè)方法里面返回?cái)?shù)組
圖片.png
3巡验，實(shí)現(xiàn) jquery里面的find API
array.find=function(selector){
var array1=[]
for(var i=0;i<array.length;i++){ //循環(huán)每個(gè)父元素
var elements=[]
elements=array[i].querySelectorAll(selector) //得到每個(gè)父元素下的所有選擇器為selector的元素?cái)?shù)組
for(var j=0;j<elements.length;j++){ //遍歷得到的元素?cái)?shù)組
array1.push(elements[j]) //把元素放到array1里面
}
}
/*返回的是一個(gè)數(shù)組*/
return array1
}
注：實(shí)現(xiàn)了jquery的find方法 但是得到的元素標(biāo)簽沒(méi)有 我們自己制作的其他API方法 怎么辦旨椒？
修改上面制作的jquery API方法
兩個(gè)現(xiàn)象：
1，選擇器來(lái)的是一個(gè)字符串
2跨嘉，find得到的元素是一個(gè) 數(shù)組
所以：
圖片.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"){
/*接收的選擇器是一個(gè)字符串*/
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])
}
}
/*返回的是一個(gè)數(shù)組*/
return jquery(array1)
}
return array
}
window.$=window.jquery
5,在find()方法上面獲取 到子元素后 通過(guò)end()獲取子元素的父元素
圖片.png
圖片.png
圖片.png
圖片.png
