前端与移动开发----jQuery----JQ方式获取元素大小和位置，JQ方式注册事件，JQ事件对象参数(大量案例)

其他 2021-01-24 02:32:20 阅读次数: 0

JQuery

1.JQ设置缓存数据

1.1 程序中保存数据的方式

  • 变量,数组,对象,本地存储,属性,自定义属性…

1.2JQ通过data方法设置/获取数据

  • 语法

    $对象.data('键', '值');    //设置
$对象.data('键');  	 // 获取

代码演示:
$('div').data('myage', 18);
console.log($('div').data('myage'));

  • 与attr区别

    1.attr是将值通过自定义属性的方式将值保存到标签上
2.data是将值保存到标签上,但是在标签上无法体现

2.JQ方式获取元素大小和位置

1.1 JQ获取元素大小

  • 获取元素大小

    • $对象.width()

      语法:
$对象.width();   //获取当前元素大小,只包含内容区域大小

代码演示:
console.log($('div').width());

    • $对象.height()

      语法:
$对象.height();  //获取当前元素高度,只包含内容区域高度

代码演示:
console.log($('div').height());

    • $对象.innerWidth()

      语法:
$对象.innerWidth();    //获取当前元素宽度 = 内容区域大小 + 内边距

代码演示:
console.log($('div').innerWidth());

    • $对象.innerHeight()

      语法:
$对象.innerHeight();  //获取当前元素高度 = 内容区域大小 + 内边距

代码演示:
console.log($('div').innerHeight());

    • $对象.outerWidth([booloean])

      语法:
$对象.outerWidth();   //获取当前元素宽度 = 内容区域大小 + 内边距 +边框

代码演示:
console.log($('div').outerWidth(false));

//注意,默认是false,可以不用写

    • $对象.outerHeight([boolean])

      语法:
$对象.outerHeight(true);  //获取当前元素高度= 内容区域大小 + 内边距 +边框 + 外边距

代码演示:
console.log($('div').outerHeight(true));

  • 设置元素大小

    • $对象.width(值) $对象.height(值)

      扫描二维码关注公众号，回复： 12224993 查看本文章 
      代码演示:
$('div').width('200').height('200');

//注意:
1. 在设置值的时候可以带单位px也可以不用带单位px

    • $对象.innerWidth(值) $对象.innerHeight(值)

      代码演示:
$('div').innerWidth('200').innerHeight('200');

//注意:
1. 此时设置的值中已经包含内边距,内边距默认为0,如果在css中给当前元素设置内边距,则元素大内容区域大小会发生改变

    • $对象.outerWidth(值) $对象.outerHeight(值)

      代码演示:
$('div').outerWidth('200', true).outerHeight('200', true);

//注意
1. 此时设置的值是包含外边距的,如果通过css给当前元素设置外边距,则元素内容区域大小会发生改变

1.2JQ获取元素位置

  • offset()

    语法:
$(对象).offset(); 

//总结:
1. $对象.offset() 返回的是一个对象
2. $对象.offset() 返回对象中包含 left 属性 和 top属性
3. 获取当前元素的位置是相对整个页面,不是相对父元素        
4. 类似于固定定位(相对视口或者文档)

//代码演示:
$('.one').offset().left
$('.one').offset().top

  • position()

    语法:
$(对象).position(); 

//总结:
1. $对象.position() 返回的是一个对象
2. $对象.position() 返回对象中包含 left 属性和 top属性
3. 获取当前元素的位置,如果当前父元素没有定位,相对整个页面,如果父元素有定位,参照父元素 
4. 类似于绝对定位

//代码演示:
$('.one').position().left
$('.one').position().top

  • scrollTop()

    语法:
$(对象).scrollTop();
$(对象).scrollleft();
//总结:
1. 获取当前元素(内容)滚动出去的距离
2. 如果希望在程序中获取当前距离大小,需要在scroll事件中获取

//代码演示:
$('.box').scroll(function(){
      
      
	console.log($(this).scrollTop());
});

1.3 案例-返回顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
         * {
     
     
             margin: 0;
             padding: 0;
         }
         body {
     
     
             height: 3000px;
         }
        .btn {
     
     
            width: 200px;
            height: 80px;
            background-color: orange;
            text-align: center;
            line-height: 80px;
            cursor: pointer;
            position: fixed;
            right: 20px;
            bottom: 30px;
            display: none;
        }
    </style>
