jquery一些方法总结(持续更新中)

slideToggle():

语法:
$(selector).slideToggle(speed,callback)

speed

可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。
可能的值：
毫秒（比如 1500）
"slow"
"normal"
"fast"
在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。

callback

可选。toggle 函数执行完之后，要执行的函数。
除非设置了 speed 参数，否则不能设置该参数。

提示：如果元素已经隐藏，则该效果不产生任何变化，除非规定了 callback 函数。

ready():

语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)

当 DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。

提示：ready() 函数不应与 <body onload=""> 一起使用。

detach()

语法
$(selector).detach()

detach() 方法移除被选元素，包括所有文本和子节点。
这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

实例:

//移动元素
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>移动 p 元素</button>
</body>

//使用 detach() 方法来删除并恢复一个元素。
<script type="text/javascript">
$(document).ready(function(){
  var x;
  $("#btn1").click(function(){
    x=$("p").detach();
  });
  $("#btn2").click(function(){
    $("body").prepend(x);
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button id="btn1">删除 p 元素</button>
<button id="btn2">恢复 p 元素</button>
</body>

//使用 detach() 方法来移动元素，并保留元素的 jQuery 数据。
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
 $("p").click(function(){
    $(this).animate({fontSize:"+=1px"})
  });
});
</script>
</head>
<body>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>
</body>

animate()

语法：
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

实例:

$("button").click(function(){
  $("div").animate({left:'250px'});
});

animate() - 操作多个属性

实例:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

stop()

stop() 方法停止当前正在运行的动画。

语法
$(selector).stop(stopAll,goToEnd)

参数	描述
stopAll	可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd	可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。

实例:

$(document).ready(function(){
  $("#start").click(function(){
    $("#box").animate({height:300},"slow");
    $("#box").animate({width:300},"slow");
    $("#box").animate({height:100},"slow");
    $("#box").animate({width:100},"slow");
  });
  $("#stop").click(function(){
    $("#box").stop(true);
  });
});

finish()

语法:
$(*selector*).finish(*queueName*)

停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有动画。该方法与 .stop(true,true) 方法类似，不同的是，finish() 也会引起所有排队动画的 CSS 属性停止。
queueName可选。规定要停止动画的队列名称。

slideToggle()

slideDown()

slideUp()

slideToggle()方法通过使用滑动效果（高度变化）来切换元素的可见状态。
如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

slideUp() 方法在已经显示的情况下,隐藏选中的元素

slideDown() 方法在已经隐藏的情况下,显示选中的元素

语法
$(selector).slideToggle(speed,callback)  //在显示与隐藏之间来回切换
$(selector).slideUp(speed,callback)   //在已经显示的情况下,隐藏选中的元素
$(selector).slideDown(speed,callback)   //在已经隐藏的情况下,显示选中的元素

参数	描述
speed	可选。规定元素从隐藏到可见的速度（或者相反）。默认为 "normal"。可能的值：毫秒（比如1500）"slow""normal""fast"在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。
callback	可选。toggle 函数执行完之后，要执行的函数。除非设置了 speed 参数，否则不能设置该参数。

index()

语法
$(selector).index()  //获得第一个匹配元素相对于其同胞元素的 index 位置。
$(selector).index(element)  //获得元素相对于选择器的 index 位置。该元素可以通过 DOM 元素或 jQuery 选择器来指定。

index() 方法返回指定元素相对于其他指定元素的 index 位置。
这些元素可通过 jQuery 选择器或 DOM 元素来指定。
注释：如果未找到元素，index() 将返回 -1。

实例:

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($(".hot").index($("#favorite")));
  });
});
</script>
</head>
<body>
<p>请点击下面的按钮，以获得 id="favorite" 的元素相对于 jQuery 选择器 (class="hot") 的 index：</p>
<button>获得 index</button>
<ul>
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot" id="favorite">Coffee</li>
</ul>
</body>

展示元素$node, 隐藏元素$node

$(ele).show()
$(ele).hide()

获取元素$node 的属性: id、src、title，修改以上属性

$node.attr('id');//获取
$node.attr('id’,'值'); //修改
$node.attr('src');//获取
$node.attr('src’,'值');//修改
$node.attr('title');//获取
$node.attr('title’,'值');//修改

给$node 添加自定义属性data-src

$node.data("src",str)

在$ct 内部最开头添加元素$node

$(".ct").prepend(node);

在$ct 内部最末尾添加元素$node

$(".ct").append(node);

删除$node

$node.remove()

把$ct里内容清空

$ct.empty()

在$ct 里设置 html <div class="btn"></div>

$ct.html('<div class="btn"></div>')

获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

$node.width();//不包括内边距宽度,仅包括内容
$node.height();//不包括内边距高度,仅包括内容
$node.innerWidth();//包括内容和内边距宽度
$node.innerHeight();//包括内容和内边距高度
$node.outerWidth();//包括内容,内边距,边框宽度
$node.outerHeight();//包括内容,内边距,边框高度
$node.outerHeight(true);//包括内容,内边距,边框,外边距高度
$node.outerWidth(true);//包括内容,内边距,边框,外边距宽度

获取窗口滚动条垂直滚动距离

$(window).scrollTop()

获取$node 到根节点水平、垂直偏移距离

$node.offset().left
$node.offset().top

修改$node 的样式，字体颜色设置红色，字体大小设置14px

$node.css({"color":"red","font-size":"14px"})

遍历节点，把每个节点里面的文本内容重复一遍

$node.each(function(){
console.log($(this).text())
})

从$ct 里查找 class 为 .item的子元素

$ct.find('.item')

获取$ct 里面的所有孩子

$ct.children()

对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

$node.parents('.ct').children('.panel')

获取选择元素的数量

$(ele).length
$(ele).size()

获取当前元素在兄弟中的排行

$(ele).index();

jquery一些方法总结(持续更新中)

slideToggle():

speed

callback

ready():

detach()

animate()

animate() - 操作多个属性

stop()

finish()

slideToggle()

slideDown()

slideUp()

index()

展示元素$node, 隐藏元素$node

获取元素$node 的 属性: id、src、title， 修改以上属性

给$node 添加自定义属性data-src

在$ct 内部最开头添加元素$node

在$ct 内部最末尾添加元素$node

删除$node

把$ct里内容清空

在$ct 里设置 html <div class="btn"></div>

获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

获取窗口滚动条垂直滚动距离

获取$node 到根节点水平、垂直偏移距离

修改$node 的样式，字体颜色设置红色，字体大小设置14px

遍历节点，把每个节点里面的文本内容重复一遍

从$ct 里查找 class 为 .item的子元素

获取$ct 里面的所有孩子

对于$node，向上找到 class 为'.ct'的父亲，在从该父亲找到'.panel'的孩子

获取选择元素的数量

获取当前元素在兄弟中的排行

推荐阅读更多精彩内容

获取元素$node 的属性: id、src、title，修改以上属性