本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于jQuery的用法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
代码部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <script>
window.jQuery= function (nodeOrSelector){
let nodes={}
let node1=[]
if (typeof nodeOrSelector=== 'string' ){
let temp=document.querySelectorAll(nodeOrSelector)
for (let i=0;i<temp.length;i++){
node1[i]=temp[i]
}
} else if (nodeOrSelector instanceof Node){
node1={
0:nodeOrSelector,
length:1
}
}
nodes.addClass= function (classes){
classes.forEach(value => {
for (let i=0;i<node1.length;i++){
node1[i].classList.add(value)
}
})
}
nodes.setText= function (text){
for (let i=0;i<node1.length;i++){
node1[i].textContent=text
}
}
return nodes
}
window.$=jQuery
var $p =$( 'p' )
$p .addClass([ 'red' ])
$p .setText( 'hi' )
</script>
|
思路
首先声明函数jQuery()并在函数中声明一个封装了两个函数的对象,以实现给元素加class和添加文本的功能;
其次在函数中判断所传参数是否为字符串还是节点;
接着编写addClass与setText方法;
最后返回对象nodes,可以调用对象中的方法,大功告成。
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的jQuery视频教程栏目!
以上就是jQuery的用法介绍(代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
angularjs的ng-bind-html指令详解
javascript就是js吗
理解javascript之async/await的新语法
javascript的基本结构是什么
javascript的2种变量范围有什么不同
javascript是什么类型的语言
javascript json字符串如何转换成对象
同时去掉字符串左边和右边空格的函数是什么?
一文谈谈javascript和ecmascript的关系
js中什么是原型链
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » jQuery的用法介绍(代码)