</head>
<body>
     <div class="btn">返回顶部</div>
     <script src="./jQuery.min.js"></script>
     <script>
         //1. 给window注册滚动事件
         $(window).scroll(function(){
     
     

             //2. 获取到滚动出去的位置
             var top = $(this).scrollTop();
             //3. 判断当前滚动出去的位置 1500
             if(top  >= 1500) {
     
     
                //4. 显示div
                $('div').fadeIn('fast');
             }else {
     
     
                 $('div').fadeOut('fast');
             }

         })
         

         //2. 给按钮注册点击事件
         // 注意: 如果希望页面滚动条以动画的形式滚动,则需要给html设置动画位置即可
         $('div').click(function(){
     
     
            $(window).scrollTop(0);

            //以动画的形式设置
            // $('html').animate({
     
     
            //     'scrollTop': 0
            // })
         })
     </script>
</body>
</html>

1.4 案例-电梯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
        }

        .other {
     
     
            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: skyblue;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
            font-weight: 700;
        }
        .content {
     
     
            width: 980px;
            margin: 15px auto;
        }
        .item {
     
     
            width: 100%;
            height: 200px;
            background-color: orange;
            margin: 15px 0;
            font-size: 40px;
        }

        .footer {
     
     
            width: 980px;
            height: 500px;
            background-color: skyblue;
            margin: 0 auto;
            text-align: center;
            line-height: 500px;
            font-size: 100px;
            font-weight: 700;
        }

        .floor {
     
     
            width: 100px;
            text-align: center;
            position: fixed;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        .floot_item {
     
     
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            border-bottom: 1px solid #ccc;
        }
        .floot_item.active {
     
     
            background-color: #e1251b;
            color: #fff;
        }
    </style>
</head>
<body>
     <div class="other">网页其他内容区域</div>
     <div class="content">
         <div class="item" id="sk">秒杀</div>
         <div class="item" id="ts">特色</div>
         <div class="item" id="tj">推荐</div>
         <div class="item" id="kf">客服</div>
         <div class="item" id="fk">反馈</div>
     </div>
     <div class="footer">网页其他内容区域</div>

     <!-- 楼层 -->
     <div class="floor">
         <div class="floot_item" data-msg="sk">秒杀</div>
         <div class="floot_item" data-msg="ts">特色</div>
         <div class="floot_item" data-msg="tj">推荐</div>
         <div class="floot_item" data-msg="kf">客服</div>
         <div class="floot_item" data-msg="fk">反馈</div>
     </div>

     <script src="./jQuery.min.js"></script>
     <script>
        //功能1: 点击每一个按钮,设置背景颜色
        $('.floot_item').click(function(){
     
     
            //点击的时候,页面滚动时候还会设置样式,所以将该处代码去掉即可
            // $(this).addClass('active').siblings().removeClass('active');
            //功能2: 点击当前按钮,选中对应的内容区域,设置内容滚动到当前位置
            var id = $(this).attr('data-msg');
            var top = $('#'+id).offset().top;
            $('html').stop().animate({
     
     
                scrollTop : top
            })
            // 或者
            // $(window).scrollTop(top);
        })
        
        //功能3: 拖拽滚动条设置按钮样式
        $(window).scroll(function(){
     
     
            //获取当前滚动的位置(加20的目的是为了拖拽滚动条的时候更好的选中对应的内容,默认内容之间有15像素的间距)
            var position = $(this).scrollTop() + 20;
            
            //获取每一个元素在网页中的位置
            $('.item').each(function(index, item1){
     
     
                if(position >= $(item1).offset().top) {
     
     
                    $('.floot_item').eq($(item1).index()).addClass('active').siblings().removeClass('active');
                }else {
     
     
                    $('.floot_item').eq($(item1).index()).removeClass('active');
                }
            })
        });
     </script>
</body>
</html>

3.JQ方式注册事件

1.1 通过常规方式注册事件

事件源.事件类型(function(){
    
    });

//代码演示:

$('.box').click(function(){
    
    
	$(this).css('background','pink');
});
$('.box').mouseenter(function(){
    
    
	$(this).css('background','blue');
});
$('.box').mouseleave(function(){
    
    
	$(this).css('background', 'red')
});

特点:
1. 只能给事件源注册一个事件
2. 如果注册多个事件,重复设置,不符合JQ的特性(do more do less)

1.2 通过on方式注册事件

事件源.on('事件类型', function(){
    
    });

//代码演示:
$('.box').on('click', function(){
    
    
	 console.log(123);
})


事件源.on({
    
    
    事件类型 : function(){
    
    },
    事件类型 : function(){
    
    }
})

//代码演示:
$('.box').on({
    
    
	click: function(){
    
    
	 	$(this).css('background','blue');
	},
	mouseenter: function(){
    
    
	 	$(this).css('background', 'pink');
	}
})


//如果事件中的代码相同还可以这样写:
$('.box').on('click mouseenter mouseleave', function(){
    
    
	console.log(123);
})

1.3 通过委托方式注册事件

父事件源.on('事件类型', '子选择器', function(){
    
    })

// 代码演示:
$('.box').on('click', '.one', function(){
    
    
	console.log(123);
})
// 注意:
// 1. 如果页面中的元素是动态创建的,给元素注册事件,需要使用委托的方式
//代码演示:
$('.box').on('click', '.one', function(){
    
    
	console.log(123);
})
$('<div class="one"></div>').appendTo('.box');

1.4案例-发布微博案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
		* {
     
     
			margin: 0;
			padding: 0;
		}
		.msg {
     
     
			width: 980px;
			padding-bottom: 10px;
			border: 1px solid #ccc;
			margin: 50px auto;
		}

		textarea {
     
     
			width: 880px;
			height: 100px;
			border: 0 none;
			border: 1px solid orange;
			resize: none;
			outline-style: none;
			border-radius: 10px;
			display: block;
			margin: 50px auto 0 auto;
			padding-left: 20px;
			padding-top: 20px;
			box-sizing: border-box;
		}

		.btn {
     
     
			width: 80px;
			height: 40px;
			display: block;
			float: right;
			margin-right: 50px;
			margin-top: 20px;
			background-color: blue;
			color: #fff;
			text-align: center;
			text-decoration: none;
			line-height: 40px;
			border-radius: 10px;
			clear: both;
			
		}

		.content {
     
     
			width: 880px;
			margin: 80px auto 0 auto;
		}
		.item {
     
     
			height: 50px;
			line-height: 50px;
			border-bottom: 1px dashed #ccc;
			padding-left: 20px;
		}

		.item p {
     
     
			float: left;
		}

		.del {
     
     
			float: right;
			text-decoration: none;
			color: #999;
		}
		.del:hover {
     
     
			color: orange;
		}
	</style>
</head>
<body>
    <div class="msg">

        <textarea></textarea>
        <a href="javascript:;" class="btn">发布</a>

        <div class="content">
        </div>
    </div>

    <script src="./jQuery.min.js"></script>
    <script>
        var input_v = $('textarea');
        var btn = $('.btn');
        btn.click(function(){
     
     
           var item =  $(`<div class="item">
                <p>${
       
       input_v.val()}</p>
                <a href="javascript:;" class="del">删除</a>
            </div>`);
            $('.content').prepend(item);
        })

        $('.content').on('click', '.del', function(){
     
     
            if(confirm('确定删除么?')) {
     
     
                $(this).parents('.item').remove();
            }
           
        })
    </script>
</body>
</html>

1.5 解绑事件

  • off()

    $对象.off([事件名]);

//代码演示1:
$('.box').click(function(){
      
      
	alert(123);
})
$('.box').off();

//代码演示2:
$('div').on('click', function(){
      
      
	alert(123);
})
$('.box').off();

// 如果元素身上有很多事件如何解绑?
$('.box').on({
      
      
	click: function() {
      
      
		alert(123);
	},
	mouseenter: function() {
      
      
		alert(789);
	}
})
$('.box').off();
或者:
$('.box').off('mouseenter');
// 总结
1. 如果off() 中没有设置任何参数,代表将所有的事件移除
2. 如果要移除对应的事件,在off方法中设置对应的方法名称即可

  • off()解绑委托事件

    $父元素对象.off('事件类型', '选择器');

// 代码演示:
$('.box').on('click', '.one', function(){
      
      
	console.log(123);
})
$('.box').off('click', '.one');

  • one()

    $对象.one('事件类型', function(){
      
      })

//总结
1. 通过one方式给元素注册事件,只能执行一次

4. 自动触发事件

1.1 事件类型()

$对象.事件类型();

//原生写法
var div = document.querySelector('div');
div.onclick = function(){
    
    
	this.style.background = 'pink';
}
div.click();

//JQ方式
var div = $('div');
div.click(function(){
    
    
	$(this).css('background','pink');
})
div.click();

1.2 trigger方式

$对象.trigger('事件类型');

var div = $('div');
div.click(function(){
    
    
	$(this).css('background','pink');
})
div.trigger('click');

5. JQ事件对象参数

1.1 绍事件对象参数

//原生:获取鼠标点击位置
var div = document.querySelector('div');
div.onclick = function(e){
    
    
	var x = e.clientX;
	console.log(x);
}

//JQ方式;
var div = $('div');
div.click(function(e){
    
    
	console.dir(e);
	var x = e.clientX;
	console.log(x);
})

//总结: JQ中事件对象参数与DOM中的事件对象参数操作方式一样

//备注:  
// 1.阻止事件冒泡  e.stopPropagation();
// 2.阻止默认行为: e.preventDefault()

6. JQ拷贝

1.1 extend

语法:
$.extend([deep], targetObject, currentObject);

参数介绍:
1. deep : 布尔类型 默认值是 false, 
   false 代表是浅拷贝 (浅拷贝中如果遇到对象,将对象的地址赋值)
   true  代表深拷贝 (深拷贝中如果遇到对象,将对象直接拷贝赋值)
2. targetObject:  拷贝后赋值的对象
3. currentObject: 被拷贝的对象


//代码演示浅拷贝 : 浅拷贝遇到对象的时候,是将对象对应的内存地址进行拷贝复制
var obj1 = {
    
    
	uname: '张三',
	uage : 28,
	msg : {
    
    
		uheight: 180
	}
}
var obj2 = {
    
    };
obj2 = $.extend(obj2, obj1);
obj2.uname = '李四';
console.log(obj2);
console.log(obj1);

在这里插入图片描述

// 代码演示深拷贝:  深拷贝的时候遇到对象,是将对象的值重新复制一份,然后将新的内存地址赋值给另外一个变量
var obj1 = {
    
    
	uname: '张三',
	uage : 28,
	msg : {
    
    
		uheight: 180
	}
}
var obj2 = {
    
    };
obj2 = $.extend(true,obj2, obj1);
obj2.msg.uheight = '190';
console.log(obj2);
console.log(obj1);

在这里插入图片描述

7. 扩展部分

1.1 插件介绍

  • 作用

    提高代码效率

  • 全屏切换插件

    1. 案例网页: https://browser.360.cn/ee/

    2. 插件地址: https://github.com/alvarotrigo/fullPage.js

    3. 中文地址: http://www.dowebok.com/demo/2014/77/

    4. 使用步骤

      • 下载插件

      • 设置html结构

        <div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

      • 引用文件

        //JQ插件依赖于jQ,第一步必须先引用jQ插件
<script type="text/javascript" src="jQuery.min.js"></script>

//引用插件文件
<script type="text/javascript" src="fullpage.min.js"></script>

//引用插件样式表
<link rel="stylesheet" href="fullpage.css">

      • 设置入口函数

        $(function(){
          
          
    $('#fullpage').fullpage();
});

      • 基本配置

        $(function(){
          
          
    $('#fullpage').fullpage({
          
          
        // 设置背景颜色
        sectionsColor : ['#ccc', 'red', 'blue', 'green'],
        //显示导航
        navigation: true,
        //导航位置
        navigationPosition: 'right',
         //是否循环
         loopTop: true,
        loopBottom: true
    });
});

  • 懒加载插件

    1. 插件地址: http://www.jq22.com/jquery-info11629

    2. 使用步骤

      • 下载插件

      • 设置HTML结构

        <img data-lazy-src="..." />

注意: 图片路径属性必须设置如上方式

      • 引用文件

        <script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript" src="EasyLazyload.min.js"></script>

注意:
1. 懒加载js文件必须放到html结构后面引用

      • 调用函数

        lazyLoadInit({
          
          
	// 显示时间
	showTime: 0
});

1.2 其他JQ插件库

 http://www.jq22.com/

8. 综合案例

1.1 在线演示地址

http://www.todolist.cn/

1.2 知识点-引用

  • 本地存储

    • 设置

      localStorage.setItem(key, value);

    • 获取

      localStorage.getItem(key);

    • 总结

      1. 在保存数据的时候,需要将对象转化为字符串进行保存
      2. 得到的数据也是一个字符串,如果希望继续操作则需要将字符串转化为对象

  • 对象转字符串

    JSON.stringify(对象);

  • 字符串转对象

    JSON.parse(字符串);

  • 从数组中删除值

    数组.splice(索引,个数)

1.3 实现添加操作

  • 功能一:

    1. 给输入框注册键盘事件

    2. 获取输入框中的值添加到本地存储中

      ☞: 如果本地存储有值,则将数据更新到原来的数据中
☞: 如果本地存储中没有值,则直接创建一条新的数据到本地存储中

    3. 获取本地存储数据,更加数据数量,动态创建li标签添加到 ol标签中

    4. 默认加载数据

    在这里插入图片描述

  • 功能二:

    1. 点击复选框,修改状态

    2. 将已完成的数据动态加载到ul列表中

      注意:
1.先给ol标签中的复选框注册事件
2.当前复选框的索引与其父元素的索引位置一样,所以在遍历父元素的时候,将父元素的索引值保存到当前标签上
3.加载数据的时候,要按照是否完成的状态动态显示对应的数据,既要通过条件判断实现
4.给ul动态创建元素的时候,记得要给ul标签先清空内容
5.最后同样给ul标签中的input标签注册点击事件

      在这里插入图片描述

  • 功能三:删除

在这里插入图片描述
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

猜你喜欢

转载自blog.csdn.net/qq_40440961/article/details/110723266
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022