<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: darkgoldenrod;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
<script type="text/javascript">
//工具方法
//$.extend({})
$.extend({
aaa : function(){
return 'aaa';
},
bbb : function(){
return 'bbb';
},
ccc : function(){
return 'ccc';
},
//1. 去除字符串中左边的空格（封装成 工具方法）
trimLeft : function(str){
return str.replace(/^\s+/g,'');
},
//2. 去除字符串中右边的空格（封装成 工具方法）
trimRight : function(str){
return str.replace(/\s+$/g,'');
}
});
// alert($.aaa());
// alert($.bbb());
// alert($.ccc());
//对象方法
//$.fn.extend({})
$.fn.extend({
aaa : function(){
return 'aaa';
},
bbb : function(){
return 'bbb';
},
ccc : function(){
return 'ccc';
},
//1. 去除字符串中左边的空格（封装成 对象方法）
trimLeft : function(str){
return str.replace(/^\s+/g,'');
},
//2. 去除字符串中右边的空格（封装成 对象方法）
trimRight : function(str){
return str.replace(/\s+$/g,'');
},
//3. 封装拖拽的方法（封装成 对象方法）
drag : function(){
var disX = null;
var disY = null;
var that = this; //jQ对象
this.mousedown(function(evt){
// alert(this); //原生this对象：代表当前所触发事件的对象
disX = evt.pageX - $(this).offset().left;
disY = evt.pageY - $(this).offset().top;
//文档添加移动事件
$(document).mousemove(function(evt){
that.css({left : evt.pageX - disX,top : evt.pageY - disY});
})
//鼠标抬起事件
$(document).mouseup(function(){
$(this).off();
})
})
}
})
// alert($().aaa());
// alert($().bbb());
// alert($().ccc());
//1. 去除字符串中左边的空格（封装成 工具方法和对象方法）
// alert('(' + $.trimLeft(' a b ') + ')');
// alert('(' + $().trimLeft(' a b ') + ')');
// alert('(' + $.trimRight(' a b ') + ')');
// alert('(' + $().trimRight(' a b ') + ')');
//2. 去除字符串中右边的空格（封装成 工具方法和对象方法）
//3. 封装拖拽的方法（封装成 对象方法）
//事件中的this ： 表示原生对象（当前对象）
//jQuery对象调用的方法中，this ： 表示jQuery对象
$('#box').drag();
</script>
</body>
</html>
