jQuery3.1--CSS读写/offset/position/scroll

最新推荐文章于 2020-11-25 16:29:16 发布

jiaody111

最新推荐文章于 2020-11-25 16:29:16 发布

阅读量152

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42139212/article/details/98034293

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

获取和设置css样式

获取：只需传递一个参数
设置：以键值对的形式传递要设置的属性和属性值

		<script src='../jQuery/jquery-1.12.4.js'></script>
		<script>
			$(function() {
				$(function() {
					//1.逐个设置css样式
					$('div').css('width', '100px')
					$('div').css('background','red')
					$('div').css('height','100px')
					
					//2.链式设置css样式 最好不要超过三个 否则影响阅读性
					$('div').css('height','200px').css('width','200px').css('background','green')
					
					//3.以对象的形式传递(推荐，可同时设置多个样式)
					$('div').css({
						'height':'150px',
						'width':'150px',
						'background':'yellow'
					})
					
					//4.获取css样式
					console.log($('div').css('width')) //输出是 150px
				})
			})
		</script>
	</head>
	<body>
		<div></div>
	</body>

位置和尺寸的操作方法

offset()方法用来获取和设置当前元素相对浏览器窗口的偏移
position()方法用来获取和设置相对于离他最近的已定位父元素的偏移

		<script src='../jQuery/jquery-1.12.4.js'></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				width: 100px;
				height: 100px;
				margin-left: 100px;
				background-color: green;
				border: 10px solid red;
				position: absolute;
			}
			.son{
				width: 50px;
				height: 50px;
				background-color: blueviolet;
				position: relative;
				left: 25px;
				top: 25px;
			}
		</style>
		<script>
			$(function() {
				$(function() {
					//1.获取元素的宽度
					console.log($('.father').width()) //输出是100 无单位
					//2.获取father元素相对于浏览器窗口的偏移量
					console.log($('.father').offset()) //{top: 0, left: 100}
					//3.获取son元素相对于其父元素的偏移量
					console.log($('.son').position())//{top: 25, left: 25}
					//4.设置元素的宽度
					$('.father').width('200px')
					//5.设置父元素相对于浏览器窗口的偏移量
					$('.father').offset({
						left:200
					})
					//6.设置子元素相对于其定位父元素的偏移 position()方法只能获取不能设置
					//通过css()方法设置
					$('.son').css({
						'left':'0px'
					})
				})
			})
		</script>
	</head>
	<body>
		<div class='father'>
			<div class="son"></div>
		</div>
	</body>

scroll滚动

scrollTop():读取/设置滚动条的Y坐标
$(d o c u m e n t . b o d y) . s c r o l l T o p () +$ (document.documentElement).scrollTop() 读取页面滚动条的Y坐标(兼容chrome和IE)
$(‘body,html’).scrollTop(60) 页面滚动到指定位置(兼容chrome和IE)

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button");
            // 监听获取
            btns[0].onclick = function () {
                // 获取滚动的偏移位
                // console.log($(".scroll").scrollTop());
                // 获取网页滚动的偏移位
                // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
                console.log($("body").scrollTop()+$("html").scrollTop());
            }
            btns[1].onclick = function () {
                // 设置滚动的偏移位
                $(".scroll").scrollTop(300);
                // 设置网页滚动偏移位
                // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
                $("html,body").scrollTop(300);
            }
        });
    </script>
</head>
<body>
<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>
<button>获取</button>
<button>设置</button>
</body>

事件绑定

事件绑定有两种方式：

            1.事件名(func);
            不能实现自定义事件
            2.on(事件名, func);
            可以实现自定义事件

            注意点:
            可以添加多个相同或者不同类型的事件,不会覆盖

事件移除off

    <script>
        $(function () {
            function test1() {
                alert("hello lnj");
            }
            function test2() {
                alert("hello 123");
            }
            // 编写jQuery相关代码
            $("button").click(test1);
            $("button").click(test2);
            $("button").mouseleave(function () {
                alert("hello mouseleave");
            });
            $("button").mouseenter(function () {
                alert("hello mouseenter");
            });

            // off方法如果不传递参数, 会移除所有的事件
             $("button").off();
            // off方法如果传递一个参数, 会移除所有指定类型的事件
             $("button").off("click");
            // off方法如果传递两个参数, 会移除所有指定类型的指定事件
            $("button").off("click", test1);
        });
    </script>
 <body>
<button>我是按钮</button>
</body>

事件冒泡、默认行为和自动触发trigger

冒泡：子元素的事件触发时，会向上传递到父元素的相同事件
阻值冒泡:
1.给不想向上冒泡的子元素的回调函数的返回值设置为false: return false
2. 回调参数会传递参数event   event.stopPropagation();
默认行为：如超链接点击后会跳转到新页面，表单提交按钮点击后也会跳转到新页面等，这些都是默认行为
取消默认行为：
1. return false
2. event.preventDefault()
自动触发：
trigger: 会触发事件冒泡和默认行为 triggerHandler不会触发事件冒泡和默认行为
注：对于超链接，给其添加trigger事件，也不会触发跳转行为，必须给其中的内容进行包装，再添加trigger事件，才能触发跳转事件。
 $("span").trigger("click");
<a href="http://www.baidu.com"><span>注册</span></a>

自定义事件和命名空间

            /*
            自定义事件：
            1.事件必须是通过on绑定的
            2.事件必须通过trigger来触发
            命名空间：
            1.利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
            2.利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
            */

事件委托：

           /*
            在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件
            当页面同步加载时，会添加事件。有时数据是由异步加载，同步无法给不存在（刚开始）的元素添加事件。此时我们可以在一开始就存在的**父元素**上添加事件，再通过父元素在触发时找子元素。
             */

移入移出事件

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 编写jQuery相关代码
            /*
            mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件
            */
            /*
            $(".father").mouseover(function () {
                console.log("father被移入了");
            });
            $(".father").mouseout(function () {
                console.log("father被移出了");
            });
            */

            /*
            mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件
            推荐大家使用
            */
            /*
            $(".father").mouseenter(function () {
                console.log("father被移入了");
            });
            $(".father").mouseleave(function () {
                console.log("father被移出了");
            });
            */

            /*
            $(".father").hover(function () {
                console.log("father被移入了");
            },function () {
                console.log("father被移出了");
            });
            */

            $(".father").hover(function () {
                console.log("father被移入移出了");
            });
        });
    </script>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery3.1--CSS读写/offset/position/scroll

获取和设置css样式获取：只需传递一个参数设置：以键值对的形式传递要设置的属性和属性值 <script src='../jQuery/jquery-1.12.4.js'></script> <script> $(function() { $(function() { //1.逐个设置css样式 $('div').cs...
复制链接

扫一扫