Jquery_ 用得比较少的语句

来源：互联网发布：手机网络控制软件编辑：程序博客网时间：2024/04/27 21:47

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

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

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

例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <style>
  div {
    padding: 15px;
  }
  p {
    margin-left: 10px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>
  <p>Hello</p>
</div>
<p></p>
 
<script>
var p = $( "p:first" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
</script>
 
</body>
</html>

结果：

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 element
innerWidth() - 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))

valueRequired for setting height. Specifies the height in px, em, pt, etc.
Default unit is pxfunction(index,currentheight)Optional. Specifies a function that returns the new height of selected elements

index - Returns the index position of the element in the set
currentheight - 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 $(’<divclass=”ui-widget-header”>I\’m a customhelper</div>’);

} //新建提示元素,上面设置其以鼠标定位位置值

});

$(”#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+sortable：

$(”#sortable”).sortable({

revert: true

});

$(”#draggable”).draggable({

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

helper: ‘clone’,

revert: ‘invalid’

});

五、 $(this).hasClass $(this).removeClass $(this).addClass()

判断选定元素是否包含一个类；移除选中元素的类；为选中元素添加类

六、$().before()

定义和用法

before() 方法在被选元素前插入指定的内容。

语法

$(selector).before(content)

参数描述content必需。规定要插入的内容（可包含 HTML 标签）。

使用函数来插入内容

使用函数在指定的元素前面插入内容。

语法

$(selector).before(function(index))

参数描述function(index)

必需。规定返回待插入内容的函数。

index - 可选。接收选择器的 index 位置

例子：

$("button").click(function(){  $("p").before("<p>Hello world!</p>");});

七、$().scrollTop() 返回或设置匹配元素的滚动条的垂直位置。（距离顶部的距离）

定义和用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

scroll top offset 指的是滚动条相对于其顶部的偏移。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

语法

$(selector).scrollTop(offset)

参数描述offset可选。规定相对滚动条顶部的偏移，以像素计。

提示和注释

注释：该方法对于可见元素和不可见元素均有效。

注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。

注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。

例子：

$(".btn1").click(function(){  $("div").scrollLeft(100);});

八、 $().draggable() $.dropable()

拖动和放置

例子：clone表示是复制，默认是移动

.draggable({childs:".add,.hcid,.dir",appendTo:"#travel-list",revert:false,helper:'clone',styles:{height:"auto",backgroundColor:"#FFFFFF"},start:function(){$(this).trigger("mouseout");}})

