Jquery_ 用得比较少的语句

原创 2013年12月05日 17:43:23

一、$().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))


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 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 参数。









相关文章推荐

UIView部分方法介绍(主要是用得相对较少的方法)

类方法: //返回一个用于为实例创建图层的类 + (Class)layerClass //指定一个关键帧的单个贞的时间和动画,从IOS7开始使用 //这里说一下参数,第一个frameStartTime...

比较循环语句和数组的速度

  • 2014年09月17日 19:57
  • 164B
  • 下载

SQL分页语句的三种方法的比较

  • 2010年02月09日 08:56
  • 2KB
  • 下载

辞职后五险一金怎么处理?收藏下来吧~早晚用得到

养老保险一 般要交满15年,到退休的时候才能终生享受养老金,所以想拿养老金的人请务必在自己退休前15年就开始交。如果到退休年龄交养老保险不满15年,那等到你 退休的时候国家会把你个人帐户上存的8%...

SQL_ServerDB2数据库SQL语句比较

  • 2011年12月27日 13:35
  • 31KB
  • 下载

用得真心,换的孑然心境

夜游宫 夜游宫。黄昏绸缪寒雨,哪消得、几缕红玉。纤纤轻抚《阳关》...夏天,我一个人在路连云港私人侦探上 夏天,我一个人在路上。一条宽阔的泊油路,在一片荒芜的土地...墨绿的海,深蓝的天 墨绿的海,深...

整理得比较全的SQL语句教程大全

  • 2010年03月19日 16:34
  • 332KB
  • 下载

常用得表单正则表达式

区号+座机号码+分机号码:regexp="^(0[0-9]{2,3}/-)?([2-9][0-9]{6,7})+(/-[0-9]{1,4})?$" 手机(中国移动手机号码):regexp="^(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery_ 用得比较少的语句
举报原因:
原因补充:

(最多只允许输入30个字)