首页 > 程序开发 > web前端 > JavaScript >

Jquery_ 用得比较少的语句

2013-12-06

一、$() position():不接受任何参数, 返回指定元素的top和left& 20540; 与 offset不同的是,它得到的是与父元素相对的位置,而offset则是与document相对的位置 当在同一个DOM元素内,定义与一个元素相邻的另一

一、$().position():不接受任何参数, 返回指定元素的top和left值

与.offset不同的是,它得到的是与父元素相对的位置,而offset则是与document相对的位置

当在同一个DOM元素内,定义与一个元素相邻的另一个元素时,position更有用:

例子:

    position demo    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 

Hello

<script>var p = $( "p:first" );var position = p.position();$( "p:last" ).text( "left: " &#43; position.left &#43; ", top: " &#43; position.top );</script>

结果:

Hello

left: 15, top: 15


二、$.height()

返回元素的高度,不包括padding border margin

例子:

$("button").click(function(){
alert($("div").height());
});

定义和用法:

The height() method sets or returns the height of the selected elements.

When this method is used to return height, it returns the height of the FIRST matched element.

When this method is used to set height, it sets the height of ALL matched elements.

As the image below illustrates, this method does not include padding, border, or margin.

类&#20284;的方法:

width() - Sets or returns the width of an elementinnerWidth() - Returns the width of an element (includes padding)innerHeight() - Returns the height of an element (includes padding)outerWidth() - Returns the width of an element (includes padding and border).outerHeight() - Returns the width of an element (includes padding and border).

参数:

Return the height:

$(selector).height()

Set the height:

$(selector).height(value)

Set the height using a function:

$(selector).height(function(index,currentheight))


value Required for setting height. Specifies the height in px, em, pt, etc.
Default unit is px
function(index,currentheight) Optional. Specifies a function that returns the new height of selected elements index - Returns the index position of the element in the setcurrentheight - Returns the current height of the selected element


三、$().css()

(1) 获得css属性

To return the value of a specified CSS property, use the following syntax:

css("propertyname"); 例子:

$("p").css("background-color");

(2) 设置css属性(可设置多个属性)

例子:

$("p").css("background-color","yellow");

$("p").css({"background-color":"yellow","font-size":"200%"});


四、#().draggabler()

$.extend($.ui.draggable, {

version: “1.7.1″,

eventPrefix: “drag”,

defaults: {

addClasses: true,

appendTo: “parent”,

axis: false,

cancel: “:input,option”,

connectToSortable: false,

containment: false,

cursor: “auto”,

cursorAt: false,

delay: 0,

distance: 1,

grid: false,

handle: false,

helper: “original”,

iframeFix: false,

opacity: false,

refreshPositions: false,

revert: false,

revertDuration: 500,

scope: “default”,

scroll: true,

scrollSensitivity: 20,

scrollSpeed: 20,

snap: false,

snapMode: “both”,

snapTolerance: 20,

stack: false,

zIndex: false

}

});

============================================================

Default:

$(”#draggable”).draggable();

============================================================

events:

var $start_counter = $(’#event-start’),$drag_counter = $(’#event-drag’), $stop_counter =$(’#event-stop’);

var counts = [0,0,0];

$(”#draggable”).draggable({

start: function() {

counts[0]&#43;&#43;;

updateCounterStatus($start_counter,counts[0]);

},

drag: function() {

counts[1]&#43;&#43;;

updateCounterStatus($drag_counter,counts[1]);

},

stop: function() {

counts[2]&#43;&#43;;

updateCounterStatus($stop_counter,counts[2]);

}

});

});

