jquery获得元素位置 滚动条位置
时间：5年前 阅读：5656
jQuery 中有两个获取元素位置的方法position():获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
1、获得元素样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#hd{
width: 400px;
height: 300px;
background: darkcyan;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 获得元素样式 获得宽度
// var w = $('#hd').css('width');
// 获得背景颜色
var w = $('#hd').css('backgroundColor');
alert(w);
})
</script>
</head>
<body>
<div id="hd">
</div>
</body>
</html>
2、获得非定位元素的位置 position方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box1{
width: 900px;
height: 600px;
margin: 20px;
border: 4px solid palevioletred;
position: relative;
}
#box2{
width: 600px;
height: 400px;
margin: 100px;
border: 4px solid blue;
}
#box3{
width: 300px;
height: 260px;
margin: 50px;
border: 4px solid orange;
background: orange;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 获得box3相对于整个页面的距离
var re = $('#box3').offset().left;
// 建议用法 : 获得有定位属性的元素的left和top值, (说明书和的写法有bug,说是获得有定位属性的离position最近元素之间的值是错的)
// var re = $('#box3').position().left;
alert(re);
})
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
3、获得滚动条的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#tt{
width: 500px;
height: 400px;
border: 2px solid palevioletred;
margin: 50px auto;
/*加滚动条*/
overflow: auto;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
// 给元素加滚动条事件
$("#tt").scroll(function(){
// 获得滚动条的位置(scrollTop 已经滚动上去的内容的高度)
var t = $('#tt').scrollTop();
$("#dd").html(t);
})
})
</script>
</head>
<body>
<h1 id="dd">0</h1>
<div id="tt">
项目定位：我的科研项目自己定位是二分类问题，他问其实除了是二分类问题，这还可以是个什么问题？还可以怎么解决或应用到哪？我没听懂，他给我举了个观众与电影的例子，预测观众可能对哪些他们没打分的电影感兴趣，感觉他这个想法蛮好的，将项目扩展一下到其他应用领域，值得思考。我讲解项目数据的三个网络的时候，他还用电影那个例子给了我个思考点，比如电影和电影间的信息其实也可以利用到电影和观众的关系处理间，也不错，思维给力
AUC：期间我自己主动谈到实习内容，但他好像不咋感兴趣，仍旧接着问我项目，问我的auc具体提高到了多少，我把我百分之九十几报出来后，他问了个我曾经和导师讨论过的问题，为什么auc这么高？记得邓老师当时好像是说AUC太高可能和其他网络的密度大有关系
大致就这些，和暑假在顺丰科技内推面的机器学习岗不同，没问算法原理，没问数据结构，操作系统什么的，一直在聊那个科研项目，因为自己比较熟悉，所以基本上我自己话也蛮多，又因为面试官实在太nice！各种给我补充和建议，还扩展了很多知识和内容，感觉收获满满，纯粹当做一个和前辈的学习讨论
其他：后来，他问我有啥问题，我说您觉得我能进下一面吗？或者我有没有哪方面的知识需要再强化一下的？然后，他说我们都过分关注这个结果如何，其实，公司与人才之间是一个匹配的过程，面试通不通过只能说明合不合适。至于我的能力补充方面的话，问我会不会sql查询，我就提到了昨天笔试好多sql，不知道写对了没，他说昨天的笔试题都是他们一个个人工打分的。然后，让我说说“找出班上最高的男生女生信息”的查询思路，其实蛮简单，可惜当时脑子锈掉，答得支支吾吾，说了top1，group by，感觉面试官不太满意，也没说我啥，只告诉我他是咋查的，然后就结束了，让我出去先等会。(好像"先等会"的意思是有下一轮，"回去等通知"的意思是挂了)
运气好，碰到的面试官真的太nice，说话措辞很讲究，给我纠正错误或扩展知识的时候，说的话都让人听着很舒服，类似“具体不记得没关系，你讲讲思路就好”“我不是指你的错了，我只是觉得怎样怎样会更好”“其实你这里可以再发散一下”…
</div>
</body>
</html>
4、设置滚动条的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#tt{
width: 500px;
height: 400px;
border: 2px solid palevioletred;
margin: 50px auto;
/*加滚动条*/
overflow: auto;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
setTimeout(function(){
// 设置滚动上去的距离
$('#tt').scrollTop(300);
},3000)
})
</script>
</head>
<body>
<h1 id="dd">滚动条高度设置</h1>
<div id="tt">
开发中会用到大量的工具，不管是编辑器、调试工具还是监控工具。大家都喜欢争论哪个IDE更好，然而这并没有多大意义，关键在于能够熟练的使用自己喜欢的工具，掌握各种快捷键，高度自定义，这样能够大大提高工作效率。而且对于日常中重复的操作，最好脚本自动化，这里推荐以下python，写小工具还是很快的。
实习期是一个比较重要的时期，如果没有学历这块敲门砖，实习经验就是我们唯一的筹码。你说你多牛，别人并不会相信。初入前端，不管是经验上，还是技术上，自身都存在很多的不足。po主分享一下自己的经验。上头一般会给我们一个工作计划。你需要在计划内有预期的去完成目标，如果你时间比较充裕，你尽量依靠自身去解决问题，群里问，百度谷歌不论什么方法，如果时间紧，你想破头脑还是无法解决。一定要要问你的技术带头人反映这个情况。
有上面这种想法的人，其实还是比较幸运，不，只能说比较舒服的，因为他们多半是在一些比较稳定的单位/职位上，使用比较成熟的技术，所以才会有这种感觉。而另外一些更悲催的同学，可能一年到头都在学习各种新技术，他们追得更累，他们的疑问大概应该是：“十年之后究竟还有多少技术是有用的？” 第二个项目是五子棋，同样地，先是问我想法是怎么产生的（那段时间人工智能和阿尔法狗很火，所以让我对博弈树产生了兴趣），核心技术是怎样实现的，然后问我项目中遇到哪些瓶颈，我详细介绍了项目的4种优化，还是回答的不错，但对于项目，面试官都会做沿伸，这个项目就问我实现的五子棋和阿尔法狗有什么不一样。这......不是自己挖的坑把自己给害了吗，我还真不知道阿尔法狗这么高大上的是怎么实现的。我委婉的给自己打圆场，他听了老半天反问我：“就是说，你没有对阿尔法狗进行了解咯？”看他神色略有不耐烦，我也不好继续解释，点头应了......
</div>
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论