JQuery高级应用

Author：钟小湖
发布时间：September 10, 2020
479views
One comment
6722 words
Categories：前端编程记

# 动画

三种方式显示和隐藏元素

## 默认显示和隐藏方式

show([speed,[easing],[fn]]) ：显示
参数：

- speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
- easing：用来指定切换效果，默认是"swing"，可用参数"linear"
  - swing：动画执行时效果是 先慢，中间快，最后又慢
  - linear：动画执行时速度是匀速的
- fn：在动画完成时执行的函数，每个元素执行一次。

hide([speed,[easing],[fn]]) ：隐藏

toggle([speed],[easing],[fn]) ：切换，显示则隐藏，隐藏则显示

```html
<body>
    <input type="button" value="点击按钮隐藏div" onclick="hideFn()">
    <input type="button" value="点击按钮显示div" onclick="showFn()">
    <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
        div显示和隐藏
    </div>
</body>
```

```javascript
$("#showDiv").show("slow","swing",function(){
    alert("显示了...")
});

$("#showDiv").hide("slow","swing",function(){
    alert("隐藏了...")
});

//自动切换
$("#showDiv").toggle("slow");
```

## 滑动显示和隐藏方式

slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

```javascript
//滑动方式
$("#showDiv").slideDown("slow");
//滑动方式
$("#showDiv").slideToggle("slow");
//滑动方式
$("#showDiv").slideUp("slow");
```

## 淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])

```javascript
//淡入淡出方式
$("#showDiv").fadeIn("slow");
//淡入淡出方式
$("#showDiv").fadeOut("slow");
//淡入淡出方式
$("#showDiv").fadeToggle("slow");
```

# 遍历

## js的遍历方式

for(初始化值;循环结束条件;步长)，jq也可以用。

## jq的遍历方式

jq对象.each(callback)

语法：
jquery对象.each(function(index,element){});

- index：就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象

回调函数返回值：

* true：如果当前function返回为false，则结束循环(break)。
* false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)

$.each(object, [callback])，object为需要遍历的jq对象，回调方法中的参数与each一模一样。

for..of：jquery 3.0 版本之后提供的方式。for(元素对象 of 容器对象)

```html
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
```

```javascript
var citys = $("#city li");
citys.each(function (index, element) {
    alert(index + ": " + $(element).html())
})
//或者
citys.each(function (){
    alert($(this).html())
})

citys.each(function (index, element) {
    if ("上海"=== $(element).html() ){
        return false; //结束循环
    }
    alert(index + ": " + $(element).html())
})
citys.each(function (index, element) {
    if ("上海"=== $(element).html() ){
        return true; //跳过本次循环
    }
    alert(index + ": " + $(element).html())
})
```

```javascript
var citys = $("#city li");
$.each(citys,function (index,city) {
    alert(index + ": " + $(city).html())
})
```

# 事件绑定

## jquery标准的绑定方式

- jq对象.事件方法(回调函数)；
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
- 表单对象.submit(); //让表单提交

```html
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //获取name对象，绑定click事件
            $("#name").click(function () {
                alert("我被点击了...")
            });

//给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
            $("#name").mouseover(function () {
                alert("鼠标来了...")
            });

$("#name").mouseout(function () {
                alert("鼠标走了...")
            });

//简化操作，链式编程
            $("#name").mouseover(function () {
                alert("鼠标来了...")
            }).mouseout(function () {
                alert("鼠标走了...")
            });

alert("我要获得焦点了...")
            $("#name").focus(); //让文本输入框获得焦点
            表单对象.submit(); //让表单提交
        });
    </script>
</head>
<body>
    <input id="name" type="text" value="绑定点击事件">
</body>
</html>
```

## on绑定事件/off解除绑定

- jq对象.on("事件名称",回调函数)
- jq对象.off("事件名称")
- 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                //使用on给按钮绑定单击事件  click
                $("#btn").on("click",function () {
                    alert("我被点击了。。。")
                }) ;
                
                //使用off解除btn按钮的单击事件
                $("#btn2").click(function () {
                    //解除btn按钮的单击事件
                    $("#btn").off("click");
                    
                    //将组件上的所有事件全部解绑
                    $("#btn").off();
                });
            });
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="使用on绑定点击事件">
        <input id="btn2" type="button" value="使用off解绑点击事件">
    </body>
</html>
```

## 事件切换：toggle

- jq对象.toggle(fn1,fn2...)
- 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
- **注意：1.9版本 .toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。**

`<script src="jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>`

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="./js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="./js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                //获取按钮，调用toggle方法
                $("#btn").toggle(function () {
                    //改变div背景色backgroundColor 颜色为 green
                    $("#myDiv").css("backgroundColor","green");
                }, function () {
                    //改变div背景色backgroundColor 颜色为 pink
                    $("#myDiv").css("backgroundColor","pink");
                });
            });
        </script>
    </head>
    <body>
        <input id="btn" type="button" value="事件切换">
        <div id="myDiv" style="width:300px;height:300px;background:pink">
            点击按钮变成绿色，再次点击红色
        </div>
    </body>
</html>
```

# 案例

## 广告自动显示和隐藏

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>广告自动显示和隐藏</title>
        <script src="../js/jquery-3.3.1.min.js"></script>
        <style>
            #content {
                width: 100%;
                height: 500px;
                background: #999
            }
        </style>
        <script>
            $(function () {
                //1.5秒显示广告
                setTimeout(fade, 1500)
                //3.5秒后关闭广告
                setTimeout(fade, 5000)
            })

function fade() {
                $("#ad").fadeToggle("slow");
            }
        </script>
    </head>
    <body>
        
        <div>
            
            <div id="ad" style="display: none;">
                <img style="width:100%" src="./img/adv.jpg"/>
            </div>
            
            <div id="content">
                正文部分
            </div>
        </div>
    </body>
</html>
```

