Jadual Kandungan
ceshi
Rumah hujung hadapan web tutorial js jquery 插件学习(二)_jquery

jquery 插件学习(二)_jquery

May 16, 2016 pm 05:51 PM
pemalam

创建全局函数只需通过为jquery对象添加属性即可,而创建jquery对象的方法也可以通过为jquery.fn添加属性来实现,实际上jquery.fn对象就是jquery.prototype原型对象的别名,使用别名更方便引用。

demo:

复制代码 代码如下:

jQuery.fn.test = function(){
alert('这是 jquery 对象方法 ');
}

然后,就可以在任何jquery对象中调用该方法了。
复制代码 代码如下:

$(function(){
$('h1').click(function(){
$(this).test();
});
});

由于这里,并没有任何地方匹配dom节点,所以编写全局函数也是可以的(上一节有讲过哦),但是,在使用jquery对象方法时,函数体内的this关键字总是引用当前的jquery对象,因此我们可以对上面的方法进行重写,实现动态提示信息,代码如下:
复制代码 代码如下:

jQuery.fn.test = function(){
alert(this[0].nodeName); //提示当前jquery对象的dom节点名称
}

重点来了,在上面的示例中,可以看到由于jquery选择器返回的是一个数组类型的dom节点集合,this指针就指向当前这个集合,故要显示当前元素的节点名称,就必须在this指针后面指定当前元素的序号。

思考: 如果jquery选择器匹配多个元素,我们该如何准确指定当前元素的对象呢?-----

要解决这个问题,我们不妨在当前jquery对象方法的环境中调用each()方法,通过隐式迭代的方式,让this指针依次饮用每一个匹配的dom元素对象,例如,针对上一个示例做进一步的修改
复制代码 代码如下:

jQuery.fn.test = function(){
this.each(function(){ //遍历匹配的元素,此处的this表示对象集合
alert(this.nodeName); //提示当前jquery对象的dom节点名称(注意这里与上面的变化哦,下标消失了)
});
}

然后,在调用方法时,就不用担心,jquery选择器所匹配的元素有多少了。例如在下面的例子中,当单击不同的元素,会提示当前的节点名称
复制代码 代码如下:

$(function(){
$('body *').click(function(){
$(this).test();
});
});

复制代码 代码如下:

ceshi


dddddddddd

div元素

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam! Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam! Feb 25, 2024 pm 11:57 PM

Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam!

Ralat memuatkan pemalam dalam Illustrator [Tetap] Ralat memuatkan pemalam dalam Illustrator [Tetap] Feb 19, 2024 pm 12:00 PM

Ralat memuatkan pemalam dalam Illustrator [Tetap]

Apakah direktori pemasangan sambungan pemalam Chrome? Apakah direktori pemasangan sambungan pemalam Chrome? Mar 08, 2024 am 08:55 AM

Apakah direktori pemasangan sambungan pemalam Chrome?

Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Mar 13, 2024 pm 04:34 PM

Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini

Adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Adakah PyCharm Community Edition menyokong pemalam yang mencukupi? Feb 20, 2024 pm 04:42 PM

Adakah PyCharm Community Edition menyokong pemalam yang mencukupi?

Bagaimana untuk menambah fungsi pesanan dalam talian pada pemalam WordPress Bagaimana untuk menambah fungsi pesanan dalam talian pada pemalam WordPress Sep 05, 2023 pm 03:42 PM

Bagaimana untuk menambah fungsi pesanan dalam talian pada pemalam WordPress

Bagaimana untuk menambah fungsi program mini WeChat pada pemalam WordPress Bagaimana untuk menambah fungsi program mini WeChat pada pemalam WordPress Sep 06, 2023 am 09:03 AM

Bagaimana untuk menambah fungsi program mini WeChat pada pemalam WordPress

Cara menggunakan pemalam WordPress untuk melaksanakan fungsi main balik video Cara menggunakan pemalam WordPress untuk melaksanakan fungsi main balik video Sep 05, 2023 pm 12:55 PM

Cara menggunakan pemalam WordPress untuk melaksanakan fungsi main balik video

See all articles