functionupdateCounterStatus($event_counter,new_count) {

// first update the statusvisually…

if(!$event_counter.hasClass(’ui-state-hover’)) {

$event_counter.addClass(’ui-state-hover’)

.siblings().removeClass(’ui-state-hover’);

}

// …then update the numbers

$(’span.count’,$event_counter).text(new_count);

============================================================

constrain-movement(限制范围移动):

$(”#draggable”).draggable({ axis: ‘y’}); //限制y轴

$(”#draggable2″).draggable({ axis: ‘x’}); //限制x轴

$(”#draggable3″).draggable({containment: ‘#containment-wrapper’, scroll: false }); //不出现滚动条

$(”#draggable4″).draggable({containment: ‘#demo-frame’ });

$(”#draggable5″).draggable({containment: ‘parent’ }); //限制在父系框架中

============================================================

delay-start(延时移动):

$(”#draggable”).draggable({ distance:20 }); //移动20像素开始拖动

$(”#draggable2″).draggable({ delay:1000 });//延迟1秒后开始拖动

============================================================

snap-to (吸附移动):

$(”#draggable”).draggable({ snap: true}); //默认,任何方式吸附

$(”#draggable2″).draggable({ snap:‘.ui-widget-header’ }); //以某元素的内外径吸附

$(”#draggable3″).draggable({ snap:‘.ui-widget-header’, snapMode: ‘outer’ });//以某元素外径吸附,吸附方式:本上吸其下,本下吸其上. 内径吸附:inner, 吸附方式:相反

$(”#draggable4″).draggable({ grid:[20,20] });//以一定距离移动

$(”#draggable5″).draggable({ grid: [80,80] });

============================================================

scroll:

$(”#draggable”).draggable({ scroll:true });

$(”#draggable2″).draggable({ scroll:true, scrollSensitivity: 100 }); //滚动条敏感度

$(”#draggable3″).draggable({ scroll:true, scrollSpeed: 100 }); //滚动速度

============================================================

revert position(恢复到原始位置):

$(”#draggable”).draggable({ revert:true}); //revert:true 设置为恢复到位置

$(”#draggable2″).draggable({ revert:true, helper: ‘clone’}); //helper:’clone’ 复制拖动

============================================================

visualfeedback (视觉效果):

$(”#draggable”).draggable({ helper:‘original’ }); //设置不复制(初始化设置)

$(”#draggable2″).draggable({ opacity:0.7, helper: ‘clone’ }); //opacity设置透明度,并克隆元素

$(”#draggable3″).draggable({

cursor: ‘move’, //设置鼠标图形

cursorAt: { top: -12, left: -20 },//位置定位坐标设置

helper: function(event) {

return $(’vclass=”ui-widget-header”>I\’m a customhelper

’);

} //新建提示元素,上面设置其以鼠标定位位置&#20540;

});

$(”#set div”).draggable({ stack: {group: ‘#set div’, min: -1 }});//群组设置拖动,并且最后添加的元素叠加到该群组的最上面.适合做许愿板效果。

============================================================

Drag handle (拖动点设置):

$(”#draggable”).draggable({ handle: ‘p’}); //handle设置实现拖动位置

$(”#draggable2″).draggable({ cancel:“p.ui-widget-header” }); //cancel设置限制拖动位置

============================================================

Cursor style (鼠标样式):

$(”#draggable”).draggable({ cursorAt: {cursor: ‘move’, top: 56, left: 56 } }); //cursor设置鼠标样式,top、left、right、bottom设置元素相对鼠标的定位点

$(”#draggable2″).draggable({ cursorAt:{ cursor: ‘crosshair’, top: -5, left: -5 } });

$(”#draggable3″).draggable({ cursorAt:{ bottom: 0 } });

===========================================================

Cursor style (鼠标样式):

$(”#draggable”).draggable({ cursorAt: {cursor: ‘move’, top: 56, left: 56 } }); //cursor设置鼠标样式,top、left、right、bottom设置元素相对鼠标的定位点

============================================================

Draggable&#43;sortable:

$(”#sortable”).sortable({

revert: true

});

$(”#draggable”).draggable({

connectToSortable: ‘#sortable’,//设置拖动加入到其他列表中

helper: ‘clone’,

revert: ‘invalid’

});










相关文章
最新文章
热点推荐