$(function() {$("#draggable").draggable();$("#droppable").droppable({//修改样式//drop: function(event, ui) {//$(this).addClass('ui-state-highlight').find('p').html('Dropped!');// }//弹出提示drop: function() { alert('已经放置'); }});});

$(function() {$("#draggable_pum, #draggable-nonvalid,").draggable();//接收指定元素$("#droppable_pu").droppable({accept: '#draggable_pum',activeClass: 'ui-state-hover',hoverClass: 'ui-state-active',drop: function(event, ui) {$(this).addClass('ui-state-highlight').find('p').html('哈哈!');}});

dropable 参数：

参数

accept
类型:
Selector, Function
默认值:
'*'
接受所有符合选择器条件的draggable对象. 如果指定了一个函数, 该函数要求为页面上每个draggable对象(符合函数第一个条件的对象)提供一个过滤器.如果要这些元素被dropable接受,该函数需要返回true.
代码示例
使用指定的accept参数初始化一个droppable.
```
$('.selector').droppable({ accept: '.special' });
```
在初始化后设置或者获取accept参数.
```
//获取  var accept = $('.selector').droppable('option', 'accept');  //设置  $('.selector').droppable('option', 'accept', '.special');
```
activeClass
类型:
String
默认值:
false
如果指定了该参数,在被允许的draggable对象填充时,droppable会被添加上指定的样式.
代码示例
使用指定的activeClass参数初始化一个droppable.
```
$('.selector').droppable({ activeClass: '.ui-state-highlight' });
```
在初始化后设置或者获取activeClass参数.
```
//获取  var activeClass = $('.selector').droppable('option', 'activeClass');  //设置  $('.selector').droppable('option', 'activeClass', '.ui-state-highlight');
```
addClasses
类型:
Boolean
默认值:
true
如果设置为false, 可以防止ui-droppable类在进行时添加. 这可能会使在初始化数百个元素执行.droppable()时使性能得到理想的优化.
代码示例
使用指定的addClasses参数初始化一个droppable.
```
$('.selector').droppable({ addClasses: false });
```
在初始化后设置或者获取addClasses参数.
```
//获取  var addClasses = $('.selector').droppable('option', 'addClasses');  //设置  $('.selector').droppable('option', 'addClasses', false);
```
greedy
类型:
Boolean
默认值:
false
如果设置为true,将在嵌套的droppable对象中组织事件的传播.
代码示例
使用指定的greedy参数初始化一个droppable.
```
$('.selector').droppable({ greedy: true });
```
在初始化后设置或者获取greedy参数.
```
//获取  var greedy = $('.selector').droppable('option', 'greedy');  //设置  $('.selector').droppable('option', 'greedy', true);
```
hoverClass
类型:
String
默认值:
false
如果设置了该参数,将在一个被允许的draggable对象悬停在droppable对象上时向droppable对象添加一个指定的样式.
代码示例
使用指定的hoverClass参数初始化一个droppable.
```
$('.selector').droppable({ hoverClass: 'drophover' });
```
在初始化后设置或者获取hoverClass参数.
```
//获取  var hoverClass = $('.selector').droppable('option', 'hoverClass');  //设置  $('.selector').droppable('option', 'hoverClass', 'drophover');
```
scope
类型:
String
默认值:
'default'
用来设置draggle对象和droppable对象的组, 除了droppable中的accept属性指定的元素外,和droppable对象相同组的draggable对象也被允许添加到droppable对象中.
代码示例
使用指定的scope参数初始化一个droppable.
```
$('.selector').droppable({ scope: 'tasks' });
```
在初始化后设置或者获取scope参数.
```
//获取  var scope = $('.selector').droppable('option', 'scope');  //设置  $('.selector').droppable('option', 'scope', 'tasks');
```
tolerance
类型:
String
默认值:
'intersect'
指定使用那种模式来测试一个draggable"经过"一个droppable对象. 允许使用的值: 'fit', 'intersect', 'pointer', 'touch'.
- fit: draggable 完全重叠到droppable
- intersect: draggable 和droppable至少重叠50%
- pointer: 鼠标重叠到droppable
- touch: draggable和droppable的任意重叠
代码示例
使用指定的tolerance参数初始化一个droppable.
```
$('.selector').droppable({ tolerance: 'fit' });
```
在初始化后设置或者获取tolerance参数.
```
//获取  var tolerance = $('.selector').droppable('option', 'tolerance');  //设置  $('.selector').droppable('option', 'tolerance', 'fit');
```

事件

activate
类型:
dropactivate
这个事件会在任何允许的draggable对象开始拖动时触发. 它可以用来在你想让droppable对象在可以被填充的时"亮起来"的时候.
代码示例
提供一个回调函数对activate事件进行操作.
```
$('.selector').droppable({     activate: function(event, ui) { ... }  });
```
使用dropactivate类型来绑定activate事件.
```
$('.selector').bind('dropactivate', function(event, ui) {    ...  });
```
deactivate
类型:
dropdeactivate
此事件会在任何允许的draggable对象停止拖动时触发.
代码示例
提供一个回调函数对deactivate事件进行操作.
```
$('.selector').droppable({     deactivate: function(event, ui) { ... }  });
```
使用dropdeactivate类型来绑定deactivate事件.
```
$('.selector').bind('dropdeactivate', function(event, ui) {    ...  });
```
over
类型:
dropover
此事件会在一个允许的draggable对象"经过"(根据tolerance参数的定义判断)这个droppable对象时触发.
代码示例
提供一个回调函数对over事件进行操作.
```
$('.selector').droppable({     over: function(event, ui) { ... }  });
```
使用dropover类型来绑定over事件.
```
$('.selector').bind('dropover', function(event, ui) {    ...  });
```
out
类型:
dropout
此时间会在一个允许的draggable对象离开(根据tolerance参数的定义判断)这个droppable对象时触发.
代码示例
提供一个回调函数对out事件进行操作.
```
$('.selector').droppable({     out: function(event, ui) { ... }  });
```
使用dropout类型来绑定out事件.
```
$('.selector').bind('dropout', function(event, ui) {    ...  });
```
drop
类型:
drop
这个事件会在一个允许的draggable对象填充进这个droppable对象时触发. 回调函数中, $(this) 表示被填充的droppable对象. ui.draggable 表示draggable对象.
代码示例
提供一个回调函数对drop事件进行操作.
```
$('.selector').droppable({     drop: function(event, ui) { ... }  });
```
使用drop类型来绑定drop事件.
```
$('.selector').bind('drop', function(event, ui) {    ...  });
```

方法

destroy
方法签名:
.droppable( 'destroy' )
完全移除droppable功能. 这将使元素返回到之前的初始化状态.
disable
方法签名:
.droppable( 'disable' )
关闭droppable.
enable
方法签名:
.droppable( 'enable' )
打开droppable.
option
方法签名:
.droppable( 'option', optionName , [value] )
获取或者设置droppable参数. 如果没有提供参数值则是获取.

九：Jquery——Show()方法：

实例

显示出隐藏的 <p> 元素。

$(".btn2").click(function(){  $("p").show();});

定义和用法

如果被选元素已被隐藏，则显示这些元素：

语法

$(selector).show(speed,callback)

参数描述speed

可选。规定元素从隐藏到完全可见的速度。默认为 "0"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从隐藏到完全可见的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

callback

可选。show 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

十:Jquery——animate()

实例

改变 "div" 元素的高度：

$(".btn1").click(function(){  $("#box").animate({height:"300px"});});

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

注释：使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$(selector).animate(styles,speed,easing,callback)CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"speed

可选。规定动画的速度。默认是 "normal"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

easing

可选。规定在不同的动画点中设置动画速度的 easing 函数。

内置的 easing 函数：

swing
linear

扩展插件中提供更多 easing 函数。

callback

可选。animate 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

语法 2

$(selector).animate(styles,options)

options

可选。规定动画的额外选项。

可能的值：

speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

十一： Jquery——toggle()方法：

切换 <p> 元素的显示与隐藏状态：

$(".btn1").click(function(){  $("p").hide();});

定义和用法

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法

$(selector).toggle(speed,callback,switch)

参数描述speed

可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数，则无法使用 switch 参数。

callback

可选。toggle 函数执行完之后，要执行的函数。

如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数，否则不能设置该参数。

switch

可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

True - 显示所有元素
False - 隐藏所有元素

如果设置此参数，则无法使用 speed 和 callback 参数。

Jquery_ 用得比较少的语句

定义和用法

语法

使用函数来插入内容

语法

定义和用法

语法

提示和注释

参数

accept

代码示例

activeClass

代码示例

addClasses

代码示例

greedy

代码示例

hoverClass

代码示例

scope

代码示例

tolerance

代码示例

事件

activate

代码示例

deactivate

代码示例

over

代码示例

out

代码示例

drop

代码示例

方法

destroy

disable

enable

option

实例

定义和用法

语法

实例

定义和用法

语法 1

语法 2

定义和用法

语法