如何利用jQuery来提升网站的速度
作者:课课家教育更新于： 2019-03-16 20:41:51
jQuery是一套跨浏览器的javaScript库，简化HTML与Javascript之间的操作。它是轻量级的js库，兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本不再支持IE6/7/8浏览器。还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
我们这次的目的是看看如何在jQuery中拖动代码。我们主要是应用于前端开发中，使得浏览器能够提高速度和保持流畅，那么在IE的浏览器中我们要使得它能够兼容于网站之中，那么我们就要根据代码的入口把相应的代码拖入其代码库中，支持自适应缩放时，不会看不到，始终会在窗口内，记录位置拖动的元素不会拖到外面去保持始终可见这些就是我们要实现的目的。
一具体的操作如下首先把html代码加入到服务器中：
<风格类型=“文本/CSS”>
页：文本对齐：左；}
。dragdiv{border:1pxsolid#DDD；padding:10px；宽度：300px；保证金：0汽车；边界半径：4px；盒阴影：01px2px#fefefe；位置：固定；}
＜divclass=“dragdiv”id=“拖”>
＜divclass=“拖头”>点击拖动
＜divclass=“拖体”>
二、然后把jQuery拖入到代码中：
无功_drag={}；
_drag.top=0；//拖动过的位置距离上边
_drag.left=0；//拖动过的位置距离左边
_drag.maxleft；//距离左边最大的距离
_drag.maxtop；//距离上边最大的距离
_drag.dragging=false；//是否拖动标志
//拖动函数
功能binddrag（EL）{
无功winwidth=$（窗口）。width()，winheight=$（窗口）。height()，objwidth=$（EL）。outerwidth()，objheight=$（EL）。outerheight()；
_drag.maxleft=winwidth-objwidth，_drag.maxtop=winheight-objheight；
VaRELS=EL。风格，x=0，y=0；
VAR模型OBJTOP=$（EL）。offset()。顶，objleft=$（EL）。offset()。左；
$（EL）。MouseDown（功能（e）{
_drag.dragging=真；
_drag.isdragged=真；
x=e.clientx-el.offsetleft；
Y=e.clienty-el.offsettop；
el.setcapture&setcapture()EL；
$（document）.bind（'mousemove，MouseMove）.bind（'mouseup，松开鼠标）；
返回false；
}）；
函数MouseMove（e）{
E=E||window.event；
如果（_drag。拖动）{
_drag.top=e.clientyY；
_drag.left=e.clientxX；
_drag.top=_drag.top>_drag.maxtop？_drag.maxtop：_drag.top；
_drag.left=_drag.left>_drag.maxleft？_drag.maxleft：_drag.left；
_drag.top=_drag.top＜0？0：_drag.top；
_drag.left=_drag.left＜0？0：_drag.left；
els.top=_drag.top+'px'；
els.left=_drag。左+'px'；
返回false；
}
}
功能mouseup（e）{
_drag.dragging=false；
el.releasecapture&releasecapture()EL；
e.cancelbubble=真；
$（document）。unbind（'mousemove，MouseMove）。unbind（'mouseup，松开鼠标）；
}
$（窗口），调整（function(){
无功winwidth=$（窗口）。width()，
winheight=$（窗口）。height()，
厄尔尼诺=$（厄尔尼诺），
elwidth=outerwidth()EL，
elheight=outerheight()EL，
elleft=parseFloat（EL。CSS（右）），
爱威=parseFloat（EL。CSS（''））；
_drag.maxleft=winwidth-elwidth；
_drag.maxtop=winheight-elheight；
_drag.top=_drag.maxtop<爱威？_drag.maxtop：爱威；
_drag.left=_drag.maxleft 埃尔。CSS（{ 上图：_drag.top， 左：_drag.left }） }） } binddrag（文档。getElementById（拖的））； 总结：jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调式命令，那么这次主要的目的是教大家如何拖拉jQuery到代码中，同样为了使得HTML的页面能够更加流畅，所以我们可以根据网页的兼容性来调试代码，使得网页的速度能够提升和流畅。
￥99.00
￥59.00
￥39.00
