Jquery_用得比较少的语句

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

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

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

例子：

        <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: " + position.left + ", top: " + 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.

类似的方法：

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 elementsindex - 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]++;

updateCounterStatus($start_counter,counts[0]);

},

drag: function() {

counts[1]++;

updateCounterStatus($drag_counter,counts[1]);

},

stop: function() {

counts[2]++;

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 $(’I’m a customhelper