# 插件

增强JQuery的功能

如何定义插件：（看下面两个案例）

$.fn.extend(object)

增强通过Jquery获取的对象的功能  $("#id")

![](https://cdn.xn2001.com/img/2020/20200910150711.gif)

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            //定义对象插件
            $.fn.extend({
                check: function () {
                    this.prop("checked", true);
                },
                uncheck: function () {
                    this.prop("checked", false);
                }
            });
            //使用对象插件
            $(function () {
                $("#btn-check").click(function () {
                    $("input[type='checkbox']").check();
                });
                $("#btn-uncheck").click(function () {
                    $("input[type='checkbox']").uncheck();
                })
            })
        </script>
    </head>
    <body>
        <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
        <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
        <br/>
        <input type="checkbox" value="football">足球
        <input type="checkbox" value="basketball">篮球
        <input type="checkbox" value="volleyball">排球
    </body>
</html>
```

$.extend(object)

增强JQeury对象自身的功能  $ 或者 jQuery

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>全局插件</title>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            // 对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
            $.extend({
                max: function (a, b) {
                    return a >= b ? a : b;
                },
                min: function (a, b) {
                    return a <= b ? a : b;
                }
            })

// 使用这两个方法
            alert($.max(10, 8));
            alert($.min(5, 8));
        </script>
    </head>
    <body>

</body>
</html>
```<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：乐心湖's Blog</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://www.xn2001.com/archives/583.html">https://www.xn2001.com/archives/583.html</a></p><p class="content-copyright">声明：博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener" one-link-mark="yes">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p></blockquote>

腾讯云社区邀请各位技术博主加入，福利多多噢！

Last modification：September 10th, 2020 at 03:46 pm

如果觉得我的文章对你有用，请随意赞赏

One comment

uilky
September 11th, 2020 at 01:45 pm

专业空包代发网，就选www.5adanhw.com

Reply

JQuery高级应用

钟小湖 • 2020 年 09 月 10 日

# 动画

三种方式显示和隐藏元素

## 默认显示和隐藏方式

show([speed,[easing],[fn]]) ：显示
参数：

hide([speed,[easing],[fn]]) ：隐藏

toggle([speed],[easing],[fn]) ：切换，显示则隐藏，隐藏则显示

<div id="showDiv" style="width:300px;height:300px;background:pink">
        div显示和隐藏
    </div>
</body>
```

```javascript
$("#showDiv").show("slow","swing",function(){
    alert("显示了...")
});

$("#showDiv").hide("slow","swing",function(){
    alert("隐藏了...")
});

//自动切换
$("#showDiv").toggle("slow");
```

## 滑动显示和隐藏方式

slideDown([speed],[easing],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])

```javascript
//滑动方式
$("#showDiv").slideDown("slow");
//滑动方式
$("#showDiv").slideToggle("slow");
//滑动方式
$("#showDiv").slideUp("slow");
```

## 淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed,[easing],[fn]])

```javascript
//淡入淡出方式
$("#showDiv").fadeIn("slow");
//淡入淡出方式
$("#showDiv").fadeOut("slow");
//淡入淡出方式
$("#showDiv").fadeToggle("slow");
```

# 遍历

## js的遍历方式

for(初始化值;循环结束条件;步长)，jq也可以用。

## jq的遍历方式

jq对象.each(callback)

语法：
jquery对象.each(function(index,element){});

- index：就是元素在集合中的索引
- element：就是集合中的每一个元素对象
- this：集合中的每一个元素对象

回调函数返回值：

* true：如果当前function返回为false，则结束循环(break)。
* false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)

$.each(object, [callback])，object为需要遍历的jq对象，回调方法中的参数与each一模一样。

for..of：jquery 3.0 版本之后提供的方式。for(元素对象 of 容器对象)

```html
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
```

```javascript
var citys = $("#city li");
citys.each(function (index, element) {
    alert(index + ": " + $(element).html())
})
//或者
citys.each(function (){
    alert($(this).html())
})

```javascript
var citys = $("#city li");
$.each(citys,function (index,city) {
    alert(index + ": " + $(city).html())
})
```

# 事件绑定

## jquery标准的绑定方式

- jq对象.事件方法(回调函数)；
- 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
- 表单对象.submit(); //让表单提交

//给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
            $("#name").mouseover(function () {
                alert("鼠标来了...")
            });

$("#name").mouseout(function () {
                alert("鼠标走了...")
            });

## on绑定事件/off解除绑定

- jq对象.on("事件名称",回调函数)
- jq对象.off("事件名称")
- 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

## 事件切换：toggle

`<script src="jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>`

# 案例

## 广告自动显示和隐藏

# 插件

增强JQuery的功能

如何定义插件：（看下面两个案例）

$.fn.extend(object)

增强通过Jquery获取的对象的功能  $("#id")

![](https://cdn.xn2001.com/img/2020/20200910150711.gif)

$.extend(object)

增强JQeury对象自身的功能  $ 或者 jQuery

// 使用这两个方法
            alert($.max(10, 8));
            alert($.min(5, 8));
        </script>
    </head>
    <body>

One comment

Leave a Comment Cancel reply

JQuery高级应用