jQuery高级

最新推荐文章于 2025-05-08 14:51:55 发布

原创最新推荐文章于 2025-05-08 14:51:55 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨jQuery的高级用法，包括使用三种方式实现元素的动画效果，详细解析jQuery的遍历方法，如`.each()`及`.each`的回调函数控制，同时介绍了事件绑定的不同方法，如`.on()`、`.off()`以及`.toggle()`的使用。此外，还涵盖了案例分析和jQuery插件的相关知识。

jQuery高级

文章目录

jQuery高级

一、动画

三种方式显示和隐藏元素

二、遍历

js的遍历方式
- for(初始化值;循环结束条件;步长)

jq的遍历方式

jq对象.each(callback)

语法：jquery对象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象
回调函数返回值
- true:如果当前function返回为false，则结束循环(break)
- false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

// 方式2：each
/*var cities = $("#city li");
cities.each(function (index, element) {
    // alert(index + ":" + element.innerHTML);
    // alert(index + ":" + $(element).text());

    // 如果是上海则结束循环
    if ("上海" === $(this).text()) {
        // 如果当前function返回为false，则结束循环(false)
        // 如果返回为true，则结束本次循环，继续下次循环(continue)
        return true;
    }
    alert(index + ":" + $(this).html());
});*/

// 方式3：$.each(object, [callback])
var cities = $("#city li");
$.each(cities, function (index, element) {
    alert($(element).text());
});

$.each(object, [callback])
for…of: jquery 3.0 版本之后提供的方式

for(元素对象 of 容器对象)

三、事件绑定

jquery标准的绑定方式
- jq对象.事件方法(回调函数);
on绑定事件/off解除绑定
- jq对象.on("事件名称",回调函数);
- jq对象.off("事件名称");
事件切换：toggle
- jq对象.toggle(fn1,fn2...)：当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…
- 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
  <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>