提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

19前端学习之JQuery基础(三):jQuery尺寸、位置操作、jQuery事件、jQuery事件对象、Jquery拷贝对象、jQuery 多库共存、jQuery 插件

jQuery事件基础对象学习前端插件 操作
2023-09-27 14:29:29 时间

文章目录

一、jQuery尺寸、位置操作:

jQuery中分别提供了两套快速获取和设置元素尺寸和位置的API，方便易用;

1. jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型

语法用法
width() / height()取得匹配元素宽度/高度的值, 只算width / height
innerWidth() / innerHeight()取得匹配元素宽度/高度的值, 包含padding
outWidth() / outHeight()取得匹配元素宽度/高度的值, 包含padding, border
outWidth(true) / outHeight(true)取得匹配元素宽度/高度的值, 包含padding, border,margin
  • 以上参数为空, 则是获取响应的值;
  • 如果参数为数字, 则是修改为响应的值;
  • 参数不必写单位;

1.2 代码演示;

<body>
    <div></div>
    <script>
        $(function() {
            // 1. width() / height() 获取设置元素 width和height大小 
            console.log($("div").width());
            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
            console.log($("div").outerWidth(true));
        })
    </script>
</body>

注意：有了这套 API 可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合;

2. jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()

2.1 offset() 设置或获取元素偏移:

  • offset()方法设置或返回被选中元素相对于文档的偏移坐标, 跟父级无关;
  • 该方法有2个属性: left, top. offset().top: 用于获取元素距离文档顶部的距离; offset().left: 用于获取元素距离文档左侧的距离;
  • 可以设置元素的偏移: offset({top:10, left:10});

2.2 position() 获取元素偏移:

  • position()方法用于返回被选中元素相对于带有定位的父元素的偏移坐标; 如果父级都没有定位,则以文档为准;
  • 该方法有2个属性: left, top. position().top: 用于获取元素距离父级元素(有定位)顶部的距离; position().left: 用于获取元素距离父级元素(有定位)左侧的距离;
  • 可以设置元素的偏移: position({top:10, left:10});

2.3 scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧:

  • scrollTop()方法设置或返回被选中元素被卷去的头部;
  • 不跟参数是获取, 参数为不带单位的数字则是设置被卷去的头部;

2.3 代码示例:

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回顶部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
            // $(".son").position({
            //     top: 200,
            //     left: 200
            // });
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>

二、jQuery事件：

1. jQuery事件注册:

jQuery 提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

  • 优点: 操作简单，且不用担心事件覆盖等问题;
  • 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法;

1.1 语法:

element.事件(function() {})

$("div").click(function() { 事件处理程序; })

其他事件和原生基本一致;
比如: mouseover、mouseout、focus、change、keydown、keyup、resize、scroll等；

1.2 示例:

<body>
	<div></div>
	<script>
	$("div").click(function() {
		$(this).css("background", "purple");	
	});
	$("div").click(function() {
		$(this).css("background", "skyblue");
	});
	</script>
</body>

2. jQuery事件处理:

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

  • on(): 用于事件绑定，目前最好用的事件绑定方法;
  • off(): 事件解绑;
  • trigger() / triggerHandler(): 事件触发;

2.1 事件处理on()绑定事件:

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

2.1.1 语法:

on()方法优势1:
可以绑定多个事件, 多个处理事件处理程序

$("div").on({
	mouseover: function() {},
	mouseout: function() {},
	click: function() {}
})

如果事件处理程序相同

$("div").on("mouseover mouseout", function() {
	$(this).toggleClass("current");
});

on()方法优势2:
可以事件委派操作. 事件委派: 把原来加给子元素的事件绑定到父元素身上, 就是把事件委派给父元素;

$("ul").on("click", "li", function() {
	alert("hello world");
});

在此之前有bind(), live(), delegate()等方法来处理事件绑定或者委托, 最新版本用on取代了他们;

on()方法优势3:
动态创建的元素, click()没有办法绑定事件, on()可以给动态生成的元素绑定事件

$("div").on("click", "p", function() {
	alert("给动态创建的元素添加事件...");
});

$("div").append($("<p>我是动态创建的</p>"))

示例

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol></ol>

    <script>
        $(function() {
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
  
            // (2) on可以实现事件委托（委派）
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });

            // (3) on可以给未来动态创建的元素绑定事件
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

2.1.2 发布微博案例:

在这里插入图片描述
需求:

  • 点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中;
  • 点击的删除按钮，可以删除当前的微博留言;
    实现
<head>
    <title>微博发布</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        ul {
            width: 450px;
            padding-left: 80px;
        }
        ul li {
            line-height: 20px;
            border-bottom: 1px solid #ccc;
        }
        ul li a{
            float: right;
        }
    </style>
    <script src="./jquery-3.5.0.js"></script>
    <script>
        $(function() {
            // 1. 点击发布按钮, 动态创建一了小li, 放入文本矿中的内容和删除按钮， 并且添加到ul 中
            $(".btn").on("click", function() {
                var li = $("<li></li>");
                li.html($(".text").val() +  "<a href='javascript:;'> 删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })

            // 2. 点击删除按钮, 可以删除当前的li
            // on可以给动态创建的元素绑定事件
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })
        })
    </script>
</head>
<body>
    <div class="box" id="微博">
        <span>微博发布</span>
        <textarea name="" id="" class="text" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul></ul>
    </div>
    
</body>

2.2 事件处理off()解绑事件:

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程称为事件解绑. jQuery 提供 了多种事件解绑方法:die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里重点 off();

2.2.1 语法:

off()方法可以移除通过on()方法添加的事件处理程序.

$("p").off();	// 解绑p元素所有事件处理程序
$("p").off("click");	// 解绑p元素上的点击事件
$("ul").off("click", "li");	// 接触事件委托

如果想要事件只触发一次, 后面不再触发, 可以使用on()来绑定事件;

2.2.2 演示代码:

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是一个P标签</p>
	<script>
        $(function() {
  			// 事件绑定
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
  
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
  
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</body>

2.3 事件处理 trigger() 自动触发事件

有些时候，在某些特定的条件下，某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致. 可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发. 由此 jQuery 为提供了两个自动触发事件 trigger() 和 triggerHandler()

2.3.1 语法:

第一种: trigger()

element.click()	// 第一种简写形式

element.trigger("type");	// 第二种自动触发模式

第二种: triggerHandler

element.triggerHandler(type);	// 第三种自动触发模式

triggerHandler模式不会触发元素的默认行为, 这是与前两者的区别;

2.3.2 演示代码:

<body>
    <div></div>
    <input type="text">
      
    <script>
    $(function() {
      // 绑定事件
      $("div").on("click", function() {
        alert(11);
      });

      // 自动触发事件
      // 1. 元素.事件()
      // $("div").click();会触发元素的默认行为
      
      // 2. 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
      
      // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });
      // 一个会获取焦点，一个不会
      $("div").triggerHandler("click");
      // $("input").triggerHandler("focus");
    });
    </script>
</body>

3.jQuery事件对象:

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生;

3.1 语法:

element.on(events, [selector], function(event) {})

阻止默认行为: event.preventDefault() 或者 return false;
阻止冒泡: event.stopPropagation()

3.2 演示:

<body>
    <div></div>

	<script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event;

4. Jquery拷贝对象:

jQuery中分别提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下

4.1 语法:

$.extend([deep], target, object1 [, object])
  • deep: 如果设为true为深拷贝, 默认为false, 浅拷贝
  • target: 要拷贝的目标对象;
  • object[N]: 待拷贝的对象;

浅拷贝目标对象引用的被拷贝的对象地址, 修改目标对象会影响被拷贝对象;
深拷贝, 前面加true, 完全克隆, 修改目标对象不会影响被拷贝对象;

4.2 演示代码

 <script>
   $(function() {
	// 1.合并数据
       var targetObj = {};
       var obj = {
           id: 1,
           name: "andy"
       };
       // $.extend(target, obj);
       $.extend(targetObj, obj);
       console.log(targetObj);

	// 2. 会覆盖 targetObj 里面原来的数据
       var targetObj = {
           id: 0
       };
       var obj = {
           id: 1,
           name: "andy",
           msg: {
			age: 18
		}
       };
       // $.extend(target, obj);
       $.extend(targetObj, obj);
       console.log(targetObj); 
    })
 </script>

5. jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存;

5.1 语法:

jQuery解决方案:

  • 把里面的$符号统一改为jQuery, 如: jQuery(“div”)
  • jQuery变量规定新的名称: $.noConflict() var xx = $.noConflict();

5.2 演示:

<script>
	$(function() {
  		// 让jquery 释放对$ 控制权 让用自己决定
  		var suibian = jQuery.noConflict();
  		console.log(suibian("span"));
	})
</script>

6. jQuery 插件

​ jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成. 这些插件也是依赖于jQuery来完成的，所以必须要先引入;
jQuery文件，因此也称为 jQuery 插件;
jQuery 插件常用的网站：

jQuery 插件使用步骤：

  • 引入相关文件;(jQuery 文件 和 插件文件）
  • 复制相关html、css、js (调用插件)

6.1 瀑布流插件:

在这里插入图片描述
插件的使用三点：

  • 引入css;
  • 引入JS;
  • 引入html;
  • (有的简单插件只需引入html和js，甚至有的只需引入js)
    代码演示:
    1.引入css.
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
  
<!-- 下面的样式代码为页面布局，可以引入，也可以自己写，自己设计页面样式，一般为直接引入，方便 -->
<style type="text/css">
  #gallery-wrapper {
    position: relative;
    max-width: 75%;
    width: 75%;
    margin: 50px auto;
  }

  img.thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .white-panel {
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px;
  }

  .white-panel h1 {
    font-size: 1em;
  }

  .white-panel h1 a {
    color: #A92733;
  }

  .white-panel:hover {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    margin-top: -5px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
</style>

2.引入js.

<!-- 前两个必须引入 -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<!-- 下面的为启动瀑布流代码，参数可调节属性，具体功能可参考readme.html -->
<script type="text/javascript">
	$(function() {
      $("#gallery-wrapper").pinterest_grid({
          no_columns: 5,
          padding_x: 15,
          padding_y: 10,
          margin_bottom: 50,
          single_column_breakpoint: 700
      });
	});
</script>

3.引入html.

	<!-- html结构一般为事先写好，很难修改结构，但可以修改内容及图片的多少（article标签） -->
	<section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
    </section>

总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）

6.2 图片懒加载:

图片的懒加载：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验;

代码演示:

懒加载只需引入html 和 js操作 即可，此插件不涉及css。

1.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
   	lazyLoadInit({
   		showTime: 1100,
   		onLoadBackEnd: function(i, e) {
     		console.log("onLoadBackEnd:" + i);
   		},
   		onLoadBackStart: function(i, e) {
     		console.log("onLoadBackStart:" + i);
   		}
 	});
</script>

2.引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">

6.3. 全屏滚动插件

全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站; 全屏滚动插件介绍比较详细的网站为：
github: https://github.com/alvarotrigo/fullPage.js
http://www.dowebok.com/demo/2014/77/

代码演示

全屏滚动因为有多重形式，所以不一样的风格html和css也不一样，但是 js 变化不大; 所以下面只演示js的引入，html和css引入根据自己实际;

项目需要使用哪种风格引入对应的HTML和CSS;

<script src="js/jquery.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
  	$(function() {
  		$('#dowebok').fullpage({
    		sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'],
    		navigation: true
  		});
	});
</script>
<body>
    <div id="dowebok">
        <div class="section section1">
            <h3>第一屏里面的内容</h3>
        </div>
        <div class="section section2">
            <h3>第二屏</h3>
        </div>
        <div class="section section3">
            <h3>第三屏</h3>
        </div>
        <div class="section section4">
            <h3>第四屏</h3>
        </div>
    </div>
</body>

注意：实际开发，一般复制文件，然后在文件中进行修改和添加功能;

6.4 bootstrap组件

Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式;

布局，使得 Web 开发更加方便快捷;
**凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件;Bootstrap组件使用非常方便:

  • 引入bootstrap相关css和js ;
  • 去官网复制html

代码演示

引入bootstrap相关css和js
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

去官网复制html的功能模块

    <div class="container">
        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      		Action <span class="caret"></span>
    		</button>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
     	</div>
	</div>

6. 5. bootstrap插件(js)

bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码(有的也可以省略js，用属性实现)

步骤:

  • .引入bootstrap相关css和js;
  • 去官网复制html 3.复制js代码，启动js插件;

代码演示

  • 引入bootstrap相关css和js:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
  • 去官网复制html的功能模块
<!-- 模态框 -->
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            里面就是模态框
        </div>
    </div>
</div>
  • 复制js代码，启动js插件;
<script>
	// 当点击了自己定义的按钮，就弹出模态框
	$(".myBtn").on("click", function() {
		// alert(11);
		$('#btn').modal()
	})
</script>

相关文章