1.;(function($){
})(Jquery)
1.; 是用来防止压缩时出现问题的
2.立即调用函数可以更改$符号，用别的符号替换他防止重复
2. js:;(function($){
$.fn.extend({
color:function(cor){
this.css("background",cor);
return this;
}
})
})(jQuery)
调用：$("#app").color("red");
1. $.fn.extend({
color: function(){}
})
定义函数的固定用法
2.this指的就是前面的$对象
2. 提示气泡
涉及知识点：
1.边框做三角形：
border：10px solid transparent
border-top-color:red;
2.子元素在父元素中居中
#app{
position：relative;
}
.sanjiaoxing{
width:10px;
height:10px
position:absolute;
left:50%
top:50%
margin-top:-5px;
margin-left:-5px;
}
3.如果要贴底边：
buttom:0;
然后拉回高度的一半就OK了
4.取得元素当前位置：
.offset()函数
$tooltop.offset({
left:that.offset().left,
top:that.offset().top-20,
}}
不传值的话是取得该jq对象的当前位置，下面有两个属性值
offset().top
offset().left
传值需要传一个对象即offset({
top:,
left,
})
改变当前元素属性
相对于文档DOCUMENT
还有一个函数.position()不接受参数相对于父元素。
代码：
html：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
#app{
margin-top: 50px;
}
#add{
position: relative;
width: 100px;
/* margin-top: 50px;*/
text-align: center;
}
.tooltop{
width: 100px;
background: grey;
/*border:1px solid #000;*/
border-radius: 10%;
/*margin-top: 50px;*/
}
.sanjiao{
width: 0;
border:10px solid transparent;
border-bottom-color:grey;
position: absolute;
left: 50%;
margin-left:-10px;
top:-20px;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jquery-tishi-1.0.js"></script>
</head>
<body>
<div id="app">
<a href="" class="tooltop-user">我是有用的aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>
<br>
<a href="">我是假的a</a>
</div>
<script type="text/javascript">
var $span = $('<span>我是测试</span>')
$('.tooltop').before($span);
$('.tooltop-user').tooltop();
</script>
</body>
</html>
js:
;(function($){
$.fn.extend({
tooltop:function(){
that = this;
this.hover(function(){
$tooltop = $('<div id="add">'+
'<div class="tooltop">'+
'啦啦啦'
+'</div>'
+'<span class="sanjiao">'
+'</span>'
+'</div>');
$tooltop.appendTo("body");
var iLift = $(this).offset().left - ($tooltop.width()-$(this).width())/2;
// var iTop = $(this)
if($(this).offset().top<50){
$tooltop.offset({
left:$(this).offset().left+$(this).width(),
top:$(this).offset().top+10,
})
}else{
$tooltop.offset({
left:iLift,
top:$(this).offset().top-20,
})
}
},function(){
$("#add").remove();
})
}
})
})(jQuery)