jQuery_CSS、属性

jquery中css操作、class类操作、属性操作、效果

1.1 CSS

1.1.1 css操作

css(name|pro|[,val|fn])功能:设置样式和获取样式，就是操作style属性

1.访问

<h1 id="t1" style="color:blue;">小yu</h1>

2.jquery访问页面中的标签元素

<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script><script>$(function(){//css()设置和访问元素身上的样式(行内样式)//访问$c1=  $('#t1').css('color')console.log($c1);//1.设置单个css//   $('#t1').css('color','red')//   $('#t1').css('backgroundColor','orange')//   $('#t1').css('fontSize','130px')//简写$('#t1').css('color','red').css('backgroundColor','orange').css('fontSize','130px')//2.设置多个样式$('#t1').css({"color":"green","backgroundColor":"pink","fontSize":"120px"})})</script>

预览：

1.1.2 位置

offset和position方法

offset()方法获取元素距离document的位置

$(selector).offset();//返回值为对象{left:100,top:20}

<style>.box{width: 200px;height: 200px;background-color: pink;position: absolute;top: 200px;left: 100px;}
</style>

 <div class="box"></div>

 <script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script><script>$(function(){//设置元素的偏移量$('.box').offset({top:300,left:300})//位置//获取元素的偏移量$o=$('.box').offset()console.log($o);console.log($o.top);console.log($o.left);})</script>

预览：

position方法

只能获取当前元素距离有定位的父元素的位置

$(selector).position();//获取相对于其最近的有定位的父元素位置

注意：这个方法，只有获取，没有设置。

<style>.parent{width: 600px;height: 600px;background-color: skyblue;margin:0 auto;position: relative;}.box{width: 200px;height: 200px;background-color: pink;position: absolute;top: 200px;left: 100px;}
</style>

 <div class="parent"><div class="box"></div> </div>

 <script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script><script>$(function(){//位置//获取$p=$('.box').position()console.log($p);console.log($p.top);console.log($p.left);//设置//注意：position方法只能获取当前元素距离有定位父元素的位置(没有设置)// 我们可以通过attr方法，对元素的位置进行调整$('.box').attr("style","top:300px;left:300px;")})</script>

预览：

scrollTop方法

获取匹配元素相对滚动条顶部的偏移（白话：页面垂直方向上，卷曲（卷上去）的高度）

scrollLeft方法

获取匹配元素相对滚动条左侧的偏移（白话：页面水平方向上，卷曲的宽度）

设置或者获取垂直滚动条的位置
$(window).scrollTop();//获取页面被卷曲的高度
$(window).scrollLeft();//获取页面被卷曲的宽度

上面这两个方法需要结合事件中 scroll 一起使用。当用户滚动指定的元素时，会发生 scroll 事件。

<style>.container{width: 360px;height: 260px;margin:60px auto;overflow: auto;overflow-x:scroll;}.container p{width: 450px;}
</style>

<div class="container"><p>央广网郑州6月17日消息（记者 王勇生 通讯员 范霞）为贯彻落实《国务院办公厅关于进一步支持大学生创新创业的指导意见》，有效解决大学生创新创业实践中的关键问题，提升大学生创新创业能力，河南省人民政府办公厅结合全省实际，提出相关支持政策。准备创业的大学生们，这些支持政策一起来关注！央广网郑州6月17日消息（记者 王勇生 通讯员 范霞）为贯彻落实《国务院办公厅关于进一步支持大学生创新创业的指导意见》，有效解决大学生创新创业实践中的关键问题，提升大学生创新创业能力，河南省人民政府办公厅结合全省实际，提出相关支持政策。准备创业的大学生们，这些支持政策一起来关注！央广网郑州6月17日消息（记者 王勇生 通讯员 范霞）为贯彻落实《国务院办公厅关于进一步支持大学生创新创业的指导意见》，有效解决大学生创新创业实践中的关键问题，提升大学生创新创业能力，河南省人民政府办公厅结合全省实际，提出相关支持政策。准备创业的大学生们，这些支持政策一起来关注！</p><p>他被吸进了20多米长的涵洞试想如果你被洪水卷挟着吸进了20多米长的涵洞漆黑的周遭湍急的洪流</p></div>

<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script><script>$(function(){$('.container').scroll(function(){//获取页面被卷曲的高度$st=$('.container').scrollTop()console.log($st);//获取页面被卷曲的宽度 $sl=$(this).scrollLeft()console.log($sl);})})</script>

预览：

jQuery实现返回顶部效果分析：（1）需要使用 事件中的方法scroll （），这个方法的作用是：当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。（2）fadeIn(300)淡入--慢慢的显示出来（3）fadeOut(300)淡出--慢慢的隐藏起来（4）animate() 用于创建自定义动画的函数素材来源：https://www.jq22.com/demo/jqueryTop/

<style>*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{background:url(img/blog7year_videobg.png);font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}/* actGotop */.actGotop{position:fixed;_position:absolute;bottom:100px;right:50px;width:150px;height:195px;display:none;}.actGotop a,.actGotop a:link{width:150px;height:195px;display:inline-block;background:url(img/blog7year_gotop.png) no-repeat;_background:url(img/blog7year_gotop.gif) no-repeat;outline:none;}.actGotop a:hover{background:url(img/blog7year_gotopd.gif) no-repeat;outline:none;}</style>

<body style="height:2000px;"><div class="actGotop"><a href="javascript:;" title="返回顶部"></a></div>

<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script><script>$(function(){$(window).scroll(function(){//获取卷上去的距离$top =$(this).scrollTop()console.log($top);//设置临界点if($top>=100){$(".actGotop").fadeIn(300);}else{$('.actGotop').fadeOut(300)}})//单击按钮$(".actGotop").click(function(){console.log(100);//给dom对象中的根节点指定一个自定义动画$("html,body").animate({//以小驼峰的形式写属性是js的写法// scrollTop:0//在引号里面写属性,这个是css的写法"scroll-top":0})})})</script>

预览：

jQuery_CSS、属性相关推荐

kotlin中继承父属性使用构造方法
kotlin中继承父属性使用构造方法 1. 定义父类,给它两个属性: abstract class AbstractResponseMessage {private var success = tru ...
Python 类—类属性（私有属性、公有属性、实例属性、局部变量）类方法（实例方法、静态方法）
1. 创建类类是对某个对象的定义,它包含有关对象动作方式的信息,包括它的名称.方法.属性和事件.类不存在于内存中,因此它本身并不是对象.当程序运行需要引用类的代码时,就会在内存中创建一个类的新实例, ...
SpringBoot2.x 不反回空值属性
介绍由于有的时候我们返回的数据中存在属性没有值得情况,或者是属性的值为空白字符串,这会浪费网络流量,又或者是前端框架存在的bug会导致null值或者是空白字符串在渲染的时候会报错. 处理方式第一种 ...
Python 属性__getattribute__
首先理解__getattribute__的用法,先看代码: class Tree(object):def __init__(self,name):self.name = nameself.cate = ...
Python __dict__属性详解
由此可见, 类的静态函数.类函数.普通函数.全局变量以及一些内置的属性都是放在类__dict__里的对象的__dict__中存储了一些属性我们都知道Python一切皆对象,那么Python究竟是怎 ...
vue响应式给数组中的对象添加新属性
需要使用到vue的全局api $set(item,'newParam','value')方法 group: [ // 对象数组{ id: '1', name: '任务1' ,disable: fals ...
Cocos 属性常用参数
default:设置属性的默认值,这个默认值仅在组件第一次添加到节点上时才会用到 type:限定属性的数据类型,详见 CCClass 进阶参考:type 参数 visible:设为 false 则不在 ...
React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
HarmonyOS Image 属性了解
HarmonyOS Image 存放的地方在entry > src > main > resources > base > media 位置如下 HarmonyOS I ...

jQuery_CSS、属性

1.1 CSS

jQuery_CSS、属性相关推荐

最新文章

热门文章