Python学习第89天(jQuery的css操作)
今天完成了一件非常重要的事情,在我的pycharm即将到期的前半个小时,我如愿的搞到破解插件,让我获得了pycharm的70年使用权,大致就是我买的房子到年限了,我的pycharm都没有到使用年限,嗯,我估计也是很难用完所有的免费期了
CSS的固定格式:
$(" ").css(name|pro|[,val|fn]) 固定书写模式
位置
$(" ").offset([coordinates]) 不添加参数的时候获得该标签距离浏览器视口的边框距离,添加参数则为设定距离
$(" ").position() 参数情况和上面相同,获取的是距离已定位的父集边框距离
$(" ").scrollTop([val]) 滚动条效果,需要开通监测
$(" ").scrollLeft([val])
尺寸
$(" ").height([val|fn]) 设定高度,仅包含内容高度
$(" ").width([val|fn]) 设定宽度,仅包含内容宽度
$(" ").innerHeight() 设定高度,包含内容高度和podding
$(" ").innerWidth() 宽度
$(" ").outerHeight([soptions]) 设定高度,包含内容、padding、border
$(" ").outerWidth([options])
如果需要包含margin的宽度,需要在括号内增加参数true
说到几个宽度的问题,就需要复习一下之前css中关于宽度问题的定义
下面是习题实现返回顶部:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-2.2.3.js"></script> <script> window.onscroll=function(){ var current=$(window).scrollTop(); console.log(current) if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ // $(".div1").scrollTop(0); $(window).scrollTop(0) } </script> <style> body{ margin: 0px; } .returnTop{ height: 60px; width: 100px; background-color: darkgray; position: fixed; right: 0; bottom: 0; color: greenyellow; line-height: 60px; text-align: center; } .div1{ background-color: orchid; font-size: 5px; overflow: auto; width: 500px; } .div2{ background-color: darkcyan; } .div3{ background-color: aqua; } .div{ height: 300px; } .hide{ display: none; } </style> </head> <body> <div class="div1 div"> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> </div> <div class="div2 div"></div> <div class="div3 div"></div> <div class="returnTop hide" onclick="returnTop();">返回顶部</div> </body> </html>
最近学习进度有点慢,比较懈怠,前面忘的太快了,所以最近要加进度,尽快结束前端学习。